@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* door2.pt — component styles. Values come from tokens.css; nothing here re-declares a token. */

html, body { background: var(--surface-100); color: var(--ink); }
body { margin: 0; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Wordmark */
.d2-wordmark { display: inline-flex; align-items: flex-end; gap: 0.35em; line-height: 1; color: var(--ink); font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.03em; }
.d2-wordmark-tld { color: var(--cobalt); }

/* Mark — the door: glass rods in an arch, one slanted neon rod */
.d2-mark { display: block; flex: none; overflow: visible; }
.d2-mark-leaf { stroke: var(--neon); stroke-linecap: round; fill: none; }
.d2-mark--flat .d2-mark-rod { fill: var(--ink); }
.d2-mark--glass .d2-mark-rod { fill: var(--rod-fill); stroke: var(--rod-rim); stroke-width: 2.4; }
.d2-mark-tile { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; isolation: isolate; background: var(--surface-100); }
.d2-mark-tile::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 34% 46%, var(--ink-glow) 0, var(--ink-glow) 14%, transparent 56%), radial-gradient(circle at 58% 78%, var(--sky-glow) 0, transparent 52%); }
.d2-mark-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 88% 14%, var(--rose-glow) 0, transparent 46%); }

/* Button */
.d2-btn { --_h: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--_h); padding: 0 var(--space-5); border-radius: var(--radius-pill); border: 1px solid transparent; font: 600 15px/1 var(--font-sans); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; white-space: nowrap; }
.d2-btn--sm { --_h: 36px; padding: 0 var(--space-4); font-size: 14px; }
.d2-btn--lg { --_h: 56px; padding: 0 var(--space-6); font-size: 17px; }
.d2-btn:active { transform: translateY(1px) scale(.99); }
.d2-btn:disabled { opacity: .45; cursor: not-allowed; }
.d2-btn--primary { background: var(--cobalt); color: var(--on-cobalt); box-shadow: inset 0 1px 0 var(--glass-specular), 0 8px 24px rgba(14,31,102,.22); }
.d2-btn--primary:hover { background: var(--cobalt-deep); }
[data-theme="dark"] .d2-btn--primary:hover { background: var(--cobalt-deep); color: var(--surface-100); }
.d2-btn--glass { background: var(--glass-fill); color: var(--ink); border-color: var(--glass-stroke); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); box-shadow: var(--shadow-glass); }
.d2-btn--glass:hover { background: var(--surface-200); }
.d2-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.d2-btn--ghost:hover { background: var(--surface-300); }
.d2-btn--link { background: none; color: var(--cobalt); padding: 0; height: auto; border-radius: 0; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.d2-btn-arrow { transition: transform .2s ease; }
.d2-btn:hover .d2-btn-arrow { transform: translateX(3px); }

/* Tag */
.d2-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); background: transparent; }
.d2-tag--cobalt { background: var(--cobalt-wash); border-color: transparent; color: var(--cobalt-deep); }
.d2-tag--accent { border-color: var(--neon-ink); color: var(--neon-ink); }
.d2-tag--solid { background: var(--cobalt); border-color: transparent; color: var(--on-cobalt); }

/* Kicker */
.d2-kicker { display: flex; align-items: center; gap: var(--space-2); font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.d2-kicker-num { color: var(--cobalt); }
.d2-kicker-rule { flex: 1; height: 1px; background: var(--hairline); margin-left: var(--space-2); min-width: var(--space-6); }

/* GlassPanel — liquid glass */
.d2-glass { position: relative; isolation: isolate; overflow: hidden; color: var(--ink); background: var(--glass-fill); border: 1px solid var(--glass-stroke); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7); backdrop-filter: blur(var(--glass-blur)) saturate(1.7); }
.d2-glass--strong { -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.8); backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.8); }
.d2-glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 60% at 0% 0%, var(--glass-specular), transparent 55%); opacity: .55; }
.d2-glass::after { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; z-index: -1; background: linear-gradient(90deg, transparent, var(--glass-specular), transparent); pointer-events: none; }
.d2-glass--r-sm { border-radius: var(--radius-sm); }
.d2-glass--r-md { border-radius: var(--radius-md); }
.d2-glass--r-lg { border-radius: var(--radius-lg); }
.d2-glass--r-pill { border-radius: var(--radius-pill); }
.d2-glass--p-none { padding: 0; }
.d2-glass--p-sm { padding: var(--space-4); }
.d2-glass--p-md { padding: var(--space-5); }
.d2-glass--p-lg { padding: var(--space-6); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .d2-glass, .d2-btn--glass, .d2-nav { background: var(--surface-200); }
}

