diff --git a/assets/images/backdrop.jpg b/assets/images/backdrop.jpg index 57a9932..3114eae 100644 Binary files a/assets/images/backdrop.jpg and b/assets/images/backdrop.jpg differ diff --git a/assets/images/backdrop2.jpg b/assets/images/backdrop2.jpg deleted file mode 100644 index 3114eae..0000000 Binary files a/assets/images/backdrop2.jpg and /dev/null differ diff --git a/assets/images/logo-transparent.png b/assets/images/logo-transparent.png index 608b8d9..5a57b05 100644 Binary files a/assets/images/logo-transparent.png and b/assets/images/logo-transparent.png differ diff --git a/assets/images/logo.png b/assets/images/logo.png deleted file mode 100644 index 291eb7f..0000000 Binary files a/assets/images/logo.png and /dev/null differ diff --git a/index.html b/index.html index 44abe1b..ccbf5c2 100644 --- a/index.html +++ b/index.html @@ -5,19 +5,60 @@ - Cedarline Digital | Software Built From Strong Foundations + Cedarline Digital | Independent Software Business in British Columbia + + + + + + + + + + +
- About Work Contact - Email + Email
@@ -47,7 +88,7 @@ Digital solutions.

- Cedarline Digital is an independent software business based in Beautiful British Columbia, Canada. + Cedarline Digital is an independent software business based in Beautiful British Columbia.

Learn more @@ -59,7 +100,7 @@

About

-

Independent software, built with care.

+

Independent software, rooted in reliability.

@@ -84,6 +125,10 @@
Structure
Independent / founder-led
+
+
Operator
+
Founder / operator: Braeden Sowinski
+
Status
Preparing public products and resources
@@ -155,8 +200,9 @@

Contact

+

Contact Cedarline Digital

- For general contact, support, business inquiries, or future product questions, use the email below. + Cedarline Digital is operated independently from British Columbia. For general contact, support, business inquiries, or future product questions, use the following email.

@@ -176,15 +222,15 @@
-

An independent software business based in British Columbia.

+

An independent software business. Operated by Braeden Sowinski.

British Columbia, Canada
@@ -199,7 +245,7 @@

Legal

