/* Savage Software. The logo's cube is the idea: three faces, three things this
   company does. Magenta is custom work, cyan the apps, lime open source. */

@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("fonts/unbounded-wght.ttf") format("truetype"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-latin-wght-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
  --navy: #172629;
  --text: #24333f;
  --muted: #5b6977;
  --line: #e1e5ec;
  --bg: #f7f8fb;
  --white: #fff;
  --cyan: #00ccda;
  --magenta: #ff199c;
  --lime: #c6d70b;
  --magenta-text: #c4006f;
  --cyan-text: #006f80;
  --lime-text: #5c6a00;
  --grad-cyan: linear-gradient(135deg, #14e6ff, #00b1dc);
  --grad-magenta: linear-gradient(135deg, #ff2f9f, #d80b7c);
  --grad-lime: linear-gradient(135deg, #d4f02e, #b6d108);
  --shadow: 0 1px 2px rgb(23 38 41 / 5%), 0 12px 32px -14px rgb(23 38 41 / 16%);
  --shadow-lift: 0 2px 4px rgb(23 38 41 / 6%), 0 26px 50px -20px rgb(23 38 41 / 30%);
  --radius: 22px;
  --gutter: clamp(20px, 4vw, 48px);
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Cormorant", "Iowan Old Style", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--navy); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -.03em; line-height: 1.06; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.08rem; letter-spacing: -.01em; }
small { font-size: .84rem; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 10px 16px; background: var(--navy); color: #fff; border-radius: 10px; }
.skip-link:focus { top: 10px; }

svg:not(.svg-library, .iso, .layer, .brand-cube, .lockup-cube, .page-cube, .slots, .social) {
  width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.eyebrow { font: 500 .8rem/1.4 var(--mono); color: var(--muted); letter-spacing: .04em; }
.eyebrow-work { color: var(--magenta-text); }
.tag { display: inline-block; padding: 2px 10px; border-radius: 99px; background: #eceff4; color: var(--muted); font: 500 .72rem/1.7 var(--mono); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: 12px 24px; border-radius: 13px; background: var(--navy); color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgb(23 38 41 / 50%); }
.button svg { transition: transform .18s ease; }
.button:hover svg { transform: translateX(3px); }
.button-small { min-height: 42px; padding: 8px 18px; font-size: .92rem; border-radius: 11px; }
.button-ghost { background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); }
.button-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.button-cyan { background: var(--grad-cyan); color: var(--navy); }
.button-lime { background: var(--grad-lime); color: var(--navy); }
.button-light { background: #fff; color: var(--navy); }
.button-ghost-dark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 35%); }
.button-ghost-dark:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.text-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--navy); text-decoration: none; }
a.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Header. */
.site-header { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / 86%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgb(23 38 41 / 7%); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.brand-cube { width: 36px; height: 40px; flex: none; }
.wordmark { font-size: 1.14rem; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.wordmark b { font-weight: 800; }
.nav-menu { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { position: relative; padding: 6px 0; font-weight: 600; font-size: .96rem; color: var(--navy); text-decoration: none; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-links .link-work::after { background: var(--magenta); }
.nav-links .link-apps::after { background: var(--cyan); }
.nav-links .link-source::after { background: var(--lime); }
.nav-langs { display: flex; gap: 2px; font: 500 .78rem/1 var(--mono); text-transform: uppercase; }
.nav-langs a { padding: 7px 7px; border-radius: 7px; color: var(--muted); text-decoration: none; }
.nav-langs a:hover { color: var(--navy); background: #eceff4; }
.nav-langs a[aria-current] { color: var(--navy); background: #e6eaf0; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 11px; background: #eceff4; cursor: pointer; position: relative; }
.menu-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--navy); transition: transform .2s ease, top .2s ease; }
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 25px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* Hero: the brand's picture, drawn so it stays sharp and the cube can move. */
.hero { position: relative; overflow: hidden; background: var(--bg); }
.iso { position: absolute; height: auto; pointer-events: none; }
.iso-tl { left: 0; top: 0; width: clamp(110px, 17vw, 280px); overflow: visible; }
.iso-tr { right: 0; top: 0; width: clamp(110px, 19vw, 300px); overflow: visible; }
.iso-tr .layer { display: block; width: 100%; height: auto; overflow: visible; }
.iso-tr .mini-cube { position: absolute; will-change: transform; }
.iso-tr .mini-a { left: 59.3%; top: 12.9%; width: 26.9%; }
.iso-tr .mini-b { left: 82.1%; top: 70%; width: 17.9%; }
.iso-bl { left: 0; bottom: 0; width: clamp(120px, 24vw, 380px); overflow: hidden; }
.iso-br { right: 0; bottom: 0; width: clamp(250px, 48vw, 800px); overflow: hidden; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: clamp(24px, 4vw, 64px); min-height: min(84vh, 800px); padding-block: clamp(72px, 9vw, 112px) clamp(120px, 13vw, 170px); }
.hero h1 { margin-top: 18px; font-size: clamp(2.7rem, 5.6vw, 5.1rem); letter-spacing: -.035em; line-height: 1.02; }
.hero h1 em { font-style: normal; color: var(--magenta); }
.hero-intro { max-width: 36em; margin-top: 24px; font-size: clamp(1.06rem, 1.4vw, 1.2rem); color: var(--text); }
.hero-reach { max-width: 36em; margin-top: 12px; font-size: clamp(1rem, 1.25vw, 1.08rem); color: var(--muted); }
.hero .actions { margin-top: 34px; }
/* Each face is its own layer, so moving one repaints nothing and the shadow, on the
   base that stays put, is drawn once. face-hit doesn't move: a face that moved away
   from the pointer would lose its hover and come back, over and over.
   On hover a face slides out along its axis as a block: face-walls are its sides,
   exactly as long as the move, so they reach back to where the face was. */
.hero-cube { position: relative; isolation: isolate; width: min(100%, 470px); aspect-ratio: 824 / 940; justify-self: center; }
.hero-cube .layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-cube .cube-base { filter: drop-shadow(0 38px 30px rgb(23 38 41 / 18%)); }
.cube-base polygon { fill: var(--navy); stroke: var(--navy); stroke-width: 8; stroke-linejoin: round; }
.face { outline: none; }
.face-top { --lift: 0, -4.89%; --wall-a: #00a3b4; --wall-b: #00828f; }
.face-left { --lift: -4.85%, 2.45%; --wall-a: #ff69bd; --wall-b: #c80a78; }
.face-right { --lift: 4.85%, 2.45%; --wall-a: #dbe94a; --wall-b: #9dab05; }
.hero-cube .face-hit { z-index: 3; }
.face-hit polygon { fill: transparent; pointer-events: auto; }
.hero-cube .face-art { z-index: 2; transition: transform .36s cubic-bezier(.28, 1.2, .5, 1); will-change: transform, opacity; }
.face-art path { fill: var(--navy); }
/* The rim is the stroke's outer half: at rest it falls on the navy around the face. */
.fill { stroke: var(--navy); stroke-width: 28; stroke-linejoin: round; paint-order: stroke; }
.face-top .fill { fill: var(--cyan); }
.face-left .fill { fill: var(--magenta); }
.face-right .fill { fill: var(--lime); }
.hero-cube .face-walls { z-index: 1; opacity: 0; transition: transform .36s cubic-bezier(.28, 1.2, .5, 1), opacity .1s linear .26s; will-change: transform, opacity; }
.wall { stroke: var(--navy); stroke-width: 12; stroke-linejoin: round; }
.wall-a { fill: var(--wall-a); }
.wall-b { fill: var(--wall-b); }
.face:hover .face-art, .face:focus-visible .face-art { transform: translate(var(--lift)); }
.hero-cube .face:hover .face-walls, .hero-cube .face:focus-visible .face-walls { opacity: 1; transform: translate(var(--lift)); transition: transform .36s cubic-bezier(.28, 1.2, .5, 1), opacity .05s linear; }

/* The three faces, laid flat. */
.sides { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(-96px, -7vw, -56px); }
.tile { position: relative; overflow: hidden; display: block; min-height: 186px; padding: 28px 28px 26px; border-radius: var(--radius); color: var(--navy); text-decoration: none; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.tile h2 { font-size: 1.6rem; }
.tile p { position: relative; max-width: 20em; margin-top: 8px; font-size: .98rem; line-height: 1.5; font-weight: 600; }
.tile .go { position: absolute; right: 24px; top: 26px; font-size: 1.5rem; transition: transform .2s ease; }
.tile:hover .go { transform: translateX(4px); }
.tile-work { background: var(--grad-magenta); }
.tile-apps { background: var(--grad-cyan); }
.tile-source { background: var(--grad-lime); }
.slots { position: absolute; right: -24px; bottom: -44px; height: 170px; width: auto; max-width: 62%; fill: var(--navy); opacity: .11; pointer-events: none; }
.tile-apps .slots { bottom: -18px; height: 120px; }

/* Where Sebastiano worked before. It passes by, or is a plain list for whoever
   prefers no motion: the second copy, which closes the loop, only shows when it moves. */
.employers { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); margin-top: clamp(44px, 5vw, 64px); }
.employers-title { flex: none; max-width: 11em; text-wrap: balance; }
.ticker { flex: 1; min-width: 0; padding-block: 10px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.ticker-list { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; padding-inline: 12px; min-height: 64px; font-size: clamp(1.02rem, 1.4vw, 1.2rem); font-weight: 700; color: var(--navy); white-space: nowrap; }
.ticker-list + .ticker-list { display: none; }
.ticker-list li { display: flex; align-items: center; }
.ticker-list img { flex: none; }
.ticker-list li::after { content: ""; width: 8px; height: 8px; margin-inline: clamp(16px, 2.2vw, 28px); rotate: 45deg; background: var(--magenta); }
.ticker-list li:nth-child(3n+2)::after { background: var(--cyan); }
.ticker-list li:nth-child(3n)::after { background: var(--lime); }
.ticker-list li:last-child::after { content: none; }

/* Sections. */
.section { padding-block: clamp(72px, 9vw, 120px) 0; }
.section-head { margin-bottom: clamp(30px, 4vw, 48px); }
.section-head h2 { margin-top: 8px; }
.section-head p:not(.eyebrow) { max-width: 40em; margin-top: 12px; color: var(--muted); font-size: 1.12rem; }
.focus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: focus; }
.focus li { counter-increment: focus; padding: 24px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); font-weight: 600; font-size: 1.08rem; line-height: 1.35; color: var(--navy); }
.focus li::before { content: "0" counter(focus); display: block; margin-bottom: 26px; font: 500 .8rem/1 var(--mono); color: var(--magenta-text); }
.consult { margin-top: clamp(52px, 7vw, 88px); }
.consult-intro { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(20px, 4vw, 64px); align-items: start; margin-bottom: 32px; }
.consult-intro p { color: var(--text); font-size: 1.1rem; }
.cards { display: grid; gap: 16px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.card { padding: 26px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.card p { margin-top: 8px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.consult-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-top: 16px; }
.consult-split > div { padding: 26px; }
.checks { display: grid; gap: 10px; margin-top: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.checks svg { margin-top: .2em; color: var(--navy); }
.panel { padding: 28px; border-radius: var(--radius); }
.panel p { margin-top: 8px; margin-bottom: 20px; }
.panel-work { background: #ffe6f3; }

/* Projects. */
.projects { border-bottom: 1px solid var(--line); }
.project { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(16px, 3vw, 44px); align-items: start; padding: 30px 12px; border-top: 1px solid var(--line); text-decoration: none; transition: background-color .18s ease, padding .18s ease; }
.project:hover { background: #fff; padding-inline: 24px; border-radius: 16px; }
.project h3 { display: flex; align-items: center; gap: .3em; font-size: clamp(1.3rem, 2.1vw, 1.75rem); letter-spacing: -.03em; }
.project h3 svg { font-size: .8em; color: var(--magenta-text); transition: transform .18s ease; }
.project:hover h3 svg { transform: translate(3px, -3px); }
.project p { color: var(--text); font-size: 1rem; line-height: 1.6; }
.project-meta { display: grid; gap: 8px; justify-items: start; }
.project-meta small { color: var(--muted); font: 500 .76rem/1.55 var(--mono); }

/* Apps on the home page. */
.band { margin-top: clamp(72px, 9vw, 120px); }
.band-apps { position: relative; overflow: hidden; background: var(--navy); color: #d8e0e7; }
.band-apps::before { content: ""; position: absolute; left: -90px; top: -130px; width: 420px; height: 290px; border-radius: 34px; background: var(--grad-cyan); transform: skewY(-30deg); opacity: .95; }
.band-inner { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding-block: clamp(88px, 9vw, 124px) clamp(64px, 8vw, 104px); }
.band-apps h2 { color: #fff; }
.band-copy p { margin: 14px 0 26px; font-size: 1.1rem; }
.app-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 18px; }
.app-icons a { display: grid; justify-items: center; gap: 10px; text-align: center; color: #fff; font-weight: 600; font-size: .88rem; line-height: 1.25; text-decoration: none; }
.app-icons img { width: min(100%, 96px); aspect-ratio: 1; object-fit: cover; border-radius: 23%; box-shadow: 0 14px 26px -12px rgb(0 0 0 / 60%), 0 0 0 1px rgb(255 255 255 / 8%); transition: transform .2s ease; }
.app-icons a:hover img { transform: translateY(-5px) scale(1.04); }

/* About. */
.portrait img { width: min(100%, 480px); margin-inline: auto; }
.lead strong { font-weight: 800; }
.process { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; counter-reset: step; }
.process::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: var(--line); }
.process li { position: relative; counter-increment: step; }
.process li::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 13px; background: var(--c, var(--navy)); color: var(--navy); font-weight: 800; }
.process li:nth-child(1) { --c: var(--magenta); }
.process li:nth-child(2) { --c: var(--cyan); }
.process li:nth-child(3) { --c: var(--lime); }
.process li:nth-child(4)::before { color: #fff; }
.process small { display: block; margin-top: 5px; font: 500 .76rem/1.4 var(--mono); color: var(--muted); }
.process p { margin-top: 10px; font-size: .98rem; line-height: 1.55; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 5px 12px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 .78rem/1.5 var(--mono); color: var(--navy); }
.contact-panel { background: var(--navy); color: #d8e0e7; }
.contact-panel h3 { color: #fff; margin-bottom: 0; }
.contact-panel p { font-size: 1rem; line-height: 1.55; }
.contact-panel dl { display: grid; gap: 9px; margin-bottom: 22px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 14%); font-size: .94rem; }
.contact-panel dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; }
.contact-panel dt { color: #9fb0bd; }
.contact-panel dd { color: #fff; font-weight: 600; }
.contact-panel a:not(.button) { text-underline-offset: 3px; }
.contact-panel .button { width: 100%; background: #fff; color: var(--navy); }

/* Closing: the lime and magenta shapes of the brand picture. */
.closing { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; padding-block: clamp(72px, 9vw, 120px); }
.closing-source, .closing-cta { position: relative; overflow: hidden; padding: clamp(30px, 4vw, 52px); border-radius: 28px; }
.closing-source { display: block; background: var(--grad-lime); color: var(--navy); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.closing-source:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.closing h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.closing p { margin: 12px 0 24px; font-size: 1.08rem; }
.closing-cta { background: linear-gradient(135deg, #d90d78, #ab0062); color: #fff; }
.closing-cta h2 { color: #fff; }

/* Footer. */
.footer { background: #fff; box-shadow: 0 -1px 0 var(--line); font-size: .96rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .7fr 1fr; gap: clamp(28px, 4vw, 64px); padding-block: 60px 44px; }
.lockup { display: inline-flex; align-items: center; gap: 16px; color: var(--navy); text-decoration: none; }
.lockup-cube { width: 74px; height: 83px; flex: none; }
.lockup-words { display: grid; line-height: 1.02; }
.lockup-words b { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; }
.lockup-words span { font-size: 1.58rem; letter-spacing: -.02em; }
.lockup-words small { margin-top: 6px; color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.footer-about p { max-width: 30em; margin-top: 18px; color: var(--muted); line-height: 1.6; }
.footer h2 { margin-bottom: 12px; font-size: 1rem; letter-spacing: -.01em; }
.footer nav a { display: block; padding: 4px 0; text-decoration: none; }
.footer nav a:hover, .footer-contact a:hover, .footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-contact p { color: var(--muted); line-height: 1.5; }
.footer-contact > a { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--navy); }
.footer-contact dl { display: grid; gap: 3px; margin-top: 14px; color: var(--muted); font-size: .88rem; }
.footer-contact dl div { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-contact dd { color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding-block: 18px 26px; background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat; color: var(--muted); font-size: .88rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-links a { text-decoration: none; }
.footer-links a[aria-current] { color: var(--navy); font-weight: 600; }

/* Inner pages: the header takes the colour of the page's face. */
.page-head { position: relative; overflow: hidden; background: var(--bg); }
.page-shape { position: absolute; left: -110px; top: -190px; width: 520px; height: 350px; border-radius: 36px; background: var(--grad-magenta); transform: skewY(-30deg); }
.side-apps .page-shape { background: var(--grad-cyan); }
.side-source .page-shape { background: var(--grad-lime); }
.page-head-grid { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; padding-block: clamp(110px, 12vw, 150px) clamp(40px, 5vw, 64px); }
.page-head h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); letter-spacing: -.04em; line-height: 1; }
.page-head p { max-width: 38em; margin-top: 16px; font-size: 1.16rem; }
.page-cube { width: clamp(110px, 16vw, 190px); height: clamp(124px, 18vw, 214px); filter: drop-shadow(0 22px 18px rgb(23 38 41 / 16%)); --top: #f0f2f6; --left: #dfe3ea; --right: #cfd5de; }
.side-work .page-cube { --left: var(--magenta); }
.side-apps .page-cube { --top: var(--cyan); }
.side-source .page-cube { --right: var(--lime); }

/* /apps. */
.apps-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; padding-bottom: clamp(72px, 9vw, 120px); }
.app { position: relative; grid-column: span 6; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 24px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; scroll-margin-top: 92px; }
.app:has(.app-link):hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.app-link { position: absolute; inset: 0; z-index: 3; border-radius: 24px; }
.app-samurra, .app-mariglia, .app-pilco { grid-column: span 4; }
.app-gallura, .app-onetworun { grid-column: span 12; flex-direction: row; }
.app-gallura .app-art { flex: 1.25; aspect-ratio: auto; min-height: 330px; }
.app-gallura .app-body { flex: 1; align-self: center; }
.app-onetworun { flex-direction: row-reverse; }
.app-onetworun .app-art { flex: 1.25; aspect-ratio: auto; min-height: 330px; }
.app-onetworun .app-body { flex: 1; align-self: center; }
.app-art { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #eef0f4; }
.art-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.app:hover .art-image { transform: scale(1.035); }
.art-logo { position: absolute; left: 50%; top: 50%; width: auto; height: 94%; max-width: none; transform: translate(-50%, -50%); filter: drop-shadow(0 10px 18px rgb(0 0 0 / 28%)); }
.app-samurra .art-image { object-position: 0 50%; }
.app-crittersweep .app-art, .app-yobro .app-art { aspect-ratio: 2 / 1; }
.app-yobro .app-art { background: #5841f5; }
.app-pilco .app-art { background: #021014; }
.app-gallura .app-art { background: #fbfaf4; }
.art-landscape { position: absolute; left: 50%; bottom: 4%; width: 92%; max-width: none; transform: translateX(-50%); }
.art-olive { position: absolute; left: 6%; top: 8%; width: 92px; mix-blend-mode: multiply; }
.building { position: absolute; left: 20px; top: 20px; padding: 7px 14px; border-radius: 10px; background: var(--grad-lime); color: var(--navy); font: 500 .8rem/1.3 var(--mono); box-shadow: 0 8px 18px -6px rgb(0 0 0 / 45%); }
.app-body { display: flex; flex-direction: column; flex: 1; gap: 14px; padding: 26px; }
.app-title { display: flex; align-items: center; gap: 14px; }
.app-title > img { width: 56px; height: 56px; object-fit: cover; border-radius: 14px; box-shadow: 0 0 0 1px rgb(23 38 41 / 8%); }
.app-stores { position: relative; z-index: 4; flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.app-stores a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; transition: transform .15s ease; }
.app-stores a:hover, .app-stores a:focus-visible { transform: translateY(-2px) scale(1.06); }
.app-stores img { width: 32px; height: 32px; object-fit: contain; }
.app-title h2 { font-size: 1.5rem; letter-spacing: -.025em; margin-bottom: 4px; }
.app-body > p { flex: 1; font-size: 1rem; line-height: 1.58; }
.app-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.app-foot small { color: var(--muted); font: 500 .76rem/1.4 var(--mono); }

/* /open-source. */
.webthings { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 72px); align-items: center; background: var(--navy); color: #d8e0e7; border-radius: 28px; padding: clamp(30px, 5vw, 64px); width: min(1144px, calc(100% - 2 * var(--gutter))); }
.webthings h2 { margin: 12px 0 18px; color: #fff; font-family: var(--mono); font-weight: 500; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.04em; }
.webthings p + p { margin-top: 12px; }
.webthings .actions { margin-top: 28px; }
.tag-on-dark { background: var(--grad-lime); color: var(--navy); }
.flow { display: grid; gap: 26px; font: 500 .94rem/1 var(--mono); }
.flow li { position: relative; padding: 15px 18px; border-radius: 12px; background: rgb(255 255 255 / 7%); color: #9fb0bd; text-align: center; }
.flow li:has(a) { background: var(--grad-lime); color: var(--navy); }
.flow a { color: inherit; text-decoration: none; }
.flow a::after { content: ""; position: absolute; inset: 0; }
.flow li:not(:last-child)::before { content: ""; position: absolute; left: 50%; bottom: -21px; width: 2px; height: 16px; background: rgb(255 255 255 / 30%); }
.repos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.repo { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.repo:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.repo h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--mono); font-weight: 500; font-size: 1.14rem; letter-spacing: -.03em; }
.repo h3 svg { color: var(--lime-text); }
.repo p { flex: 1; font-size: .98rem; line-height: 1.55; color: var(--text); }
.repo-meta { display: flex; flex-wrap: wrap; gap: 16px; font: 500 .78rem/1.3 var(--mono); color: var(--muted); }
.repo-meta span { display: inline-flex; align-items: center; gap: 5px; }
.repo-meta svg { stroke-width: 1.8; }
.repos-all { margin-top: 26px; padding-bottom: clamp(72px, 9vw, 120px); }

/* Privacy and terms. */
.legal { width: min(800px, 100%); margin-inline: auto; padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(72px, 9vw, 110px); }
.legal h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -.035em; }
.legal-date { margin-top: 12px; color: var(--muted); font: 500 .8rem/1.4 var(--mono); }
.legal-intro { margin-top: 22px; font-size: 1.14rem; }
.legal section { margin-top: 36px; }
.legal h2 { font-size: 1.36rem; letter-spacing: -.02em; line-height: 1.2; }
.legal p, .legal ul { margin-top: 10px; }
.legal ul { list-style: disc; padding-left: 1.2em; }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--magenta-text); text-underline-offset: 3px; }
.legal-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }

/* Gallura.net: its own page, in its own identity. */
.gallura { --g-ink: #1b2a33; --g-olive: #55684a; --g-paper: #fbfaf4; --g-line: #e5e2d4; --g-sand: #f3f0e3; background: var(--g-paper); color: var(--g-ink); font-size: 1.06rem; }
.gallura h1, .gallura h2, .gallura h3 { font-family: var(--serif); font-weight: 500; color: var(--g-ink); letter-spacing: -.012em; line-height: 1.08; }
.gallura h2 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.gallura h3 { font-size: 1.7rem; font-weight: 600; }
.g-hero { position: relative; overflow: hidden; }
.g-hero-land { position: absolute; right: -7%; bottom: 3%; width: 61%; max-width: none; }
.g-hero-copy { position: relative; padding-block: clamp(28px, 4vw, 44px) clamp(70px, 9vw, 130px); }
.g-back { display: inline-flex; align-items: center; gap: 8px; color: var(--g-olive); font-size: .94rem; font-weight: 600; text-decoration: none; }
.g-back svg { transform: rotate(180deg); }
.g-back:hover { color: var(--g-ink); }
.g-branch { width: 120px; margin-top: 30px; mix-blend-mode: multiply; }
.g-eyebrow { margin-top: 10px; color: var(--g-olive); font: 500 .8rem/1.4 var(--serif); font-size: 1rem; letter-spacing: .24em; text-transform: uppercase; }
.gallura h1 { margin-top: 4px; font-size: clamp(3.4rem, 9vw, 7.4rem); line-height: 1; }
.g-tagline { max-width: 15em; margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.2; }
.g-hero .actions { margin-top: 28px; }
.g-button { display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: 11px 22px; border-radius: 6px; background: var(--g-olive); color: #fff; font-weight: 600; font-size: .98rem; text-decoration: none; transition: background-color .18s ease; }
.g-button:hover { background: #435439; }
.g-button-quiet { background: rgb(255 255 255 / 75%); color: var(--g-ink); box-shadow: inset 0 0 0 1px #c9c6b6; }
.g-button-quiet:hover { background: #fff; }
.g-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 72px); padding-block: clamp(52px, 7vw, 88px) 0; font-size: 1.1rem; line-height: 1.7; }
.g-first { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.28; }
.g-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(44px, 6vw, 72px); padding-block: 28px; border-block: 1px solid var(--g-line); }
.g-stats dd { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1; color: var(--g-olive); }
.g-stats dt { margin-top: 6px; font-size: .94rem; }
.g-stats div { display: flex; flex-direction: column; }
.g-section { padding-block: clamp(56px, 8vw, 104px) 0; }
.g-sites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.g-site { position: relative; padding: 28px; background: #fff; border: 1px solid var(--g-line); border-radius: 8px; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.g-site:hover { border-color: var(--g-olive); transform: translateY(-3px); }
.g-site small { display: block; margin-bottom: 18px; color: var(--g-olive); font: 500 .74rem/1.4 var(--mono); }
.g-site p { margin-top: 12px; font-size: 1rem; line-height: 1.6; }
.g-site svg { position: absolute; right: 22px; top: 24px; color: var(--g-olive); }
.g-app-band { position: relative; overflow: hidden; margin-top: clamp(56px, 8vw, 104px); background: var(--g-sand); }
.g-band-land { position: absolute; right: -4%; bottom: 0; width: 56%; max-width: none; opacity: .55; mix-blend-mode: multiply; }
.g-app { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(52px, 7vw, 88px) 0; }
.g-app-copy { padding-bottom: clamp(52px, 7vw, 88px); }
.g-app-copy p { margin-top: 12px; font-size: 1.12rem; }
.g-app-copy ul { display: grid; gap: 8px; margin: 18px 0 26px; }
.g-app-copy li { padding-left: 22px; position: relative; }
.g-app-copy li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--g-olive); }
.g-phones { display: flex; justify-content: center; align-items: flex-end; align-self: end; gap: 0; height: clamp(330px, 34vw, 470px); }
.g-phones img { width: 34%; height: auto; border-radius: 22px 22px 0 0; box-shadow: 0 20px 40px -14px rgb(27 42 51 / 45%); }
.g-phones img:nth-child(1) { transform: translate(14%, 20%); }
.g-phones img:nth-child(2) { position: relative; z-index: 1; width: 40%; }
.g-phones img:nth-child(3) { transform: translate(-14%, 20%); }
.g-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: 28px; counter-reset: method; }
.g-method li { counter-increment: method; padding-top: 18px; border-top: 1px solid var(--g-ink); }
.g-method li::before { content: counter(method); display: block; margin-bottom: 10px; font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--g-olive); }
.g-method p { margin-top: 8px; font-size: 1rem; line-height: 1.6; }
.g-built-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.g-built-grid article { padding: 28px; background: var(--g-ink); border-radius: 8px; color: #d9dfd9; }
.g-built-grid h3 { color: #fff; font-size: 1.55rem; }
.g-built-grid p { margin-top: 10px; font-size: .98rem; line-height: 1.6; }
.g-join { position: relative; overflow: hidden; margin-top: clamp(56px, 8vw, 104px); padding-block: clamp(52px, 7vw, 88px); text-align: center; background: var(--g-paper); }
.g-join > img { width: min(720px, 90%); margin: 0 auto 24px; mix-blend-mode: multiply; }
.g-join p { max-width: 34em; margin: 12px auto 24px; font-size: 1.12rem; }
.page-gallura .footer { box-shadow: 0 -1px 0 var(--g-line, #e5e2d4); }


/* /werk, /over-mij and the home page's short versions of them. */
.section-first { padding-top: clamp(8px, 2vw, 24px); }
.page-head .actions { margin-top: 24px; }
.consult-intro h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
.consult-split h3 { font-size: 1.08rem; letter-spacing: -.01em; }
.section-head-split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; }
.section > h2 { margin-bottom: 0; }
.work-details { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(24px, 3vw, 40px); margin-top: clamp(52px, 7vw, 80px); align-items: start; }
.work-details h3 { margin-bottom: 14px; }
.work-details .checks { margin-top: 0; font-size: 1rem; }
.home-about { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.home-about .lead { max-width: 34em; margin: 14px 0 24px; font-size: 1.2rem; line-height: 1.55; color: var(--navy); }
.about-head { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(96px, 10vw, 128px) clamp(24px, 4vw, 48px); }
.page-head .about-head p { max-width: none; margin-top: 10px; font-size: 1.08rem; }
.page-head .about-head .lead { margin-top: 18px; font-size: 1.2rem; line-height: 1.6; color: var(--navy); }
.about-facts { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 72px); align-items: start; padding-block: clamp(32px, 5vw, 64px) 0; }
.about-facts h2 { margin-bottom: 16px; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.about-reach { margin-top: 14px; }
.about-pitch { margin-bottom: clamp(32px, 4vw, 48px); font-size: 1.12rem; }
.contact-panel h2 { margin-bottom: 0; color: #fff; font-size: 1.3rem; letter-spacing: -.02em; }
.sides-plain { margin-top: clamp(52px, 7vw, 88px); }
.closing-solo { grid-template-columns: 1fr; }

/* Sharing and the social icons. */
.social { width: 20px; height: 20px; fill: currentColor; flex: none; }
.share-bar { background: #fff; box-shadow: 0 -1px 0 var(--line); }
.share-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 18px; }
.share-inner h2 { font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.3; }
.share-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-links a, .footer-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #eef0f4; color: var(--navy); transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.share-links a:hover, .footer-social a:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.share-native { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 0; border-radius: 12px; background: #eef0f4; color: var(--navy); font: 600 .9rem/1.2 var(--sans); cursor: pointer; }
.share-native:hover { background: var(--navy); color: #fff; }
.share-native[hidden] { display: none; }
.footer-social { display: flex; gap: 8px; margin-top: 18px; }

/* /open-source/go-webthings. */
.page-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: .94rem; font-weight: 600; text-decoration: none; }
.page-back svg { transform: rotate(180deg); }
.page-back:hover { color: var(--navy); }
.wt-gopher { display: block; width: auto; height: 70px; margin-bottom: 10px; }
.page-head .wt-title { font-family: var(--mono); font-weight: 500; font-size: clamp(2.3rem, 6vw, 4.4rem); letter-spacing: -.05em; }
.page-head .actions { margin-top: 24px; }
.wt-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px, 5vw, 72px); padding-block: clamp(24px, 3vw, 40px) clamp(56px, 7vw, 88px); }
.wt-lead { font-size: 1.28rem; line-height: 1.5; color: var(--navy); font-weight: 600; letter-spacing: -.01em; }
.wt-core { padding: clamp(30px, 5vw, 64px); background: var(--navy); color: #d8e0e7; border-radius: 28px; width: min(1144px, calc(100% - 2 * var(--gutter))); }
.wt-core h2 { color: #fff; }
.wt-core-head p { max-width: 42em; margin-top: 14px; font-size: 1.1rem; }
.flow-line { display: grid; grid-template-columns: .7fr 1fr 1fr 1fr .7fr; gap: 26px; margin-block: 34px; font: 500 .96rem/1.2 var(--mono); counter-reset: none; }
.flow-line li { position: relative; display: grid; align-content: center; justify-items: center; min-height: 72px; padding: 10px; border-radius: 13px; background: rgb(255 255 255 / 7%); color: #9fb0bd; text-align: center; }
.flow-line li.on { background: var(--grad-lime); color: var(--navy); }
.flow-line small { font-size: .7rem; opacity: .75; }
.flow-line li:not(:last-child)::after { content: ""; position: absolute; right: -21px; top: 50%; width: 16px; height: 2px; background: rgb(255 255 255 / 35%); }
.wt-components { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wt-component { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); }
.wt-component img { width: auto; height: 70px; align-self: flex-start; }
.wt-component p { flex: 1; font-size: .98rem; line-height: 1.55; }
.wt-links { display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); font: 500 .8rem/1.3 var(--mono); }
.wt-links a { color: var(--navy); text-underline-offset: 3px; }
.wt-pieces { padding-block: clamp(64px, 8vw, 104px) 0; }
.wt-backend { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: start; padding-block: clamp(64px, 8vw, 104px) 0; }
.wt-backend > * { min-width: 0; }
.wt-backend > div > p { margin: 14px 0 20px; font-size: 1.08rem; }
.code { margin: 0; padding: 26px; overflow-x: auto; border-radius: var(--radius); background: var(--navy); color: #e6edf1; font: 500 .84rem/1.65 var(--mono); }
.wt-modules { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: start; padding-block: clamp(56px, 7vw, 88px); }
.wt-modules > div > p { margin: 14px 0 20px; font-size: 1.08rem; }
.wt-not { background: #f3f8d4; }
.wt-not p { margin-bottom: 0; }

/* /apps/yo-bro: its own page, in its own colours. */
.yobro { --y-violet: #5841f5; --y-deep: #3a24aa; --y-soft: #ebe7ff; --y-yellow: #ffd23f; --y-ink: #1c1633; background: #f4f2ff; color: var(--y-ink); }
.yobro h1, .yobro h2, .yobro h3 { color: var(--y-ink); font-family: "Unbounded", var(--sans); font-weight: 700; letter-spacing: -.03em; }
.yobro h2 { font-size: clamp(1.8rem, 3.8vw, 2.9rem); line-height: 1.12; }
.yobro h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.y-hero { background: var(--y-violet); color: #fff; overflow: hidden; }
.y-hero-copy { padding-block: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px); }
.y-back { display: inline-flex; align-items: center; gap: 8px; color: #ded9ff; font-size: .94rem; font-weight: 600; text-decoration: none; }
.y-back svg { transform: rotate(180deg); }
.y-back:hover { color: #fff; }
.y-eyebrow { margin-top: 20px; color: var(--y-yellow); font: 500 .84rem/1.4 var(--mono); }
.yobro h1 { max-width: 15em; margin-top: 10px; color: #fff; font-size: clamp(2.1rem, 5.2vw, 4rem); line-height: 1.06; }
.y-intro { max-width: 40em; margin-top: 18px; color: #f0eeff; font-size: clamp(1.04rem, 1.4vw, 1.18rem); }
.y-hero .actions { margin-top: 26px; }
.y-button { display: inline-flex; align-items: center; gap: .5em; min-height: 50px; padding: 12px 24px; border-radius: 15px; background: var(--y-yellow); color: var(--y-ink); font-weight: 600; text-decoration: none; transition: transform .18s ease; }
.y-button:hover { transform: translateY(-2px) rotate(-1deg); }
.y-button-quiet { background: rgb(255 255 255 / 16%); color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 40%); }
.y-banner { display: block; width: min(1500px, 100%); margin-inline: auto; }
.y-goal { padding-block: clamp(56px, 7vw, 96px) 0; }
.y-goal-text { max-width: 26em; margin-top: 16px; color: var(--y-deep); font-size: clamp(1.4rem, 2.8vw, 2.1rem); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.y-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.y-goals article { padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 14px 30px -20px rgb(58 36 170 / 40%); }
.y-goals article:nth-child(odd) { transform: rotate(-.6deg); }
.y-goals article:nth-child(even) { transform: rotate(.6deg); }
.y-goals p { margin-top: 10px; font-size: .98rem; line-height: 1.55; }
.y-how { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(56px, 7vw, 96px) 0; }
.y-steps { display: grid; gap: 18px; margin-top: 26px; counter-reset: y-step; }
.y-steps li { position: relative; padding-left: 62px; counter-increment: y-step; }
.y-steps li::before { content: counter(y-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--y-yellow); font: 700 1.05rem/1 "Unbounded", var(--sans); }
.y-steps p { margin-top: 4px; }
.y-ways-title { margin-top: 30px; }
.y-ways { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.y-ways li { padding: 6px 14px; border-radius: 99px; background: var(--y-soft); color: var(--y-deep); font-weight: 600; font-size: .9rem; }
.y-phone { width: min(100%, 290px); margin-inline: auto; border-radius: 30px; box-shadow: 0 28px 50px -22px rgb(58 36 170 / 60%), 0 0 0 6px var(--y-ink); }
.y-inside { margin-top: clamp(56px, 7vw, 96px); padding-block: clamp(56px, 7vw, 88px); background: var(--y-soft); }
.y-inside-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: 32px; }
.y-inside-grid .y-phone { width: min(78%, 250px); margin-bottom: 26px; }
.y-inside-grid p { margin-top: 8px; font-size: 1rem; line-height: 1.55; }
.y-class { padding-block: clamp(56px, 7vw, 96px) 0; }
.y-class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 20px; }
.y-class-grid article { padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 14px 30px -20px rgb(58 36 170 / 40%); }
.y-class-grid p { margin-top: 8px; font-size: 1rem; line-height: 1.55; }
.y-link { display: inline-flex; align-items: center; gap: .4em; color: var(--y-violet); font-weight: 600; text-underline-offset: 4px; }
.y-lists { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); padding-block: clamp(56px, 7vw, 96px) 0; }
.y-lists h2 { margin-bottom: 18px; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.y-closing { padding-block: clamp(56px, 7vw, 96px); }
.y-closing-card { padding: clamp(30px, 5vw, 60px); border-radius: 30px; background: var(--y-violet); color: #fff; }
.yobro .y-closing-card h2 { color: #fff; }
.y-closing-card > p { max-width: 40em; margin: 14px 0 24px; font-size: 1.12rem; }
.y-closing-card .y-sources { margin: 24px 0 0; color: #ded9ff; font-size: .96rem; }
.y-sources a { color: #fff; text-underline-offset: 3px; font-weight: 600; }

/* The contact page. */
.contact-page { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(20px, 3vw, 40px); align-items: start; padding-block: clamp(32px, 5vw, 56px) clamp(56px, 8vw, 96px); }
.contact-card { background: var(--white); box-shadow: var(--shadow); }
.contact-form { display: grid; gap: 18px; }
.contact-form label { display: grid; gap: 7px; font-weight: 600; color: var(--navy); }
.contact-form input, .contact-form textarea { width: 100%; min-height: 50px; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-weight: 400; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--navy); outline: none; background: var(--white); }
.contact-form .button { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.panel .form-privacy { margin: 0; font-size: .92rem; color: var(--muted); }
.form-privacy a { text-underline-offset: 3px; }
.panel .form-note { margin: 0 0 20px; padding: 14px 16px; border-radius: 12px; font-weight: 600; }
.form-note a { text-underline-offset: 3px; }
.form-ok { background: #f3f8cf; color: var(--lime-text); }
.form-error { background: #ffe6f3; color: var(--magenta-text); }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* It starts just after the first paint, while the page is still busy loading,
     and eases gently: the fastest part of the move is the part a busy page drops. */
  .hero-cube .cube-base { animation: cube-in .5s ease-out .1s backwards; will-change: opacity; }
  .face-art { animation: assemble .9s cubic-bezier(.22, .61, .36, 1) backwards; }
  .face-top .face-art { --from: 0, -13.8%; animation-delay: .12s; }
  .face-left .face-art { --from: -14%, 7%; animation-delay: .19s; }
  .face-right .face-art { --from: 14%, 7%; animation-delay: .26s; }
  .mini-cube { animation: drift 7s ease-in-out infinite alternate; }
  .mini-b { animation-delay: -3s; }
  .ticker-track { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .ticker-list { flex: none; flex-wrap: nowrap; justify-content: space-around; min-width: 100%; padding-inline: 0; animation: ticker 40s linear infinite; will-change: transform; }
  .ticker-list + .ticker-list { display: flex; }
  .ticker-list li:last-child::after { content: ""; }
  .ticker:hover .ticker-list { animation-play-state: paused; }
  @keyframes ticker { to { transform: translateX(-100%); } }
  @keyframes cube-in { from { opacity: 0; } }
  @keyframes assemble { from { transform: translate(var(--from)); opacity: 0; } }
  @keyframes drift { to { transform: translateY(16%); } }
}

@media (max-width: 1100px) {
  .focus, .y-goals { grid-template-columns: repeat(2, 1fr); }
  .flow-line { gap: 16px; }
  .flow-line li:not(:last-child)::after { right: -14px; width: 12px; }
  .work-details { grid-template-columns: 1fr 1fr; }
  .nav-menu { gap: 18px; }
  .nav-links { gap: 18px; }
}

@media (max-width: 900px) {
  .employers { flex-direction: column; align-items: stretch; gap: 14px; }
  .employers-title { max-width: none; }
  .menu-toggle { display: block; }
  .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 16px; padding: 18px var(--gutter) 24px; background: #fff; box-shadow: 0 18px 30px -18px rgb(23 38 41 / 30%); }
  .nav-menu.open { display: flex; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 1.1rem; }
  .nav-menu .button { width: 100%; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-block: 92px 130px; }
  .hero-cube { width: min(64%, 300px); }
  .contact-page, .sides, .cards-3, .consult-intro, .consult-split, .band-inner, .closing, .webthings, .repos, .footer-grid, .g-intro, .g-sites, .g-app, .g-method, .g-built-grid, .wt-intro, .wt-components, .wt-backend, .wt-modules, .y-how, .y-inside-grid, .y-class-grid, .y-lists, .home-about, .about-head, .about-facts, .work-details { grid-template-columns: 1fr; }
  .flow-line { grid-template-columns: 1fr; gap: 22px; }
  .flow-line li { min-height: 52px; }
  .flow-line li:not(:last-child)::after { left: 50%; right: auto; top: auto; bottom: -17px; width: 2px; height: 12px; }
  .tile { min-height: 0; }
  .project { grid-template-columns: 1fr; gap: 10px; }
  .project-meta { grid-auto-flow: row; }
  .process { grid-template-columns: 1fr 1fr; }
  .process::before { display: none; }
  .portrait img { width: min(70%, 320px); }
  .apps-grid { gap: 16px; }
  .app, .app-samurra, .app-mariglia, .app-pilco, .app-gallura, .app-onetworun { grid-column: span 12; flex-direction: column; }
  .app-gallura .app-art, .app-onetworun .app-art { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  .app-gallura .app-body, .app-onetworun .app-body { align-self: stretch; }
  .g-hero-land { position: relative; right: auto; width: 110%; margin-left: -5%; }
  .g-hero-copy { padding-bottom: 12px; }
  .g-hero { display: flex; flex-direction: column-reverse; }
  .g-stats { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .g-phones { height: auto; padding-top: 12px; }
  .g-app-copy { padding-bottom: 0; }
  .g-band-land { width: 100%; }
}

@media (max-width: 560px) {
  .app-title { flex-wrap: wrap; }
  body { font-size: 1rem; }
  .focus, .process, .y-goals { grid-template-columns: 1fr; }
  .y-goals article { transform: none !important; }
  .app-icons { grid-template-columns: repeat(3, 1fr); }
  .page-head-grid { grid-template-columns: 1fr; }
  .page-cube { display: none; }
  .page-shape { width: 250px; height: 180px; left: -70px; top: -110px; }
  .page-head-grid { padding-top: 112px; }
  .hero-cube { width: 62%; }
  .closing-source, .closing-cta { border-radius: 22px; }
}