/* InkField — blurred cobalt ink + paper grain */
.d2-ink { position: relative; overflow: hidden; isolation: isolate; background: var(--surface-100); }
.d2-ink--dots { background-image: radial-gradient(var(--hairline) 1.2px, transparent 1.6px); background-size: var(--space-5) var(--space-5); background-position: center; }
.d2-ink-orbs { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.d2-orb { position: absolute; height: 0; border-radius: 50%; transform: translate(-50%, -50%); filter: blur(var(--orb-blur)); mix-blend-mode: multiply; }
[data-theme="dark"] .d2-orb { mix-blend-mode: screen; }
.d2-orb--ink { background: radial-gradient(circle at 50% 50%, var(--ink-glow) 0%, var(--ink-glow) 30%, transparent 70%); }
.d2-orb--sky { background: radial-gradient(circle at 50% 50%, var(--sky-glow) 0%, transparent 70%); }
.d2-orb--rose, .d2-orb--coral { background: radial-gradient(circle at 50% 50%, var(--rose-glow) 0%, transparent 70%); }
.d2-orb--deep { background: radial-gradient(circle at 50% 50%, var(--cobalt-deep) 0%, transparent 70%); }
.d2-ink-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="dark"] .d2-ink-grain { mix-blend-mode: screen; opacity: calc(var(--grain-opacity) * .5); filter: invert(1); }
.d2-ink-content { position: relative; }

/* ErodingLetters */
.d2-erode { position: relative; user-select: none; pointer-events: none; font-family: var(--font-sans); white-space: nowrap; }
.d2-erode-line { display: block; }
.d2-erode-char, .d2-erode-space { position: relative; display: inline-block; }
.d2-erode-ghost { display: inline-block; opacity: var(--erode-ink-opacity); }
.d2-erode-piece { position: absolute; left: 0; top: 0; will-change: transform, filter, opacity; }
.d2-erode--wash { color: var(--cobalt-wash); }
.d2-erode--cobalt { color: var(--cobalt); }
.d2-erode--deep { color: var(--cobalt-deep); }
.d2-erode--ink { color: var(--ink); }

/* ServiceCard */
.d2-service { display: flex; flex-direction: column; gap: var(--space-3); }
.d2-service-title { margin: var(--space-1) 0 0; color: var(--ink); }
.d2-service-body { color: var(--ink-muted); margin: 0; }
.d2-service-body p { margin: 0; }
.d2-service-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.d2-service-link { margin-top: var(--space-2); align-self: flex-start; font: 600 14px/1 var(--font-sans); color: var(--cobalt); text-decoration: none; }
.d2-service-link:hover { text-decoration: underline; text-underline-offset: .25em; }

/* NavBar — glass pill */
.d2-nav { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); border-radius: var(--radius-pill); background: var(--glass-fill); border: 1px solid var(--glass-stroke); box-shadow: var(--shadow-glass), var(--shadow-float); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7); backdrop-filter: blur(var(--glass-blur)) saturate(1.7); }
.d2-nav-brand { text-decoration: none; display: inline-flex; }
.d2-nav-links { display: flex; gap: var(--space-1); list-style: none; margin: 0 auto; padding: 0; }
.d2-nav-links a { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font: 500 14px/1 var(--font-sans); color: var(--ink-muted); text-decoration: none; }
.d2-nav-links a:hover { color: var(--ink); }
.d2-nav-links a.is-active { color: var(--ink); background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--glass-stroke); }
.d2-nav-end { display: flex; align-items: center; gap: var(--space-3); }
.d2-lang { display: inline-flex; gap: 2px; }
.d2-lang button { height: 28px; min-width: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-pill); background: transparent; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--ink-muted); cursor: pointer; }
.d2-lang button.is-active { background: var(--ink); color: var(--surface-100); }
@media (max-width: 720px) { .d2-nav-links { display: none; } .d2-nav { justify-content: space-between; } }