Privacy Terms - Email + Email
diff --git a/styles.css b/styles.css index 0254ca4..c68ecdc 100644 --- a/styles.css +++ b/styles.css @@ -1,76 +1,135 @@ :root { - --bg: #0f1111; - --surface: #171c1a; - --surface-light: #1f2924; - --evergreen: #2a5e3e; - --accent: #4f8a6b; - --soft: #86b38f; - --text: #e6e8e6; - --muted: #9ca3a0; - --border: rgba(255, 255, 255, 0.08); - --border-strong: rgba(134, 179, 143, 0.22); - --shadow: rgba(0, 0, 0, 0.4); - --max-width: 1240px; - --radius: 8px; + --bg: #0f1111; + --surface: #171c1a; + --surface-light: #1f2924; + --evergreen: #2a5e3e; + --accent: #4f8a6b; + --soft: #86b38f; + --text: #e6e8e6; + --muted: #9ca3a0; + --border: rgba(255, 255, 255, 0.08); + --border-strong: rgba(134, 179, 143, 0.22); + --shadow: rgba(0, 0, 0, 0.4); + --max-width: 1240px; + --radius: 8px; } * { - box-sizing: border-box; + box-sizing: border-box; } html { - scroll-behavior: smooth; + scroll-behavior: smooth; } body { - margin: 0; - min-width: 320px; - color: var(--text); - font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - line-height: 1.6; - background: - linear-gradient(180deg, rgba(15, 17, 17, 0.56), var(--bg) 760px), - linear-gradient(90deg, rgba(15, 17, 17, 0.94), rgba(15, 17, 17, 0.72) 45%, rgba(15, 17, 17, 0.9)), - radial-gradient(circle at 72% 6%, rgba(79, 138, 107, 0.18), transparent 34rem), - radial-gradient(circle at 12% 18%, rgba(42, 94, 62, 0.18), transparent 30rem), - linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px), - url("assets/images/backdrop2.jpg"), - var(--bg); - background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, fixed, scroll; - background-position: center top, center top, center top, center top, center top, center top, center top, center top; - background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat; - background-size: auto, auto, auto, auto, 88px 88px, 88px 88px, cover, auto; + margin: 0; + min-width: 320px; + color: var(--text); + font-family: + Manrope, + Inter, + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + sans-serif; + line-height: 1.6; + background: + linear-gradient(180deg, rgba(15, 17, 17, 0.56), var(--bg) 760px), + linear-gradient( + 90deg, + rgba(15, 17, 17, 0.94), + rgba(15, 17, 17, 0.72) 45%, + rgba(15, 17, 17, 0.9) + ), + radial-gradient( + circle at 72% 6%, + rgba(79, 138, 107, 0.18), + transparent 34rem + ), + radial-gradient( + circle at 12% 18%, + rgba(42, 94, 62, 0.18), + transparent 30rem + ), + linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px), + url("assets/images/backdrop.jpg"), var(--bg); + background-attachment: + scroll, scroll, scroll, scroll, scroll, scroll, fixed, scroll; + background-position: + center top, + center top, + center top, + center top, + center top, + center top, + center top, + center top; + background-repeat: + no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, + no-repeat; + background-size: + auto, + auto, + auto, + auto, + 88px 88px, + 88px 88px, + cover, + auto; } body::before, body::after { - position: fixed; - inset: 0; - z-index: -2; - pointer-events: none; - content: ""; + position: fixed; + inset: 0; + z-index: -2; + pointer-events: none; + content: ""; } body::before { - background: - linear-gradient(135deg, transparent 0 56%, rgba(134, 179, 143, 0.035) 56% 56.4%, transparent 56.4%), - linear-gradient(28deg, transparent 0 66%, rgba(79, 138, 107, 0.045) 66% 66.4%, transparent 66.4%); + background: + linear-gradient( + 135deg, + transparent 0 56%, + rgba(134, 179, 143, 0.035) 56% 56.4%, + transparent 56.4% + ), + linear-gradient( + 28deg, + transparent 0 66%, + rgba(79, 138, 107, 0.045) 66% 66.4%, + transparent 66.4% + ); } body::after { - top: auto; - height: 44vh; - background: - linear-gradient(155deg, transparent 0 36%, rgba(31, 41, 36, 0.82) 36% 37%, transparent 37%), - linear-gradient(18deg, transparent 0 43%, rgba(23, 28, 26, 0.9) 43% 44%, transparent 44%), - linear-gradient(0deg, rgba(15, 17, 17, 0.94), transparent); - opacity: 0.46; + top: auto; + height: 44vh; + background: + linear-gradient( + 155deg, + transparent 0 36%, + rgba(31, 41, 36, 0.82) 36% 37%, + transparent 37% + ), + linear-gradient( + 18deg, + transparent 0 43%, + rgba(23, 28, 26, 0.9) 43% 44%, + transparent 44% + ), + linear-gradient(0deg, rgba(15, 17, 17, 0.94), transparent); + opacity: 0.46; } a { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } p, @@ -78,42 +137,42 @@ h1, h2, h3, dl { - margin-top: 0; + margin-top: 0; } .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } .site-header { - position: sticky; - top: 16px; - z-index: 20; - display: flex; - align-items: center; - justify-content: space-between; - width: min(100% - 32px, var(--max-width)); - min-height: 68px; - margin: 0 auto; - padding: 10px 12px; - border: 1px solid var(--border); - border-radius: var(--radius); - background: rgba(15, 17, 17, 0.68); - box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24); - backdrop-filter: blur(22px); + position: sticky; + top: 16px; + z-index: 20; + display: flex; + align-items: center; + justify-content: space-between; + width: min(100% - 32px, var(--max-width)); + min-height: 68px; + margin: 0 auto; + padding: 10px 12px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: rgba(15, 17, 17, 0.68); + box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24); + backdrop-filter: blur(22px); } .site-header.is-scrolled { - background: rgba(15, 17, 17, 0.86); - border-color: rgba(255, 255, 255, 0.12); + background: rgba(15, 17, 17, 0.86); + border-color: rgba(255, 255, 255, 0.12); } .brand, @@ -124,409 +183,477 @@ dl { .site-footer, .site-footer div, .site-footer nav { - display: flex; - align-items: center; + display: flex; + align-items: center; } .brand { - gap: 12px; - padding-right: 10px; - font-weight: 800; - letter-spacing: 0; + gap: 12px; + padding-right: 10px; + font-weight: 800; + letter-spacing: 0; } .brand-mark, .panel-mark { - display: grid; - place-items: center; - border: 1px solid var(--border-strong); - border-radius: var(--radius); - background: - linear-gradient(150deg, rgba(31, 41, 36, 0.96), rgba(15, 17, 17, 0.82)), - radial-gradient(circle at 50% 18%, rgba(134, 179, 143, 0.18), transparent 70%); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 34px var(--shadow); + display: grid; + place-items: center; + border: 1px solid var(--border-strong); + border-radius: var(--radius); + background: + linear-gradient(150deg, rgba(31, 41, 36, 0.96), rgba(15, 17, 17, 0.82)), + radial-gradient( + circle at 50% 18%, + rgba(134, 179, 143, 0.18), + transparent 70% + ); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.05), + 0 16px 34px var(--shadow); } .brand-mark { - width: 42px; - height: 42px; + width: 42px; + height: 42px; } .brand-mark svg { - width: 28px; - height: 28px; + width: 28px; + height: 28px; } .mark-tree { - fill: rgba(134, 179, 143, 0.94); + fill: rgba(134, 179, 143, 0.94); } .mark-root { - fill: none; - stroke: var(--accent); - stroke-linecap: round; - stroke-width: 2.2; + fill: none; + stroke: var(--accent); + stroke-linecap: round; + stroke-width: 2.2; } .site-nav { - gap: 4px; - color: var(--muted); - font-size: 0.92rem; - font-weight: 800; + gap: 4px; + color: var(--muted); + font-size: 0.92rem; + font-weight: 800; } .site-nav a { - padding: 10px 13px; - border-radius: var(--radius); - transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; + padding: 10px 13px; + border-radius: var(--radius); + transition: + color 160ms ease, + background-color 160ms ease, + border-color 160ms ease; } .site-nav a:hover, .site-nav a:focus-visible { - color: var(--text); - background: rgba(255, 255, 255, 0.045); - outline: none; + color: var(--text); + background: rgba(255, 255, 255, 0.045); + outline: none; } .site-nav .nav-cta { - margin-left: 8px; - border: 1px solid rgba(134, 179, 143, 0.28); - color: #f5fff7; - background: linear-gradient(180deg, rgba(79, 138, 107, 0.92), rgba(42, 94, 62, 0.92)); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); + margin-left: 8px; + border: 1px solid rgba(134, 179, 143, 0.28); + color: #f5fff7; + background: linear-gradient( + 180deg, + rgba(79, 138, 107, 0.92), + rgba(42, 94, 62, 0.92) + ); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .site-nav .nav-cta:hover, .site-nav .nav-cta:focus-visible { - background: linear-gradient(180deg, rgba(89, 154, 119, 0.96), rgba(47, 106, 70, 0.96)); + background: linear-gradient( + 180deg, + rgba(89, 154, 119, 0.96), + rgba(47, 106, 70, 0.96) + ); } .nav-toggle { - display: none; - width: 44px; - height: 44px; - padding: 0; - border: 1px solid var(--border); - border-radius: var(--radius); - background: rgba(23, 28, 26, 0.9); - color: var(--text); + display: none; + width: 44px; + height: 44px; + padding: 0; + border: 1px solid var(--border); + border-radius: var(--radius); + background: rgba(23, 28, 26, 0.9); + color: var(--text); } .nav-toggle span:not(.sr-only) { - display: block; - width: 18px; - height: 2px; - margin: 5px auto; - background: currentColor; + display: block; + width: 18px; + height: 2px; + margin: 5px auto; + background: currentColor; } .section { - width: min(100% - 40px, var(--max-width)); - margin: 0 auto; - padding: 104px 0; + width: min(100% - 40px, var(--max-width)); + margin: 0 auto; + padding: 104px 0; } .hero { - display: grid; - grid-template-columns: minmax(0, 0.98fr) minmax(390px, 0.82fr); - gap: clamp(36px, 5vw, 76px); - align-items: center; - min-height: calc(100vh - 92px); - padding-top: 86px; - padding-bottom: 74px; + display: grid; + grid-template-columns: minmax(0, 0.98fr) minmax(390px, 0.82fr); + gap: clamp(36px, 5vw, 76px); + align-items: center; + min-height: calc(100vh - 92px); + padding-top: 86px; + padding-bottom: 74px; } .hero-content { - max-width: 760px; + max-width: 760px; } .eyebrow { - margin-bottom: 14px; - color: var(--soft); - font-size: 0.76rem; - font-weight: 800; - letter-spacing: 0.12em; - text-transform: uppercase; + margin-bottom: 14px; + color: var(--soft); + font-size: 0.76rem; + font-weight: 800; + letter-spacing: 0.12em; + text-transform: uppercase; } h1, h2, h3 { - line-height: 1.08; - letter-spacing: 0; + line-height: 1.08; + letter-spacing: 0; } h1 { - max-width: 760px; - margin-bottom: 22px; - font-size: clamp(2.8rem, 5.2vw, 5.05rem); + max-width: 760px; + margin-bottom: 22px; + font-size: clamp(2.8rem, 5.2vw, 5.05rem); } h2 { - margin-bottom: 18px; - font-size: clamp(2rem, 3.4vw, 3.1rem); + margin-bottom: 18px; + font-size: clamp(2rem, 3.4vw, 3.1rem); } h3 { - margin-bottom: 12px; - font-size: 1.07rem; + margin-bottom: 12px; + font-size: 1.07rem; } .hero-copy, .section-copy, .contact-panel p { - color: var(--muted); - font-size: 1.07rem; + color: var(--muted); + font-size: 1.07rem; } .hero-copy { - max-width: 620px; - margin-bottom: 32px; + max-width: 620px; + margin-bottom: 32px; } .hero-actions { - flex-wrap: wrap; - gap: 14px; + flex-wrap: wrap; + gap: 14px; } .button, .contact-link { - display: inline-flex; - align-items: center; - justify-content: center; - min-height: 48px; - padding: 0 18px; - border-radius: var(--radius); - font-weight: 800; - transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 48px; + padding: 0 18px; + border-radius: var(--radius); + font-weight: 800; + transition: + transform 160ms ease, + border-color 160ms ease, + background-color 160ms ease; } .button:hover, .button:focus-visible, .contact-link:hover, .contact-link:focus-visible { - transform: translateY(-2px); - outline: none; + transform: translateY(-2px); + outline: none; } .button-primary, .contact-link { - border: 1px solid rgba(134, 179, 143, 0.35); - color: #f5fff7; - background: linear-gradient(180deg, rgba(79, 138, 107, 0.95), rgba(42, 94, 62, 0.95)); + border: 1px solid rgba(134, 179, 143, 0.35); + color: #f5fff7; + background: linear-gradient( + 180deg, + rgba(79, 138, 107, 0.95), + rgba(42, 94, 62, 0.95) + ); } .button-secondary { - border: 1px solid var(--border); - color: var(--text); - background: rgba(255, 255, 255, 0.035); + border: 1px solid var(--border); + color: var(--text); + background: rgba(255, 255, 255, 0.035); } .hero-visual { - position: relative; - min-height: 540px; + position: relative; + min-height: 540px; } .mountain-field { - position: absolute; - inset: 34px -18px auto; - height: 240px; - opacity: 0.44; - background: - linear-gradient(145deg, transparent 0 42%, rgba(79, 138, 107, 0.2) 42% 43%, transparent 43%), - linear-gradient(28deg, transparent 0 49%, rgba(134, 179, 143, 0.18) 49% 50%, transparent 50%), - linear-gradient(153deg, transparent 0 58%, rgba(31, 41, 36, 0.88) 58% 68%, transparent 68%); - filter: blur(0.2px); + position: absolute; + inset: 34px -18px auto; + height: 240px; + opacity: 0.44; + background: + linear-gradient( + 145deg, + transparent 0 42%, + rgba(79, 138, 107, 0.2) 42% 43%, + transparent 43% + ), + linear-gradient( + 28deg, + transparent 0 49%, + rgba(134, 179, 143, 0.18) 49% 50%, + transparent 50% + ), + linear-gradient( + 153deg, + transparent 0 58%, + rgba(31, 41, 36, 0.88) 58% 68%, + transparent 68% + ); + filter: blur(0.2px); } .hero-panel { - position: relative; - min-height: 510px; - overflow: hidden; - padding: 26px; - border: 1px solid var(--border); - border-radius: var(--radius); - background: - radial-gradient(circle at 64% 32%, rgba(79, 138, 107, 0.22), transparent 18rem), - linear-gradient(160deg, rgba(31, 41, 36, 0.76), rgba(15, 17, 17, 0.86)), - repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 255, 255, 0.018) 42px 43px); - box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04); - backdrop-filter: blur(18px); + position: relative; + min-height: 510px; + overflow: hidden; + padding: 26px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: + radial-gradient( + circle at 64% 32%, + rgba(79, 138, 107, 0.22), + transparent 18rem + ), + linear-gradient(160deg, rgba(31, 41, 36, 0.76), rgba(15, 17, 17, 0.86)), + repeating-linear-gradient( + 90deg, + transparent 0 42px, + rgba(255, 255, 255, 0.018) 42px 43px + ); + box-shadow: + 0 28px 90px rgba(0, 0, 0, 0.42), + inset 0 1px 0 rgba(255, 255, 255, 0.04); + backdrop-filter: blur(18px); } .hero-panel::before, .hero-panel::after { - position: absolute; - content: ""; + position: absolute; + content: ""; } .hero-panel::before { - inset: auto -26% -36% -26%; - height: 320px; - background: radial-gradient(circle, rgba(79, 138, 107, 0.36), transparent 70%); + inset: auto -26% -36% -26%; + height: 320px; + background: radial-gradient( + circle, + rgba(79, 138, 107, 0.36), + transparent 70% + ); } .hero-panel::after { - right: 34px; - bottom: 118px; - left: 34px; - height: 170px; - opacity: 0.46; - background: - linear-gradient(143deg, transparent 0 41%, rgba(134, 179, 143, 0.16) 41% 42%, transparent 42%), - linear-gradient(24deg, transparent 0 52%, rgba(42, 94, 62, 0.42) 52% 68%, transparent 68%), - linear-gradient(156deg, transparent 0 48%, rgba(31, 41, 36, 0.9) 48% 65%, transparent 65%); + right: 34px; + bottom: 118px; + left: 34px; + height: 170px; + opacity: 0.46; + background: + linear-gradient( + 143deg, + transparent 0 41%, + rgba(134, 179, 143, 0.16) 41% 42%, + transparent 42% + ), + linear-gradient( + 24deg, + transparent 0 52%, + rgba(42, 94, 62, 0.42) 52% 68%, + transparent 68% + ), + linear-gradient( + 156deg, + transparent 0 48%, + rgba(31, 41, 36, 0.9) 48% 65%, + transparent 65% + ); } .panel-top { - position: relative; - z-index: 2; - gap: 16px; + position: relative; + z-index: 2; + gap: 16px; } .panel-mark { - width: 78px; - height: 78px; + width: 78px; + height: 78px; } .panel-mark svg { - width: 52px; - height: 52px; + width: 52px; + height: 52px; } .panel-top p { - margin: 0 0 3px; - font-size: 1.05rem; - font-weight: 800; + margin: 0 0 3px; + font-size: 1.05rem; + font-weight: 800; } .panel-top span { - color: var(--muted); - font-size: 0.9rem; + color: var(--muted); + font-size: 0.9rem; } .circuit-board { - position: absolute; - inset: 142px 42px 132px; - z-index: 2; + position: absolute; + inset: 142px 42px 132px; + z-index: 2; } .circuit-board span { - position: absolute; - display: block; - border-color: rgba(134, 179, 143, 0.28); + position: absolute; + display: block; + border-color: rgba(134, 179, 143, 0.28); } .circuit-board span:nth-child(1) { - top: 10px; - left: 8%; - width: 72%; - height: 1px; - border-top: 1px solid; + top: 10px; + left: 8%; + width: 72%; + height: 1px; + border-top: 1px solid; } .circuit-board span:nth-child(2) { - top: 10px; - left: 8%; - width: 1px; - height: 78%; - border-left: 1px solid; + top: 10px; + left: 8%; + width: 1px; + height: 78%; + border-left: 1px solid; } .circuit-board span:nth-child(3) { - right: 12%; - bottom: 16%; - left: 8%; - height: 1px; - border-top: 1px solid; + right: 12%; + bottom: 16%; + left: 8%; + height: 1px; + border-top: 1px solid; } .circuit-board span:nth-child(4) { - right: 12%; - bottom: 16%; - width: 1px; - height: 48%; - border-left: 1px solid; + right: 12%; + bottom: 16%; + width: 1px; + height: 48%; + border-left: 1px solid; } .circuit-board span:nth-child(5), .circuit-board span:nth-child(6) { - width: 10px; - height: 10px; - border: 1px solid rgba(134, 179, 143, 0.5); - border-radius: 50%; - background: var(--surface-light); - box-shadow: 0 0 22px rgba(134, 179, 143, 0.42); + width: 10px; + height: 10px; + border: 1px solid rgba(134, 179, 143, 0.5); + border-radius: 50%; + background: var(--surface-light); + box-shadow: 0 0 22px rgba(134, 179, 143, 0.42); } .circuit-board span:nth-child(5) { - top: 5px; - left: calc(8% - 5px); + top: 5px; + left: calc(8% - 5px); } .circuit-board span:nth-child(6) { - right: calc(12% - 5px); - bottom: calc(16% - 5px); + right: calc(12% - 5px); + bottom: calc(16% - 5px); } .panel-metrics { - position: absolute; - right: 24px; - bottom: 24px; - left: 24px; - z-index: 3; - gap: 10px; + position: absolute; + right: 24px; + bottom: 24px; + left: 24px; + z-index: 3; + gap: 10px; } .panel-metrics div { - flex: 1; - min-height: 86px; - padding: 14px; - border: 1px solid var(--border); - border-radius: var(--radius); - background: rgba(15, 17, 17, 0.62); - backdrop-filter: blur(12px); + flex: 1; + min-height: 86px; + padding: 14px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: rgba(15, 17, 17, 0.62); + backdrop-filter: blur(12px); } .panel-metrics span { - display: block; - margin-bottom: 10px; - color: var(--soft); - font-size: 0.74rem; - font-weight: 800; + display: block; + margin-bottom: 10px; + color: var(--soft); + font-size: 0.74rem; + font-weight: 800; } .panel-metrics strong { - display: block; - font-size: 0.92rem; + display: block; + font-size: 0.92rem; } .section-heading { - max-width: 780px; - margin-bottom: 34px; + max-width: 780px; + margin-bottom: 34px; } .section-heading.centered { - max-width: 760px; - margin-right: auto; - margin-left: auto; - text-align: center; + max-width: 760px; + margin-right: auto; + margin-left: auto; + text-align: center; } .about-section, .brand-section { - border-top: 1px solid var(--border); + border-top: 1px solid var(--border); } .about-grid { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr); - gap: 28px; - align-items: start; + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr); + gap: 28px; + align-items: start; } .section-copy { - max-width: 760px; + max-width: 760px; } .section-copy p:last-child, @@ -534,1742 +661,1909 @@ h3 { .service-card p, .principle-list p, .site-footer p { - margin-bottom: 0; + margin-bottom: 0; } .studio-panel, .service-card, .principle-list article, .contact-panel { - border: 1px solid var(--border); - border-radius: var(--radius); - background: - linear-gradient(180deg, rgba(31, 41, 36, 0.72), rgba(23, 28, 26, 0.78)), - rgba(23, 28, 26, 0.8); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); + border: 1px solid var(--border); + border-radius: var(--radius); + background: + linear-gradient(180deg, rgba(31, 41, 36, 0.72), rgba(23, 28, 26, 0.78)), + rgba(23, 28, 26, 0.8); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); } .studio-panel { - padding: 22px; + padding: 22px; } .studio-panel dl { - margin-bottom: 0; + margin-bottom: 0; } .studio-panel div { - display: grid; - grid-template-columns: 92px minmax(0, 1fr); - gap: 18px; - padding: 15px 0; - border-bottom: 1px solid var(--border); + display: grid; + grid-template-columns: 92px minmax(0, 1fr); + gap: 18px; + padding: 15px 0; + border-bottom: 1px solid var(--border); } .studio-panel div:first-child { - padding-top: 0; + padding-top: 0; } .studio-panel div:last-child { - padding-bottom: 0; - border-bottom: 0; + padding-bottom: 0; + border-bottom: 0; } .studio-panel dt { - color: var(--soft); - font-size: 0.78rem; - font-weight: 800; - text-transform: uppercase; + color: var(--soft); + font-size: 0.78rem; + font-weight: 800; + text-transform: uppercase; } .studio-panel dd { - margin: 0; - color: var(--text); - font-weight: 700; + margin: 0; + color: var(--text); + font-weight: 700; } .card-grid, .principle-list { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 16px; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 16px; } .service-card, .principle-list article { - min-height: 270px; - padding: 24px; - transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; + min-height: 270px; + padding: 24px; + transition: + transform 180ms ease, + border-color 180ms ease, + background-color 180ms ease, + box-shadow 180ms ease; } .service-card:hover, .principle-list article:hover { - transform: translateY(-5px); - border-color: rgba(134, 179, 143, 0.28); - background: - linear-gradient(180deg, rgba(31, 41, 36, 0.94), rgba(23, 28, 26, 0.86)), - rgba(23, 28, 26, 0.88); - box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2); + transform: translateY(-5px); + border-color: rgba(134, 179, 143, 0.28); + background: + linear-gradient(180deg, rgba(31, 41, 36, 0.94), rgba(23, 28, 26, 0.86)), + rgba(23, 28, 26, 0.88); + box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2); } .card-icon, .line-icon { - display: block; - width: 38px; - height: 38px; - margin-bottom: 24px; - border: 1px solid rgba(134, 179, 143, 0.28); - border-radius: var(--radius); - background-color: rgba(42, 94, 62, 0.2); - background-repeat: no-repeat; - background-position: center; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); + display: block; + width: 38px; + height: 38px; + margin-bottom: 24px; + border: 1px solid rgba(134, 179, 143, 0.28); + border-radius: var(--radius); + background-color: rgba(42, 94, 62, 0.2); + background-repeat: no-repeat; + background-position: center; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .software-icon, .foundation-icon { - background-image: - linear-gradient(90deg, transparent 10px, var(--soft) 10px 12px, transparent 12px), - linear-gradient(transparent 10px, var(--accent) 10px 12px, transparent 12px); + background-image: + linear-gradient( + 90deg, + transparent 10px, + var(--soft) 10px 12px, + transparent 12px + ), + linear-gradient( + transparent 10px, + var(--accent) 10px 12px, + transparent 12px + ); } .web-icon, .experience-icon { - background-image: - linear-gradient(var(--soft), var(--soft)), - linear-gradient(var(--accent), var(--accent)), - linear-gradient(var(--accent), var(--accent)); - background-size: 20px 2px, 14px 2px, 8px 2px; - background-position: 9px 12px, 9px 19px, 9px 26px; + background-image: + linear-gradient(var(--soft), var(--soft)), + linear-gradient(var(--accent), var(--accent)), + linear-gradient(var(--accent), var(--accent)); + background-size: + 20px 2px, + 14px 2px, + 8px 2px; + background-position: + 9px 12px, + 9px 19px, + 9px 26px; } .mobile-icon, .maintain-icon { - background-image: - linear-gradient(var(--soft), var(--soft)), - linear-gradient(var(--accent), var(--accent)); - background-size: 14px 2px, 2px 18px; - background-position: 11px 12px, 18px 13px; + background-image: + linear-gradient(var(--soft), var(--soft)), + linear-gradient(var(--accent), var(--accent)); + background-size: + 14px 2px, + 2px 18px; + background-position: + 11px 12px, + 18px 13px; } .backend-icon, .engineering-icon { - background-image: - radial-gradient(circle, var(--soft) 0 3px, transparent 4px), - radial-gradient(circle, var(--accent) 0 3px, transparent 4px), - linear-gradient(90deg, var(--accent), var(--accent)); - background-size: 100% 100%, 100% 100%, 18px 1px; - background-position: -8px -7px, 8px 9px, 11px 19px; + background-image: + radial-gradient(circle, var(--soft) 0 3px, transparent 4px), + radial-gradient(circle, var(--accent) 0 3px, transparent 4px), + linear-gradient(90deg, var(--accent), var(--accent)); + background-size: + 100% 100%, + 100% 100%, + 18px 1px; + background-position: + -8px -7px, + 8px 9px, + 11px 19px; } .service-card p, .principle-list p { - color: var(--muted); + color: var(--muted); } .brand-section { - padding-top: 92px; + padding-top: 92px; } .contact-section { - padding-top: 74px; + padding-top: 74px; } .contact-panel { - position: relative; - overflow: hidden; - padding: clamp(30px, 5vw, 58px); - background: - radial-gradient(circle at 88% 24%, rgba(79, 138, 107, 0.24), transparent 24rem), - linear-gradient(135deg, rgba(31, 41, 36, 0.94), rgba(15, 17, 17, 0.9)); - box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04); + position: relative; + overflow: hidden; + padding: clamp(30px, 5vw, 58px); + background: + radial-gradient( + circle at 88% 24%, + rgba(79, 138, 107, 0.24), + transparent 24rem + ), + linear-gradient(135deg, rgba(31, 41, 36, 0.94), rgba(15, 17, 17, 0.9)); + box-shadow: + 0 24px 70px rgba(0, 0, 0, 0.22), + inset 0 1px 0 rgba(255, 255, 255, 0.04); } .contact-panel::after { - position: absolute; - right: -100px; - bottom: -140px; - width: 340px; - height: 340px; - border: 1px solid rgba(134, 179, 143, 0.14); - border-radius: 50%; - content: ""; + position: absolute; + right: -100px; + bottom: -140px; + width: 340px; + height: 340px; + border: 1px solid rgba(134, 179, 143, 0.14); + border-radius: 50%; + content: ""; } .contact-panel h2, .contact-panel p, .contact-panel .eyebrow, .contact-link { - position: relative; - z-index: 1; + position: relative; + z-index: 1; } .contact-panel h2 { - max-width: 850px; + max-width: 850px; } .contact-panel p { - max-width: 700px; + max-width: 700px; } .contact-link { - margin-top: 22px; + margin-top: 22px; } .contact-note { - margin-top: 24px; - font-size: 0.96rem; + margin-top: 24px; + font-size: 0.96rem; } .site-footer { - justify-content: space-between; - gap: 22px; - width: min(100% - 40px, var(--max-width)); - margin: 0 auto; - padding: 30px 0 42px; - border-top: 1px solid var(--border); - color: var(--muted); - font-size: 0.9rem; + justify-content: space-between; + gap: 22px; + width: min(100% - 40px, var(--max-width)); + margin: 0 auto; + padding: 30px 0 42px; + border-top: 1px solid var(--border); + color: var(--muted); + font-size: 0.9rem; } .site-footer div { - flex-direction: column; - align-items: flex-start; - gap: 2px; + flex-direction: column; + align-items: flex-start; + gap: 2px; } .site-footer strong { - color: var(--text); + color: var(--text); } .site-footer nav { - gap: 14px; + gap: 14px; } .site-footer a:hover, .site-footer a:focus-visible { - color: var(--text); - outline: none; + color: var(--text); + outline: none; } @media (max-width: 1040px) { - .hero, - .about-grid { - grid-template-columns: 1fr; - } + .hero, + .about-grid { + grid-template-columns: 1fr; + } - .hero { - gap: 40px; - min-height: auto; - } + .hero { + gap: 40px; + min-height: auto; + } - .hero-visual { - min-height: 460px; - } + .hero-visual { + min-height: 460px; + } - .hero-panel { - min-height: 460px; - } + .hero-panel { + min-height: 460px; + } - .card-grid, - .principle-list { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } + .card-grid, + .principle-list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } @media (max-width: 720px) { - .site-header { - top: 10px; - width: min(100% - 24px, var(--max-width)); - } + .site-header { + top: 10px; + width: min(100% - 24px, var(--max-width)); + } - .nav-toggle { - display: block; - } + .nav-toggle { + display: block; + } - .site-nav { - position: absolute; - top: calc(100% + 8px); - right: 0; - left: 0; - display: none; - flex-direction: column; - align-items: stretch; - padding: 12px; - border: 1px solid var(--border); - border-radius: var(--radius); - background: rgba(15, 17, 17, 0.96); - box-shadow: 0 20px 42px var(--shadow); - } + .site-nav { + position: absolute; + top: calc(100% + 8px); + right: 0; + left: 0; + display: none; + flex-direction: column; + align-items: stretch; + padding: 12px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: rgba(15, 17, 17, 0.96); + box-shadow: 0 20px 42px var(--shadow); + } - .site-nav.is-open { - display: flex; - } + .site-nav.is-open { + display: flex; + } - .site-nav a { - width: 100%; - } + .site-nav a { + width: 100%; + } - .site-nav .nav-cta { - margin-left: 0; - text-align: center; - } + .site-nav .nav-cta { + margin-left: 0; + text-align: center; + } - .section { - width: min(100% - 24px, var(--max-width)); - padding: 68px 0; - } + .section { + width: min(100% - 24px, var(--max-width)); + padding: 68px 0; + } - .hero { - padding-top: 54px; - } + .hero { + padding-top: 54px; + } - h1 { - font-size: clamp(2.35rem, 11vw, 3.55rem); - } + h1 { + font-size: clamp(2.35rem, 11vw, 3.55rem); + } - h2 { - font-size: clamp(1.9rem, 8vw, 2.55rem); - } + h2 { + font-size: clamp(1.9rem, 8vw, 2.55rem); + } - .hero-copy, - .section-copy, - .contact-panel p { - font-size: 1rem; - } + .hero-copy, + .section-copy, + .contact-panel p { + font-size: 1rem; + } - .hero-visual, - .hero-panel { - min-height: 390px; - } + .hero-visual, + .hero-panel { + min-height: 390px; + } - .hero-panel { - padding: 18px; - } + .hero-panel { + padding: 18px; + } - .panel-mark { - width: 64px; - height: 64px; - } + .panel-mark { + width: 64px; + height: 64px; + } - .panel-mark svg { - width: 44px; - height: 44px; - } + .panel-mark svg { + width: 44px; + height: 44px; + } - .circuit-board { - inset: 120px 24px 122px; - } + .circuit-board { + inset: 120px 24px 122px; + } - .panel-metrics { - right: 16px; - bottom: 16px; - left: 16px; - display: grid; - grid-template-columns: 1fr; - } + .panel-metrics { + right: 16px; + bottom: 16px; + left: 16px; + display: grid; + grid-template-columns: 1fr; + } - .panel-metrics div { - min-height: auto; - padding: 11px 12px; - } + .panel-metrics div { + min-height: auto; + padding: 11px 12px; + } - .panel-metrics span { - margin-bottom: 4px; - } + .panel-metrics span { + margin-bottom: 4px; + } - .card-grid, - .principle-list, - .site-footer { - grid-template-columns: 1fr; - } + .card-grid, + .principle-list, + .site-footer { + grid-template-columns: 1fr; + } - .service-card, - .principle-list article { - min-height: auto; - } + .service-card, + .principle-list article { + min-height: auto; + } - .studio-panel div { - grid-template-columns: 1fr; - gap: 3px; - } + .studio-panel div { + grid-template-columns: 1fr; + gap: 3px; + } - .site-footer { - display: grid; - justify-items: start; - width: min(100% - 24px, var(--max-width)); - } + .site-footer { + display: grid; + justify-items: start; + width: min(100% - 24px, var(--max-width)); + } } /* Prototype direction: cinematic forest landing page. */ body { - background: var(--bg); + background: var(--bg); } body::before { - z-index: -3; - background: - linear-gradient(180deg, rgba(15, 17, 17, 0.34), #0f1111 86%), - linear-gradient(90deg, rgba(15, 17, 17, 0.96), rgba(15, 17, 17, 0.56) 54%, rgba(15, 17, 17, 0.88)), - url("assets/images/backdrop2.jpg") center top / cover no-repeat; + z-index: -3; + background: + linear-gradient(180deg, rgba(15, 17, 17, 0.34), #0f1111 86%), + linear-gradient( + 90deg, + rgba(15, 17, 17, 0.96), + rgba(15, 17, 17, 0.56) 54%, + rgba(15, 17, 17, 0.88) + ), + url("assets/images/backdrop.jpg") center top / cover no-repeat; } body::after { - z-index: -2; - height: auto; - opacity: 1; - background: - radial-gradient(circle at 16% 20%, rgba(134, 179, 143, 0.09), transparent 28rem), - radial-gradient(circle at 72% 34%, rgba(42, 94, 62, 0.18), transparent 34rem), - linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px); - background-size: auto, auto, 92px 92px, 92px 92px; + z-index: -2; + height: auto; + opacity: 1; + background: + radial-gradient( + circle at 16% 20%, + rgba(134, 179, 143, 0.09), + transparent 28rem + ), + radial-gradient( + circle at 72% 34%, + rgba(42, 94, 62, 0.18), + transparent 34rem + ), + linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px); + background-size: + auto, + auto, + 92px 92px, + 92px 92px; } .site-header { - position: fixed; - top: 28px; - right: 5vw; - left: 5vw; - width: min(90vw, var(--max-width)); - min-height: auto; - padding: 0; - border: 0; - background: transparent; - box-shadow: none; - backdrop-filter: none; + position: fixed; + top: 28px; + right: 5vw; + left: 5vw; + width: min(90vw, var(--max-width)); + min-height: auto; + padding: 0; + border: 0; + background: transparent; + box-shadow: none; + backdrop-filter: none; } .site-header.is-scrolled { - border-color: transparent; - background: transparent; + border-color: transparent; + background: transparent; } .brand { - gap: 14px; + gap: 14px; } .brand-mark { - width: 56px; - height: 56px; - border: 0; - background: transparent; - box-shadow: none; + width: 56px; + height: 56px; + border: 0; + background: transparent; + box-shadow: none; } .brand-mark svg { - width: 54px; - height: 54px; + width: 54px; + height: 54px; } .mark-branch { - fill: none; - stroke: var(--accent); - stroke-linejoin: round; - stroke-width: 1.8; + fill: none; + stroke: var(--accent); + stroke-linejoin: round; + stroke-width: 1.8; } .mark-trunk, .mark-root { - fill: none; - stroke: var(--soft); - stroke-linecap: round; - stroke-width: 1.7; + fill: none; + stroke: var(--soft); + stroke-linecap: round; + stroke-width: 1.7; } .brand-text { - display: grid; - gap: 2px; - text-transform: uppercase; + display: grid; + gap: 2px; + text-transform: uppercase; } .brand-text strong { - color: var(--text); - font-size: clamp(1.25rem, 2.2vw, 2rem); - font-weight: 800; - line-height: 1; - letter-spacing: 0.16em; - text-shadow: 0 0 12px rgba(230, 232, 230, 0.22); + color: var(--text); + font-size: clamp(1.25rem, 2.2vw, 2rem); + font-weight: 800; + line-height: 1; + letter-spacing: 0.16em; + text-shadow: 0 0 12px rgba(230, 232, 230, 0.22); } .brand-text span { - color: var(--soft); - font-size: clamp(0.74rem, 1.2vw, 1.03rem); - font-weight: 800; - line-height: 1; - letter-spacing: 0.42em; + color: var(--soft); + font-size: clamp(0.74rem, 1.2vw, 1.03rem); + font-weight: 800; + line-height: 1; + letter-spacing: 0.42em; } .site-nav { - gap: clamp(18px, 3vw, 44px); - color: var(--text); - font-size: 0.86rem; - font-weight: 800; - letter-spacing: 0.08em; - text-transform: uppercase; + gap: clamp(18px, 3vw, 44px); + color: var(--text); + font-size: 0.86rem; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; } .site-nav a { - padding: 10px 0; - text-shadow: 0 0 12px rgba(230, 232, 230, 0.18); + padding: 10px 0; + text-shadow: 0 0 12px rgba(230, 232, 230, 0.18); } .site-nav a:hover, .site-nav a:focus-visible { - color: var(--soft); - background: transparent; + color: var(--soft); + background: transparent; } .site-nav .nav-cta { - padding: 10px 18px; - border: 1px solid rgba(134, 179, 143, 0.32); - border-radius: var(--radius); - color: var(--soft); - background: rgba(15, 17, 17, 0.28); - box-shadow: inset 0 0 18px rgba(134, 179, 143, 0.06); + padding: 10px 18px; + border: 1px solid rgba(134, 179, 143, 0.32); + border-radius: var(--radius); + color: var(--soft); + background: rgba(15, 17, 17, 0.28); + box-shadow: inset 0 0 18px rgba(134, 179, 143, 0.06); } .site-nav .nav-cta:hover, .site-nav .nav-cta:focus-visible { - border-color: rgba(134, 179, 143, 0.5); - background: rgba(42, 94, 62, 0.18); + border-color: rgba(134, 179, 143, 0.5); + background: rgba(42, 94, 62, 0.18); } .hero { - position: relative; - display: block; - width: auto; - max-width: none; - min-height: 100vh; - overflow: hidden; - margin: 0; - padding: 160px max(5vw, 24px) 44px; - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 0 0 28px 28px; - background: - linear-gradient(180deg, rgba(15, 17, 17, 0.06), rgba(15, 17, 17, 0.38) 48%, rgba(15, 17, 17, 0.96) 100%), - linear-gradient(90deg, rgba(15, 17, 17, 0.82), rgba(15, 17, 17, 0.36) 58%, rgba(15, 17, 17, 0.8)), - url("assets/images/backdrop2.jpg") center top / cover no-repeat; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 28px 90px rgba(0, 0, 0, 0.55); + position: relative; + display: block; + width: auto; + max-width: none; + min-height: 100vh; + overflow: hidden; + margin: 0; + padding: 160px max(5vw, 24px) 44px; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 0 0 28px 28px; + background: + linear-gradient( + 180deg, + rgba(15, 17, 17, 0.06), + rgba(15, 17, 17, 0.38) 48%, + rgba(15, 17, 17, 0.96) 100% + ), + linear-gradient( + 90deg, + rgba(15, 17, 17, 0.82), + rgba(15, 17, 17, 0.36) 58%, + rgba(15, 17, 17, 0.8) + ), + url("assets/images/backdrop.jpg") center top / cover no-repeat; + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.03), + 0 28px 90px rgba(0, 0, 0, 0.55); } .hero::before, .hero::after { - position: absolute; - pointer-events: none; - content: ""; + position: absolute; + pointer-events: none; + content: ""; } .hero::before { - inset: 0; - background: - radial-gradient(circle at 23% 25%, rgba(230, 232, 230, 0.08), transparent 16rem), - radial-gradient(circle at 72% 54%, rgba(42, 94, 62, 0.24), transparent 28rem); - mix-blend-mode: screen; + inset: 0; + background: + radial-gradient( + circle at 23% 25%, + rgba(230, 232, 230, 0.08), + transparent 16rem + ), + radial-gradient( + circle at 72% 54%, + rgba(42, 94, 62, 0.24), + transparent 28rem + ); + mix-blend-mode: screen; } .hero::after { - inset: 0; - border-radius: inherit; - box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.78); + inset: 0; + border-radius: inherit; + box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.78); } .hero-content, .products-preview { - position: relative; - z-index: 2; - width: min(100%, var(--max-width)); - margin: 0 auto; + position: relative; + z-index: 2; + width: min(100%, var(--max-width)); + margin: 0 auto; } .hero-content { - max-width: var(--max-width); + max-width: var(--max-width); } h1 { - max-width: 620px; - margin-bottom: 24px; - font-size: clamp(2.4rem, 4.3vw, 4.1rem); - font-weight: 500; - line-height: 1.18; - letter-spacing: 0.03em; - text-transform: uppercase; - text-shadow: 0 0 18px rgba(230, 232, 230, 0.22), 0 2px 18px rgba(0, 0, 0, 0.8); + max-width: 620px; + margin-bottom: 24px; + font-size: clamp(2.4rem, 4.3vw, 4.1rem); + font-weight: 500; + line-height: 1.18; + letter-spacing: 0.03em; + text-transform: uppercase; + text-shadow: + 0 0 18px rgba(230, 232, 230, 0.22), + 0 2px 18px rgba(0, 0, 0, 0.8); } h1 span, h1 em { - display: block; + display: block; } h1 em { - color: var(--accent); - font-style: normal; - font-weight: 800; - letter-spacing: 0.08em; + color: var(--accent); + font-style: normal; + font-weight: 800; + letter-spacing: 0.08em; } .hero-copy { - max-width: 510px; - margin-bottom: 34px; - color: rgba(230, 232, 230, 0.78); - font-size: clamp(1.02rem, 1.8vw, 1.22rem); - font-weight: 500; - text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85); + max-width: 510px; + margin-bottom: 34px; + color: rgba(230, 232, 230, 0.78); + font-size: clamp(1.02rem, 1.8vw, 1.22rem); + font-weight: 500; + text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85); } .button, .contact-link { - min-height: 50px; - padding: 0 22px; - letter-spacing: 0.04em; - text-transform: uppercase; + min-height: 50px; + padding: 0 22px; + letter-spacing: 0.04em; + text-transform: uppercase; } .button-primary, .contact-link { - border: 1px solid rgba(134, 179, 143, 0.42); - background: linear-gradient(180deg, rgba(79, 138, 107, 0.92), rgba(42, 94, 62, 0.88)); - box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.1); + border: 1px solid rgba(134, 179, 143, 0.42); + background: linear-gradient( + 180deg, + rgba(79, 138, 107, 0.92), + rgba(42, 94, 62, 0.88) + ); + box-shadow: + 0 14px 30px rgba(0, 0, 0, 0.34), + inset 0 1px 0 rgba(255, 255, 255, 0.1); } .button span { - margin-left: 12px; - font-size: 1.45rem; - line-height: 1; + margin-left: 12px; + font-size: 1.45rem; + line-height: 1; } .products-preview { - margin-top: clamp(72px, 12vh, 132px); + margin-top: clamp(72px, 12vh, 132px); } .section-kicker { - margin-bottom: 24px; - color: var(--soft); - font-size: 0.9rem; - font-weight: 800; - letter-spacing: 0.12em; - text-align: center; - text-transform: uppercase; + margin-bottom: 24px; + color: var(--soft); + font-size: 0.9rem; + font-weight: 800; + letter-spacing: 0.12em; + text-align: center; + text-transform: uppercase; } .product-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 24px; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 24px; } .product-card { - display: grid; - grid-template-columns: 82px minmax(0, 1fr); - gap: 20px; - min-height: 198px; - padding: 34px 32px; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: var(--radius); - background: - radial-gradient(circle at 20% 10%, rgba(134, 179, 143, 0.08), transparent 12rem), - rgba(15, 17, 17, 0.56); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 44px rgba(0, 0, 0, 0.28); - backdrop-filter: blur(12px); - transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease; + display: grid; + grid-template-columns: 82px minmax(0, 1fr); + gap: 20px; + min-height: 198px; + padding: 34px 32px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius); + background: + radial-gradient( + circle at 20% 10%, + rgba(134, 179, 143, 0.08), + transparent 12rem + ), + rgba(15, 17, 17, 0.56); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.03), + 0 20px 44px rgba(0, 0, 0, 0.28); + backdrop-filter: blur(12px); + transition: + transform 180ms ease, + border-color 180ms ease, + background-color 180ms ease; } .product-card:hover { - transform: translateY(-5px); - border-color: rgba(134, 179, 143, 0.3); - background-color: rgba(23, 28, 26, 0.7); + transform: translateY(-5px); + border-color: rgba(134, 179, 143, 0.3); + background-color: rgba(23, 28, 26, 0.7); } .product-card h2 { - margin-bottom: 14px; - color: var(--text); - font-size: 1.1rem; - font-weight: 800; - letter-spacing: 0.04em; - text-transform: uppercase; + margin-bottom: 14px; + color: var(--text); + font-size: 1.1rem; + font-weight: 800; + letter-spacing: 0.04em; + text-transform: uppercase; } .product-card p { - margin-bottom: 24px; - color: rgba(230, 232, 230, 0.7); - font-weight: 600; + margin-bottom: 24px; + color: rgba(230, 232, 230, 0.7); + font-weight: 600; } .product-card a { - color: var(--soft); - font-size: 0.84rem; - font-weight: 800; - letter-spacing: 0.06em; - text-transform: uppercase; + color: var(--soft); + font-size: 0.84rem; + font-weight: 800; + letter-spacing: 0.06em; + text-transform: uppercase; } .product-icon { - position: relative; - display: block; - width: 58px; - height: 68px; - opacity: 0.9; - background-repeat: no-repeat; - background-position: center; + position: relative; + display: block; + width: 58px; + height: 68px; + opacity: 0.9; + background-repeat: no-repeat; + background-position: center; } .phone-icon { - border: 3px solid var(--accent); - border-radius: 8px; - box-shadow: inset 0 0 0 1px rgba(134, 179, 143, 0.18), 0 0 22px rgba(79, 138, 107, 0.18); + border: 3px solid var(--accent); + border-radius: 8px; + box-shadow: + inset 0 0 0 1px rgba(134, 179, 143, 0.18), + 0 0 22px rgba(79, 138, 107, 0.18); } .phone-icon::before { - position: absolute; - top: 8px; - left: 50%; - width: 22px; - height: 3px; - border-radius: 999px; - background: var(--accent); - content: ""; - transform: translateX(-50%); + position: absolute; + top: 8px; + left: 50%; + width: 22px; + height: 3px; + border-radius: 999px; + background: var(--accent); + content: ""; + transform: translateX(-50%); } .server-icon { - height: 58px; - background: - linear-gradient(var(--accent), var(--accent)) 16px 14px / 7px 3px no-repeat, - linear-gradient(var(--accent), var(--accent)) 28px 14px / 13px 3px no-repeat, - linear-gradient(var(--accent), var(--accent)) 16px 30px / 7px 3px no-repeat, - linear-gradient(var(--accent), var(--accent)) 28px 30px / 13px 3px no-repeat, - linear-gradient(var(--accent), var(--accent)) 16px 46px / 7px 3px no-repeat, - linear-gradient(var(--accent), var(--accent)) 28px 46px / 13px 3px no-repeat; + height: 58px; + background: + linear-gradient(var(--accent), var(--accent)) 16px 14px / 7px 3px + no-repeat, + linear-gradient(var(--accent), var(--accent)) 28px 14px / 13px 3px + no-repeat, + linear-gradient(var(--accent), var(--accent)) 16px 30px / 7px 3px + no-repeat, + linear-gradient(var(--accent), var(--accent)) 28px 30px / 13px 3px + no-repeat, + linear-gradient(var(--accent), var(--accent)) 16px 46px / 7px 3px + no-repeat, + linear-gradient(var(--accent), var(--accent)) 28px 46px / 13px 3px + no-repeat; } .server-icon::before { - position: absolute; - top: 4px; - left: 0; - width: 58px; - height: 13px; - border: 3px solid var(--accent); - border-radius: 5px; - box-shadow: 0 18px 0 0 rgba(79, 138, 107, 0.8), 0 36px 0 0 rgba(79, 138, 107, 0.8); - content: ""; + position: absolute; + top: 4px; + left: 0; + width: 58px; + height: 13px; + border: 3px solid var(--accent); + border-radius: 5px; + box-shadow: + 0 18px 0 0 rgba(79, 138, 107, 0.8), + 0 36px 0 0 rgba(79, 138, 107, 0.8); + content: ""; } .code-icon { - width: 74px; - height: 60px; - background: linear-gradient(105deg, transparent 41%, var(--accent) 42% 48%, transparent 49%); + width: 74px; + height: 60px; + background: linear-gradient( + 105deg, + transparent 41%, + var(--accent) 42% 48%, + transparent 49% + ); } .code-icon::before, .code-icon::after { - position: absolute; - top: 11px; - width: 24px; - height: 24px; - border-color: var(--accent); - border-style: solid; - content: ""; - transform: rotate(45deg); + position: absolute; + top: 11px; + width: 24px; + height: 24px; + border-color: var(--accent); + border-style: solid; + content: ""; + transform: rotate(45deg); } .code-icon::before { - left: 4px; - border-width: 0 0 4px 4px; + left: 4px; + border-width: 0 0 4px 4px; } .code-icon::after { - right: 4px; - border-width: 4px 4px 0 0; + right: 4px; + border-width: 4px 4px 0 0; } @media (max-width: 1040px) { - .product-grid { - grid-template-columns: 1fr; - } + .product-grid { + grid-template-columns: 1fr; + } } @media (max-width: 760px) { - body::before { - background: - linear-gradient(180deg, rgba(15, 17, 17, 0.42), #0f1111 82%), - linear-gradient(90deg, rgba(15, 17, 17, 0.92), rgba(15, 17, 17, 0.72)), - url("assets/images/backdrop2.jpg") center top / cover no-repeat; - } + body::before { + background: + linear-gradient(180deg, rgba(15, 17, 17, 0.42), #0f1111 82%), + linear-gradient( + 90deg, + rgba(15, 17, 17, 0.92), + rgba(15, 17, 17, 0.72) + ), + url("assets/images/backdrop.jpg") center top / cover no-repeat; + } - .site-header { - top: 16px; - right: 16px; - left: 16px; - width: auto; - } + .site-header { + top: 16px; + right: 16px; + left: 16px; + width: auto; + } - .brand-mark { - width: 46px; - height: 46px; - } + .brand-mark { + width: 46px; + height: 46px; + } - .brand-mark svg { - width: 44px; - height: 44px; - } + .brand-mark svg { + width: 44px; + height: 44px; + } - .brand-text strong { - font-size: 1.1rem; - } + .brand-text strong { + font-size: 1.1rem; + } - .brand-text span { - font-size: 0.66rem; - } + .brand-text span { + font-size: 0.66rem; + } - .site-nav { - background: rgba(15, 17, 17, 0.94); - backdrop-filter: blur(16px); - } + .site-nav { + background: rgba(15, 17, 17, 0.94); + backdrop-filter: blur(16px); + } - .site-nav a, - .site-nav .nav-cta { - width: 100%; - margin-left: 0; - padding: 11px 12px; - text-align: left; - } + .site-nav a, + .site-nav .nav-cta { + width: 100%; + margin-left: 0; + padding: 11px 12px; + text-align: left; + } - .hero { - padding: 132px 20px 36px; - border-radius: 0 0 20px 20px; - } + .hero { + padding: 132px 20px 36px; + border-radius: 0 0 20px 20px; + } - h1 { - font-size: clamp(2.2rem, 10vw, 3.4rem); - } + h1 { + font-size: clamp(2.2rem, 10vw, 3.4rem); + } - .products-preview { - margin-top: 58px; - } + .products-preview { + margin-top: 58px; + } - .product-card { - grid-template-columns: 58px minmax(0, 1fr); - padding: 24px 20px; - } + .product-card { + grid-template-columns: 58px minmax(0, 1fr); + padding: 24px 20px; + } } /* Keep the supplied forest image scoped to the hero only. */ body { - background: - radial-gradient(circle at 80% 12%, rgba(79, 138, 107, 0.12), transparent 30rem), - linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px), - var(--bg); - background-size: auto, 92px 92px, 92px 92px, auto; + background: + radial-gradient( + circle at 80% 12%, + rgba(79, 138, 107, 0.12), + transparent 30rem + ), + linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px), + var(--bg); + background-size: + auto, + 92px 92px, + 92px 92px, + auto; } body::before { - background: none; + background: none; } body::after { - background: - radial-gradient(circle at 18% 22%, rgba(42, 94, 62, 0.14), transparent 26rem), - linear-gradient(180deg, transparent, rgba(15, 17, 17, 0.8)); + background: + radial-gradient( + circle at 18% 22%, + rgba(42, 94, 62, 0.14), + transparent 26rem + ), + linear-gradient(180deg, transparent, rgba(15, 17, 17, 0.8)); } .hero { - min-height: 100vh; - padding-bottom: clamp(96px, 16vh, 170px); + min-height: 100vh; + padding-bottom: clamp(96px, 16vh, 170px); } .hero-content { - padding-top: clamp(24px, 5vh, 72px); + padding-top: clamp(24px, 5vh, 72px); } .hero-content, .products-preview { - width: min(100%, var(--max-width)); + width: min(100%, var(--max-width)); } .products-preview, .product-grid, .product-card, .product-icon { - display: none; + display: none; } .about-section { - margin-top: 0; + margin-top: 0; } @media (max-width: 760px) { - body::before { - background: none; - } + body::before { + background: none; + } - .hero { - min-height: 100vh; - padding-bottom: 84px; - } + .hero { + min-height: 100vh; + padding-bottom: 84px; + } } /* Add quiet visual variety below the hero. */ main { - position: relative; - overflow: hidden; + position: relative; + overflow: hidden; } main::before { - position: absolute; - top: 100vh; - right: 0; - left: 0; - z-index: -1; - height: calc(100% - 100vh); - pointer-events: none; - content: ""; - background: - linear-gradient(90deg, transparent 0 18%, rgba(134, 179, 143, 0.08) 18% 18.08%, transparent 18.08% 100%), - linear-gradient(90deg, transparent 0 66%, rgba(79, 138, 107, 0.07) 66% 66.08%, transparent 66.08% 100%), - linear-gradient(180deg, transparent 0 22%, rgba(134, 179, 143, 0.06) 22% 22.08%, transparent 22.08% 100%), - radial-gradient(circle at 84% 24%, rgba(79, 138, 107, 0.16), transparent 24rem); + position: absolute; + top: 100vh; + right: 0; + left: 0; + z-index: -1; + height: calc(100% - 100vh); + pointer-events: none; + content: ""; + background: + linear-gradient( + 90deg, + transparent 0 18%, + rgba(134, 179, 143, 0.08) 18% 18.08%, + transparent 18.08% 100% + ), + linear-gradient( + 90deg, + transparent 0 66%, + rgba(79, 138, 107, 0.07) 66% 66.08%, + transparent 66.08% 100% + ), + linear-gradient( + 180deg, + transparent 0 22%, + rgba(134, 179, 143, 0.06) 22% 22.08%, + transparent 22.08% 100% + ), + radial-gradient( + circle at 84% 24%, + rgba(79, 138, 107, 0.16), + transparent 24rem + ); } .about-section { - position: relative; + position: relative; } .about-section::after { - position: absolute; - right: max(20px, calc((100vw - var(--max-width)) / 2)); - bottom: 42px; - width: 180px; - height: 180px; - border: 1px solid rgba(134, 179, 143, 0.12); - border-radius: 50%; - pointer-events: none; - content: ""; + position: absolute; + right: max(20px, calc((100vw - var(--max-width)) / 2)); + bottom: 42px; + width: 180px; + height: 180px; + border: 1px solid rgba(134, 179, 143, 0.12); + border-radius: 50%; + pointer-events: none; + content: ""; } #work { - position: relative; - padding-top: 72px; - padding-bottom: 112px; + position: relative; + padding-top: 72px; + padding-bottom: 112px; } #work .section-heading { - max-width: 540px; - margin-bottom: 28px; + max-width: 540px; + margin-bottom: 28px; } #work .card-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 18px; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 18px; } #work .service-card { - position: relative; - display: grid; - grid-template-columns: 48px minmax(0, 1fr); - gap: 18px; - min-height: 172px; - padding: 24px; - overflow: hidden; - background: - linear-gradient(135deg, rgba(31, 41, 36, 0.82), rgba(15, 17, 17, 0.72)), - rgba(23, 28, 26, 0.8); + position: relative; + display: grid; + grid-template-columns: 48px minmax(0, 1fr); + gap: 18px; + min-height: 172px; + padding: 24px; + overflow: hidden; + background: + linear-gradient(135deg, rgba(31, 41, 36, 0.82), rgba(15, 17, 17, 0.72)), + rgba(23, 28, 26, 0.8); } #work .service-card:nth-child(even) { - transform: translateY(28px); + transform: translateY(28px); } #work .service-card:hover { - transform: translateY(-3px); + transform: translateY(-3px); } #work .service-card:nth-child(even):hover { - transform: translateY(23px); + transform: translateY(23px); } #work .service-card::after { - position: absolute; - right: -40px; - bottom: -40px; - width: 130px; - height: 130px; - border: 1px solid rgba(134, 179, 143, 0.12); - border-radius: 50%; - content: ""; + position: absolute; + right: -40px; + bottom: -40px; + width: 130px; + height: 130px; + border: 1px solid rgba(134, 179, 143, 0.12); + border-radius: 50%; + content: ""; } #work .card-icon { - margin-bottom: 0; + margin-bottom: 0; } #work .service-card h3 { - margin-bottom: 8px; + margin-bottom: 8px; } .brand-section { - position: relative; - width: min(100% - 40px, var(--max-width)); - padding: 46px; - border: 1px solid var(--border); - border-radius: var(--radius); - background: - linear-gradient(180deg, rgba(23, 28, 26, 0.78), rgba(15, 17, 17, 0.82)), - rgba(15, 17, 17, 0.72); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); + position: relative; + width: min(100% - 40px, var(--max-width)); + padding: 46px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: + linear-gradient(180deg, rgba(23, 28, 26, 0.78), rgba(15, 17, 17, 0.82)), + rgba(15, 17, 17, 0.72); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); } .brand-section::before { - position: absolute; - top: 50%; - right: 46px; - left: 46px; - height: 1px; - background: linear-gradient(90deg, transparent, rgba(134, 179, 143, 0.22), transparent); - content: ""; + position: absolute; + top: 50%; + right: 46px; + left: 46px; + height: 1px; + background: linear-gradient( + 90deg, + transparent, + rgba(134, 179, 143, 0.22), + transparent + ); + content: ""; } .brand-section .section-heading { - max-width: 620px; - margin-right: 0; - margin-left: 0; - text-align: left; + max-width: 620px; + margin-right: 0; + margin-left: 0; + text-align: left; } .principle-list { - position: relative; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 12px; + position: relative; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 12px; } .principle-list article { - min-height: 210px; - padding: 22px; - background: rgba(15, 17, 17, 0.58); - backdrop-filter: blur(10px); + min-height: 210px; + padding: 22px; + background: rgba(15, 17, 17, 0.58); + backdrop-filter: blur(10px); } .principle-list article:nth-child(2), .principle-list article:nth-child(4) { - margin-top: 34px; + margin-top: 34px; } .principle-list article:hover { - transform: translateY(-3px); + transform: translateY(-3px); } @media (max-width: 1040px) { - #work .card-grid, - .principle-list { - grid-template-columns: 1fr 1fr; - } + #work .card-grid, + .principle-list { + grid-template-columns: 1fr 1fr; + } - #work .service-card:nth-child(even), - #work .service-card:nth-child(even):hover, - .principle-list article:nth-child(2), - .principle-list article:nth-child(4) { - margin-top: 0; - transform: none; - } + #work .service-card:nth-child(even), + #work .service-card:nth-child(even):hover, + .principle-list article:nth-child(2), + .principle-list article:nth-child(4) { + margin-top: 0; + transform: none; + } - .brand-section::before { - display: none; - } + .brand-section::before { + display: none; + } } @media (max-width: 760px) { - #work .card-grid, - .principle-list { - grid-template-columns: 1fr; - } + #work .card-grid, + .principle-list { + grid-template-columns: 1fr; + } - #work .service-card { - grid-template-columns: 1fr; - } + #work .service-card { + grid-template-columns: 1fr; + } - .brand-section { - width: min(100% - 24px, var(--max-width)); - padding: 28px 20px; - } + .brand-section { + width: min(100% - 24px, var(--max-width)); + padding: 28px 20px; + } } /* Fixed header with supplied logo asset. */ .site-header { - position: fixed; - top: 22px; - right: 5vw; - left: 5vw; - width: min(90vw, var(--max-width)); - min-height: 70px; - padding: 10px 14px; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: var(--radius); - background: rgba(15, 17, 17, 0.52); - box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04); - backdrop-filter: blur(18px); + position: fixed; + top: 22px; + right: 5vw; + left: 5vw; + width: min(90vw, var(--max-width)); + min-height: 70px; + padding: 10px 14px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius); + background: rgba(15, 17, 17, 0.52); + box-shadow: + 0 18px 54px rgba(0, 0, 0, 0.28), + inset 0 1px 0 rgba(255, 255, 255, 0.04); + backdrop-filter: blur(18px); } .site-header.is-scrolled { - border-color: rgba(134, 179, 143, 0.18); - background: rgba(15, 17, 17, 0.82); + border-color: rgba(134, 179, 143, 0.18); + background: rgba(15, 17, 17, 0.82); } .brand-mark { - width: 50px; - height: 50px; - overflow: hidden; - border: 0; - border-radius: 6px; - background: transparent; - box-shadow: none; + width: 50px; + height: 50px; + overflow: hidden; + border: 0; + border-radius: 6px; + background: transparent; + box-shadow: none; } .brand-mark img { - display: block; - width: 100%; - height: 100%; - object-fit: contain; + display: block; + width: 100%; + height: 100%; + object-fit: contain; } @media (max-width: 760px) { - .site-header { - top: 14px; - right: 12px; - left: 12px; - width: auto; - min-height: 64px; - padding: 9px 10px; - } + .site-header { + top: 14px; + right: 12px; + left: 12px; + width: auto; + min-height: 64px; + padding: 9px 10px; + } - .brand-mark { - width: 44px; - height: 44px; - } + .brand-mark { + width: 44px; + height: 44px; + } } /* Final header and below-hero polish. */ .site-header { - position: fixed; - top: 0; - right: 0; - left: 0; - width: 100%; - min-height: 82px; - padding: 12px max(5vw, 22px); - border: 0; - border-radius: 0; - background: linear-gradient(180deg, rgba(15, 17, 17, 0.86), rgba(15, 17, 17, 0.5) 72%, transparent); - box-shadow: none; - backdrop-filter: blur(14px); + position: fixed; + top: 0; + right: 0; + left: 0; + width: 100%; + min-height: 82px; + padding: 12px max(5vw, 22px); + border: 0; + border-radius: 0; + background: linear-gradient( + 180deg, + rgba(15, 17, 17, 0.86), + rgba(15, 17, 17, 0.5) 72%, + transparent + ); + box-shadow: none; + backdrop-filter: blur(14px); } .site-header.is-scrolled { - border: 0; - background: rgba(15, 17, 17, 0.9); + border: 0; + background: rgba(15, 17, 17, 0.9); } .site-nav .nav-cta { - border: 0; - background: rgba(42, 94, 62, 0.28); + border: 0; + background: rgba(42, 94, 62, 0.28); } .brand-mark { - width: 64px; - height: 64px; - overflow: visible; + width: 64px; + height: 64px; + overflow: visible; } .brand-mark img { - transform: none; - transform-origin: center; + transform: none; + transform-origin: center; } .hero { - padding-top: 176px; + padding-top: 176px; } .section { - position: relative; + position: relative; } .about-section { - display: grid; - grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); - gap: clamp(34px, 6vw, 86px); - align-items: start; - padding-top: 118px; + display: grid; + grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); + gap: clamp(34px, 6vw, 86px); + align-items: start; + padding-top: 118px; } .about-section .section-heading { - position: sticky; - top: 112px; - margin-bottom: 0; + position: sticky; + top: 112px; + margin-bottom: 0; } .about-grid { - grid-template-columns: 1fr; - gap: 24px; + grid-template-columns: 1fr; + gap: 24px; } .section-copy { - max-width: 760px; - padding: 30px; - border-left: 1px solid rgba(134, 179, 143, 0.28); - background: - linear-gradient(90deg, rgba(42, 94, 62, 0.08), transparent 42%), - rgba(15, 17, 17, 0.18); + max-width: 760px; + padding: 30px; + border-left: 1px solid rgba(134, 179, 143, 0.28); + background: + linear-gradient(90deg, rgba(42, 94, 62, 0.08), transparent 42%), + rgba(15, 17, 17, 0.18); } .studio-panel { - max-width: 760px; - background: rgba(15, 17, 17, 0.42); + max-width: 760px; + background: rgba(15, 17, 17, 0.42); } #work { - padding-top: 92px; + padding-top: 92px; } #work::before { - position: absolute; - top: 52px; - right: 0; - left: 0; - height: 1px; - background: linear-gradient(90deg, transparent, rgba(134, 179, 143, 0.24), transparent); - content: ""; + position: absolute; + top: 52px; + right: 0; + left: 0; + height: 1px; + background: linear-gradient( + 90deg, + transparent, + rgba(134, 179, 143, 0.24), + transparent + ); + content: ""; } #work .section-heading { - display: grid; - grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); - gap: 28px; - max-width: none; - align-items: end; + display: grid; + grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); + gap: 28px; + max-width: none; + align-items: end; } #work .section-heading .eyebrow { - text-align: left; + text-align: left; } #work .section-heading h2 { - max-width: 520px; - margin-bottom: 0; + max-width: 520px; + margin-bottom: 0; } #work .card-grid { - display: grid; - grid-template-columns: 1fr; - gap: 0; - border-top: 1px solid var(--border); + display: grid; + grid-template-columns: 1fr; + gap: 0; + border-top: 1px solid var(--border); } #work .service-card { - display: grid; - grid-template-columns: 56px minmax(220px, 0.42fr) minmax(0, 1fr); - gap: 22px; - min-height: auto; - padding: 26px 0; - border: 0; - border-bottom: 1px solid var(--border); - border-radius: 0; - background: transparent; - box-shadow: none; + display: grid; + grid-template-columns: 56px minmax(220px, 0.42fr) minmax(0, 1fr); + gap: 22px; + min-height: auto; + padding: 26px 0; + border: 0; + border-bottom: 1px solid var(--border); + border-radius: 0; + background: transparent; + box-shadow: none; } #work .service-card:nth-child(even), #work .service-card:nth-child(even):hover, #work .service-card:hover { - transform: none; + transform: none; } #work .service-card::after { - display: none; + display: none; } #work .service-card h3 { - margin: 5px 0 0; - font-size: 1.15rem; + margin: 5px 0 0; + font-size: 1.15rem; } #work .service-card p { - max-width: 620px; + max-width: 620px; } .brand-section { - display: grid; - grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); - gap: clamp(28px, 5vw, 64px); - align-items: start; - padding: 54px; + display: grid; + grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); + gap: clamp(28px, 5vw, 64px); + align-items: start; + padding: 54px; } .brand-section .section-heading { - margin-bottom: 0; + margin-bottom: 0; } .brand-section .section-heading h2 { - font-size: clamp(1.8rem, 2.4vw, 2.5rem); + font-size: clamp(1.8rem, 2.4vw, 2.5rem); } .brand-section::before { - top: auto; - right: 54px; - bottom: 54px; - left: 54px; + top: auto; + right: 54px; + bottom: 54px; + left: 54px; } .principle-list { - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } .principle-list article, .principle-list article:nth-child(2), .principle-list article:nth-child(4) { - min-height: 190px; - margin-top: 0; + min-height: 190px; + margin-top: 0; } .contact-panel { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(290px, auto); - gap: clamp(28px, 6vw, 84px); - align-items: start; + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(290px, auto); + gap: clamp(28px, 6vw, 84px); + align-items: start; } .contact-copy { - max-width: 650px; + max-width: 650px; } .contact-action { - display: flex; - justify-content: flex-end; - align-self: center; + display: flex; + justify-content: flex-end; + align-self: center; } .contact-note { - grid-column: 1 / -1; - max-width: none; - margin-top: 8px; - padding-top: 24px; - border-top: 1px solid rgba(255, 255, 255, 0.08); + grid-column: 1 / -1; + max-width: none; + margin-top: 8px; + padding-top: 24px; + border-top: 1px solid rgba(255, 255, 255, 0.08); } @media (max-width: 920px) { - .about-section, - #work .section-heading, - .brand-section, - .contact-panel { - grid-template-columns: 1fr; - } + .about-section, + #work .section-heading, + .brand-section, + .contact-panel { + grid-template-columns: 1fr; + } - .about-section .section-heading { - position: static; - } + .about-section .section-heading { + position: static; + } - #work .service-card { - grid-template-columns: 48px minmax(0, 1fr); - } + #work .service-card { + grid-template-columns: 48px minmax(0, 1fr); + } - #work .service-card p { - grid-column: 2; - } + #work .service-card p { + grid-column: 2; + } - .contact-action { - justify-self: start; - justify-content: flex-start; - } + .contact-action { + justify-self: start; + justify-content: flex-start; + } } @media (max-width: 760px) { - .site-header { - top: 0; - right: 0; - left: 0; - width: 100%; - min-height: 72px; - padding: 9px 14px; - } + .site-header { + top: 0; + right: 0; + left: 0; + width: 100%; + min-height: 72px; + padding: 9px 14px; + } - .brand-mark { - width: 54px; - height: 54px; - } + .brand-mark { + width: 54px; + height: 54px; + } - .hero { - padding-top: 142px; - } + .hero { + padding-top: 142px; + } - .section-copy, - .brand-section { - padding: 24px 18px; - } + .section-copy, + .brand-section { + padding: 24px 18px; + } - #work .service-card { - grid-template-columns: 1fr; - } + #work .service-card { + grid-template-columns: 1fr; + } - #work .service-card p { - grid-column: auto; - } + #work .service-card p { + grid-column: auto; + } - .principle-list { - grid-template-columns: 1fr; - } + .principle-list { + grid-template-columns: 1fr; + } } /* Footer refresh and compact logo sizing. */ .site-header { - min-height: 74px; - padding-top: 10px; - padding-bottom: 10px; + min-height: 74px; + padding-top: 10px; + padding-bottom: 10px; } .brand { - gap: 12px; + gap: 12px; } .brand-mark { - width: 36px; - height: 48px; - padding: 3px 2px; - overflow: visible; + width: 48px; + height: 64px; + padding: 3px 2px; + overflow: visible; } .brand-mark img, .footer-mark img { - display: block; - width: 100%; - height: 100%; - object-fit: contain; + display: block; + width: 100%; + height: 100%; + object-fit: contain; +} + +.brand-mark img { + transform: scale(1.22); + transform-origin: center; } .contact-link { - gap: 12px; - min-height: 58px; - padding: 0 26px; - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: var(--radius); - color: #f4f7f4; - font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; - font-size: 0.96rem; - font-weight: 700; - letter-spacing: 0; - text-transform: lowercase; - background: rgba(15, 17, 17, 0.34); - box-shadow: none; + gap: 12px; + min-height: 58px; + padding: 0 26px; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: var(--radius); + color: #f4f7f4; + font-family: + "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, + monospace; + font-size: 0.96rem; + font-weight: 700; + letter-spacing: 0; + text-transform: lowercase; + background: rgba(15, 17, 17, 0.34); + box-shadow: none; } .contact-panel { - grid-template-columns: minmax(0, 1fr) minmax(290px, auto); - align-items: start; - padding: clamp(34px, 5vw, 62px); + grid-template-columns: minmax(0, 1fr) minmax(290px, auto); + align-items: start; + padding: clamp(34px, 5vw, 62px); } .contact-copy, .contact-action, .contact-note { - position: relative; - z-index: 1; + position: relative; + z-index: 1; } .contact-copy .eyebrow { - margin-bottom: 18px; + margin-bottom: 18px; } .contact-copy h2 { - max-width: 560px; - margin-bottom: 22px; - font-size: clamp(2.4rem, 4vw, 4rem); + max-width: 560px; + margin-bottom: 22px; + font-size: clamp(2.4rem, 4vw, 4rem); } .contact-copy p { - max-width: 650px; + max-width: 650px; } .contact-action { - justify-self: end; - padding-top: 72px; + justify-self: end; + padding-top: 72px; } .contact-panel .contact-note { - grid-column: 1 / -1; - max-width: none; - margin: 8px 0 0; - padding-top: 24px; - border-top: 1px solid rgba(255, 255, 255, 0.08); - font-size: 0.96rem; + grid-column: 1 / -1; + max-width: none; + margin: 8px 0 0; + padding-top: 24px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + font-size: 0.96rem; } .contact-link:hover, .contact-link:focus-visible { - border-color: rgba(134, 179, 143, 0.34); - background: rgba(15, 17, 17, 0.54); + border-color: rgba(134, 179, 143, 0.34); + background: rgba(15, 17, 17, 0.54); } .email-icon { - position: relative; - width: 16px; - height: 12px; - border: 1.5px solid var(--accent); - border-radius: 2px; - flex: 0 0 auto; + position: relative; + width: 16px; + height: 12px; + border: 1.5px solid var(--accent); + border-radius: 2px; + flex: 0 0 auto; } .email-icon::before, .email-icon::after { - position: absolute; - top: 2px; - width: 8px; - height: 1.5px; - background: var(--accent); - content: ""; + position: absolute; + top: 2px; + width: 8px; + height: 1.5px; + background: var(--accent); + content: ""; } .email-icon::before { - left: 1px; - transform: rotate(35deg); - transform-origin: left center; + left: 1px; + transform: rotate(35deg); + transform-origin: left center; } .email-icon::after { - right: 1px; - transform: rotate(-35deg); - transform-origin: right center; + right: 1px; + transform: rotate(-35deg); + transform-origin: right center; } .site-footer { - display: block; - width: 100%; - margin: 44px 0 0; - padding: 56px max(2.5vw, 18px) 40px; - border-top: 1px solid rgba(255, 255, 255, 0.08); - color: var(--muted); - background: rgba(10, 12, 12, 0.44); - font-size: 0.9rem; + display: block; + width: 100%; + margin: 44px 0 0; + padding: 56px max(2.5vw, 18px) 40px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + color: var(--muted); + background: rgba(10, 12, 12, 0.44); + font-size: 0.9rem; } .site-footer .footer-inner, .site-footer .footer-bottom { - width: min(100%, 1320px); - margin: 0 auto; + width: min(100%, 1320px); + margin: 0 auto; } .site-footer .footer-inner { - display: grid; - grid-template-columns: minmax(300px, 1fr) auto; - gap: clamp(72px, 18vw, 260px); - align-items: start; + display: grid; + grid-template-columns: minmax(300px, 1fr) auto; + gap: clamp(72px, 18vw, 260px); + align-items: start; } .site-footer .footer-brand { - display: block; - max-width: 330px; + display: block; + max-width: 330px; } .footer-logo { - display: inline-flex; - align-items: center; - gap: 14px; - margin-bottom: 24px; + display: inline-flex; + align-items: center; + gap: 16px; + margin-bottom: 24px; } .footer-mark { - display: block; - width: 32px; - height: 42px; + display: block; + width: 52px; + height: 68px; } .footer-wordmark, .brand-text { - display: grid; - gap: 2px; - text-transform: uppercase; + display: grid; + gap: 2px; + text-transform: uppercase; } .footer-wordmark strong { - color: var(--text); - font-size: 1rem; - font-weight: 800; - line-height: 1; - letter-spacing: 0.34em; + color: var(--text); + font-size: 1.12rem; + font-weight: 800; + line-height: 1; + letter-spacing: 0.34em; } .footer-wordmark span { - color: var(--soft); - font-size: 0.58rem; - font-weight: 800; - line-height: 1; - letter-spacing: 0.54em; + color: var(--soft); + font-size: 0.66rem; + font-weight: 800; + line-height: 1; + letter-spacing: 0.54em; } .footer-brand p { - margin-bottom: 18px; - color: rgba(230, 232, 230, 0.7); - line-height: 1.7; + margin-bottom: 18px; + color: rgba(230, 232, 230, 0.7); + line-height: 1.7; } .footer-location, .footer-bottom span { - font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; - letter-spacing: 0.08em; + font-family: + "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, + monospace; + letter-spacing: 0.08em; } .footer-location { - position: relative; - display: inline-block; - padding-left: 18px; - color: rgba(230, 232, 230, 0.76); - font-size: 0.82rem; - font-weight: 600; + position: relative; + display: inline-block; + padding-left: 18px; + color: rgba(230, 232, 230, 0.76); + font-size: 0.82rem; + font-weight: 600; } .footer-location::before { - position: absolute; - top: 0.55em; - left: 0; - width: 7px; - height: 7px; - border: 1px solid var(--muted); - border-radius: 50% 50% 50% 0; - content: ""; - transform: translateY(-50%) rotate(-45deg); + position: absolute; + top: 0.55em; + left: 0; + width: 7px; + height: 7px; + border: 1px solid var(--muted); + border-radius: 50% 50% 50% 0; + content: ""; + transform: translateY(-50%) rotate(-45deg); } .footer-location::after { - position: absolute; - top: 0.55em; - left: 3px; - width: 2px; - height: 2px; - border-radius: 50%; - background: var(--muted); - content: ""; - transform: translateY(-50%); + position: absolute; + top: 0.55em; + left: 3px; + width: 2px; + height: 2px; + border-radius: 50%; + background: var(--muted); + content: ""; + transform: translateY(-50%); } .site-footer .footer-links { - display: grid; - grid-template-columns: repeat(2, minmax(90px, 1fr)); - gap: clamp(44px, 6vw, 84px); - justify-self: end; - min-width: min(100%, 440px); - justify-items: end; - text-align: right; + display: grid; + grid-template-columns: repeat(2, minmax(90px, 1fr)); + gap: clamp(44px, 6vw, 84px); + justify-self: end; + min-width: min(100%, 440px); + justify-items: end; + text-align: right; } .site-footer .footer-links div { - display: grid; - gap: 14px; - justify-items: end; + display: grid; + gap: 14px; + justify-items: end; } .footer-links h2 { - margin: 0 0 12px; - color: var(--text); - font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; - font-size: 0.68rem; - font-weight: 700; - letter-spacing: 0.34em; - line-height: 1; - text-transform: uppercase; + margin: 0 0 12px; + color: var(--text); + font-family: + "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, + monospace; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.34em; + line-height: 1; + text-transform: uppercase; } .footer-links a { - color: rgba(230, 232, 230, 0.74); - font-size: 0.9rem; + color: rgba(230, 232, 230, 0.74); + font-size: 0.9rem; } .footer-links a:hover, .footer-links a:focus-visible { - color: var(--text); - outline: none; + color: var(--text); + outline: none; } .site-footer .footer-bottom { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 24px; - margin-top: 50px; - padding-top: 26px; - border-top: 1px solid rgba(255, 255, 255, 0.08); + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 24px; + margin-top: 50px; + padding-top: 26px; + border-top: 1px solid rgba(255, 255, 255, 0.08); } .footer-bottom p, .footer-bottom span { - margin: 0; - color: rgba(230, 232, 230, 0.68); - font-size: 0.78rem; + margin: 0; + color: rgba(230, 232, 230, 0.68); + font-size: 0.78rem; } @media (max-width: 920px) { - .contact-panel { - grid-template-columns: 1fr; - } + .contact-panel { + grid-template-columns: 1fr; + } - .contact-action { - justify-self: start; - padding-top: 0; - } + .contact-action { + justify-self: start; + padding-top: 0; + } } @media (max-width: 760px) { - .site-header { - min-height: 66px; - } + .site-header { + min-height: 66px; + } - .brand-mark { - width: 30px; - height: 40px; - } + .brand-mark { + width: 40px; + height: 54px; + } - .contact-link { - justify-self: start; - width: auto; - max-width: 100%; - min-height: 52px; - padding: 0 18px; - font-size: clamp(0.78rem, 3.4vw, 0.94rem); - } + .contact-link { + justify-self: start; + width: auto; + max-width: 100%; + min-height: 52px; + padding: 0 18px; + font-size: clamp(0.78rem, 3.4vw, 0.94rem); + } - .contact-panel { - grid-template-columns: 1fr; - } + .contact-panel { + grid-template-columns: 1fr; + } - .contact-action { - justify-self: start; - padding-top: 0; - } + .contact-action { + justify-self: start; + padding-top: 0; + } - .site-footer { - padding: 46px 24px 36px; - } + .site-footer { + padding: 46px 24px 36px; + } - .site-footer .footer-inner, - .site-footer .footer-bottom { - width: 100%; - } + .site-footer .footer-inner, + .site-footer .footer-bottom { + width: 100%; + } - .site-footer .footer-inner, - .site-footer .footer-links, - .site-footer .footer-bottom { - grid-template-columns: 1fr; - } + .site-footer .footer-inner, + .site-footer .footer-links, + .site-footer .footer-bottom { + grid-template-columns: 1fr; + } - .site-footer .footer-inner { - gap: 42px; - } + .site-footer .footer-inner { + gap: 42px; + } - .site-footer .footer-links, - .site-footer .footer-links div { - justify-items: start; - min-width: 0; - text-align: left; - } + .site-footer .footer-links, + .site-footer .footer-links div { + justify-items: start; + min-width: 0; + text-align: left; + } - .site-footer .footer-bottom { - display: grid; - gap: 16px; - } + .site-footer .footer-bottom { + display: grid; + gap: 16px; + } }