@font-face {
    font-family:'Space Grotesk';
    src:url('/fonts/SpaceGrotesk.ttf') format('truetype');
    font-weight:300 700;
    font-display:swap
}
@font-face {
    font-family:'JetBrains Mono';
    src:url('/fonts/JetBrainsMono.ttf') format('truetype');
    font-weight:100 800;
    font-display:swap
}
:root {
    --bg:var(--gk-bg-page);
    --panel:var(--gk-bg-surface);
    --panel2:var(--gk-bg-soft);
    --ink:var(--gk-text-primary);
    --muted:var(--gk-text-secondary);
    --accent:var(--gk-action-primary);
    --line:var(--gk-border);
    --font:'Space Grotesk','Segoe UI',sans-serif;
    --mono:'JetBrains Mono',Consolas,monospace;
    --width:1240px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:110px
}
body {
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font);
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit;
    text-decoration:none
}
button,input,select,textarea {
    font:inherit
}
button,a,input,select,textarea {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
img {
    max-width:100%;
    height:auto;
    display:block
}
h1,h2,h3,p {
    margin:0
}
h1,h2,h3 {
    font-weight:500;
    line-height:1.08;
    letter-spacing:-.055em
}
h1 {
    font-size:clamp(3rem,5.6vw,5.2rem)
}
h2 {
    font-size:clamp(2.25rem,3.7vw,3.55rem)
}
h3 {
    font-size:1.55rem;
    letter-spacing:-.035em
}
p {
    color:var(--muted)
}
:focus-visible {
    outline:2px solid var(--gk-focus);
    outline-offset:6px
}
.container {
    width:min(var(--width),calc(100% - 96px));
    margin-inline:auto
}
.section {
    padding:112px 0
}
.section-start {
    padding-top:24px
}
.eyebrow {
    font-family:var(--mono);
    font-size:10px;
    font-weight:500;
    letter-spacing:.12em;
    line-height:1.6;
    color:var(--muted);
    margin-bottom:23px
}
.accent {
    color:var(--gk-text-secondary)
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    min-height:54px;
    padding:14px 23px;
    background:var(--accent);
    border:1px solid var(--accent);
    color:var(--bg);
    font-size:13px;
    font-weight:600;
    line-height:1.4;
    transition:background .2s,transform .2s
}
.button:hover {
    background:var(--gk-bg-soft);
    transform:translateY(-2px)
}
.button:disabled {
    opacity:.6;
    cursor:wait
}
.button span {
    font-size:20px
}
.button-small {
    min-height:43px;
    padding:11px 16px;
    font-size:11px;
    gap:22px
}
.button-light {
    background:var(--ink);
    border-color:var(--ink);
    color:var(--bg)
}
.button-light:hover {
    background:white
}
.text-link {
    display:inline-flex;
    gap:28px;
    align-items:center;
    font-size:13px;
    font-weight:500;
    padding:8px 0;
    border-bottom:1px solid var(--gk-border);
    transition:color .2s,border-color .2s
}
.text-link:hover {
    color:var(--gk-text-secondary);
    border-color:var(--accent)
}
.text-link span {
    font-size:20px
}
.actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:27px
}
.skip-link {
    position:fixed;
    top:-100px;
    left:20px;
    background:white;
    color:black;
    padding:12px 20px;
    z-index:100
}
.skip-link:focus {
    top:10px
}
.site-header {
    position:sticky;
    top:0;
    z-index:30;
    background:var(--gk-nav-surface);
    border-bottom:1px solid var(--line)
}
.nav-wrap {
    height:94px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.brand-link {
    display:inline-flex;
    flex-shrink:0
}
.nav-logo {
    font-size:6px;
    gap:10px
}
.nav-logo .gk-logo__text {
    gap:4px
}
.nav-logo .gk-logo__name {
    font-size:4.1em
}
.nav-logo .gk-logo__tagline {
    font-size:1.1em
}
.nav-logo .gk-logo__rule {
    display:none
}
#main-nav {
    display:flex;
    align-items:center;
    gap:29px
}
#main-nav>a:not(.button) {
    font-size:12px;
    color:var(--gk-text-secondary);
    position:relative;
    padding:10px 0
}
#main-nav>a:not(.button):after {
    content:'';
    height:1px;
    background:var(--accent);
    position:absolute;
    bottom:1px;
    left:0;
    width:0;
    transition:width .2s
}
#main-nav>a:hover:after,#main-nav>a[aria-current=page]:after {
    width:100%
}
#main-nav>a[aria-current=page] {
    color:var(--ink)
}
.menu-toggle {
    display:none
}
.hero {
    position:relative;
    overflow:hidden;
    padding:76px 0 0
}
.hero-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:36px;
    align-items:center
}
.hero-copy {
    padding:12px 0 44px;
    position:relative;
    z-index:2
}
.hero-copy .eyebrow {
    display:flex;
    align-items:center;
    gap:11px;
    font-size:9px;
    margin-bottom:28px
}
.status-dot {
    display:inline-block;
    width:6px;
    height:6px;
    background:var(--accent);
    border-radius:50%;
    flex-shrink:0;
    box-shadow:var(--gk-shadow-soft)
}
.hero h1 {
    font-size:clamp(3rem,4.85vw,4.6rem);
    line-height:1.1;
    letter-spacing:-.06em
}
.hero-description {
    max-width:425px;
    font-size:14px;
    line-height:1.85;
    margin:28px 0 31px
}
.hero-note {
    font-family:var(--mono);
    font-size:9px;
    margin-top:34px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--gk-text-secondary)
}
.denmark {
    width:17px;
    height:12px;
    background:linear-gradient(to right,transparent 0 30%,var(--gk-bg-surface) 30% 40%,transparent 40%),linear-gradient(to bottom,var(--gk-bg-soft) 0 42%,var(--gk-bg-surface) 42% 56%,var(--gk-bg-soft) 56%);
    display:inline-block
}
.hero-art {
    height:475px;
    position:relative;
    border:1px solid var(--line);
    background:radial-gradient(ellipse at 55% 50%,var(--gk-bg-soft) 0,transparent 65%),linear-gradient(var(--gk-bg-soft) 1px,transparent 1px),linear-gradient(90deg,var(--gk-bg-soft) 1px,transparent 1px);
    background-size:auto,38px 38px,38px 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate
}
.art-top {
    position:absolute;
    top:21px;
    left:22px;
    right:22px;
    display:flex;
    justify-content:space-between;
    font:8px var(--mono);
    color:var(--gk-text-secondary);
    letter-spacing:.08em
}
.hero-logo {
    font-size:42px;
    transform:rotate(-25deg);
    z-index:1
}
.hero-logo .gk-logo__mark {
    filter:none
}
.orbital-lines {
    width:390px;
    height:390px;
    border:1px solid var(--gk-border);
    border-radius:50%;
    position:absolute;
    max-width:92%;
    max-height:92%
}
.orbital-lines:before,.orbital-lines:after {
    content:'';
    position:absolute;
    inset:20px;
    border:1px dashed var(--gk-border);
    border-radius:50%
}
.orbital-lines:after {
    inset:55px
}
.art-coordinate {
    position:absolute;
    right:24px;
    bottom:78px;
    font:7px/1.8 var(--mono);
    letter-spacing:.15em;
    color:var(--gk-text-secondary)
}
.art-bottom {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    border-top:1px solid var(--line);
    padding:17px 22px;
    display:flex;
    align-items:center;
    gap:12px;
    font:8px var(--mono);
    letter-spacing:.1em
}
.art-bottom>span:last-child {
    margin-left:auto;
    font-size:18px
}
.hero-bottom {
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:50px;
    padding:23px 0;
    font:8px var(--mono);
    color:var(--gk-text-secondary);
    letter-spacing:.13em
}
.hero-bottom a {
    font:10px var(--font);
    letter-spacing:0
}
.hero-bottom a span {
    margin-left:24px
}
.value-strip {
    background:var(--gk-bg-soft);
    border-block:1px solid var(--line);
    padding:24px 0
}
.value-strip .container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:12px;
    color:var(--gk-text-secondary)
}
.value-strip span:nth-child(even) {
    color:var(--gk-text-secondary);
    font-size:20px
}
.section-heading {
    display:flex;
    justify-content:space-between;
    gap:55px;
    align-items:flex-end;
    margin-bottom:45px
}
.section-heading .eyebrow {
    margin-bottom:18px
}
.section-heading>p {
    max-width:360px;
    font-size:13px
}
.service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    border-top:1px solid var(--line);
    border-left:1px solid var(--line)
}
.service-card {
    display:flex;
    flex-direction:column;
    min-height:290px;
    padding:30px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--panel);
    transition:background .2s
}
.service-card:hover {
    background:var(--gk-bg-soft)
}
.card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:36px
}
.service-icon {
    font-size:29px;
    line-height:1;
    color:var(--gk-text-secondary)
}
.card-arrow {
    font-size:20px;
    color:var(--gk-text-secondary);
    transition:transform .2s,color .2s
}
.service-card:hover .card-arrow {
    transform:translate(3px,-3px);
    color:var(--gk-text-secondary)
}
.service-card h3 {
    font-size:21px;
    line-height:1.2;
    margin-bottom:15px
}
.service-card p {
    font-size:12px;
    line-height:1.8;
    max-width:285px
}
.card-link {
    font-size:10px;
    color:var(--gk-text-secondary);
    display:flex;
    justify-content:space-between;
    margin-top:auto;
    padding-top:23px
}
.section-link {
    margin-top:32px
}
.work-section {
    border-top:1px solid var(--line);
    background:var(--gk-bg-soft)
}
.work-empty {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    padding:56px;
    border:1px solid var(--line);
    background:linear-gradient(120deg,var(--gk-bg-soft),var(--gk-bg-soft));
    align-items:center
}
.empty-index {
    min-height:160px;
    border:1px solid var(--gk-border);
    position:relative;
    padding:20px;
    font:9px var(--mono);
    color:var(--gk-text-secondary);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:linear-gradient(45deg,transparent 49.8%,var(--gk-bg-soft) 50%,transparent 50.2%)
}
.empty-index span {
    font:72px var(--font);
    align-self:flex-end;
    line-height:.9;
    color:var(--gk-text-secondary)
}
.work-empty h3,.work-empty h2 {
    font-size:28px;
    margin-bottom:20px
}
.work-empty p {
    font-size:13px;
    margin-bottom:20px
}
.process-section {
    background:var(--gk-bg-soft);
    color:var(--gk-text-secondary)
}
.process-section p {
    color:var(--gk-text-secondary)
}
.process-layout {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:120px
}
.process-intro h2 span {
    color:var(--gk-text-secondary)
}
.process-intro>p:not(.eyebrow) {
    max-width:330px;
    font-size:13px;
    margin-top:25px
}
.process-logo {
    font-size:12px;
    margin-top:40px
}
.process-list {
    list-style:none;
    margin:0;
    padding:0
}
.process-list li {
    display:grid;
    grid-template-columns:38px 1fr 15px;
    gap:20px;
    padding:25px 0;
    border-top:1px solid var(--gk-border)
}
.process-list li:last-child {
    border-bottom:1px solid var(--gk-border)
}
.step-number {
    font:10px var(--mono);
    color:var(--gk-text-secondary);
    line-height:2
}
.process-list h3 {
    font-size:23px;
    margin-bottom:12px
}
.process-list p {
    font-size:12px;
    line-height:1.8
}
.process-list li>span:last-child {
    color:var(--gk-text-secondary)
}
.preview-banner {
    padding:64px;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:70px;
    align-items:center;
    background:var(--gk-bg-soft);
    position:relative;
    overflow:hidden
}
.preview-banner .eyebrow {
    color:var(--gk-text-secondary);
    font-size:8px
}
.preview-banner h2 {
    font-size:clamp(2rem,3.2vw,3.2rem);
    line-height:1.14
}
.preview-banner h2 span {
    color:var(--gk-text-secondary)
}
.preview-banner p:not(.eyebrow) {
    font-size:13px;
    color:var(--gk-text-secondary);
    margin:23px 0 28px
}
.preview-banner small {
    display:block;
    font-size:9px;
    line-height:1.7;
    max-width:320px;
    color:var(--gk-text-secondary);
    margin-top:17px
}
.sketch-window {
    border:1px solid var(--gk-border);
    border-radius:4px;
    transform:rotate(-5deg);
    background:var(--gk-bg-soft);
    position:relative;
    box-shadow:var(--gk-shadow-soft)
}
.sketch-toolbar {
    border-bottom:1px solid var(--gk-border);
    display:flex;
    align-items:center;
    padding:13px;
    gap:5px
}
.sketch-toolbar i {
    width:4px;
    height:4px;
    border:1px solid var(--gk-border);
    border-radius:50%
}
.sketch-toolbar span {
    font:6px var(--mono);
    margin-left:20px;
    color:var(--gk-text-secondary)
}
.sketch-body {
    padding:30px
}
.sketch-body>span:first-child {
    font:7px var(--mono);
    color:var(--gk-text-secondary)
}
.sketch-heading {
    font-size:56px;
    line-height:.95;
    margin:25px 0;
    color:var(--gk-text-secondary);
    letter-spacing:-.07em
}
.sketch-line {
    height:3px;
    background:var(--gk-bg-soft);
    max-width:80%;
    margin:9px 0
}
.sketch-line.short {
    max-width:55%
}
.sketch-button {
    display:inline-block;
    font:6px var(--mono);
    padding:12px;
    border:1px solid var(--gk-border);
    margin-top:20px;
    color:var(--gk-text-secondary)
}
.sketch-star {
    font-size:110px;
    position:absolute;
    right:-25px;
    bottom:12px;
    line-height:1;
    color:var(--gk-text-secondary)
}
.sketch-caption {
    display:block;
    text-align:right;
    font:8px var(--mono);
    color:var(--gk-text-secondary);
    margin-top:35px
}
.final-cta {
    text-align:center;
    padding-top:45px;
    padding-bottom:110px
}
.final-cta h2 {
    font-size:clamp(2rem,4.3vw,4.2rem)
}
.final-cta p:not(.eyebrow) {
    margin:24px auto;
    font-size:14px
}
.final-cta .text-link {
    color:var(--gk-text-secondary)
}
.site-footer {
    border-top:1px solid var(--line);
    padding-top:62px;
    background:var(--gk-bg-soft)
}
.footer-top {
    display:grid;
    grid-template-columns:1.7fr 1fr 1fr;
    gap:60px;
    padding-bottom:60px
}
.footer-logo {
    font-size:8px
}
.footer-top p:not(.eyebrow) {
    font-size:11px;
    margin-top:15px
}
.footer-top>div:not(:first-child) {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:9px
}
.footer-top .eyebrow {
    font-size:8px;
    margin-bottom:10px
}
.footer-top a:not(.brand-link) {
    font-size:12px;
    color:var(--gk-text-secondary)
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--line);
    padding:22px 0;
    font:8px var(--mono);
    color:var(--gk-text-secondary)
}
.footer-bottom>div {
    display:flex;
    gap:20px
}
.tiny-cross {
    color:var(--accent);
    margin-left:10px
}
.language {
    border-left:1px solid var(--line);
    padding-left:18px;
    color:var(--gk-text-secondary)
}
.page-hero {
    padding-top:92px;
    padding-bottom:84px
}
.page-hero h1 {
    max-width:990px
}
.page-hero .lead {
    font-size:17px;
    line-height:1.85;
    max-width:660px;
    margin-top:30px
}
.page-hero>.button,.page-hero>.text-link {
    margin-top:28px
}
.service-row {
    display:grid;
    grid-template-columns:100px 1.5fr 1fr;
    gap:50px;
    padding:50px 0;
    border-top:1px solid var(--line)
}
.service-row>.eyebrow {
    font-size:14px
}
.service-row .eyebrow span {
    display:block;
    font-size:40px;
    margin-top:25px;
    color:var(--gk-text-secondary)
}
.service-row h2 {
    font-size:36px
}
.service-row p {
    font-size:14px;
    margin:20px 0
}
.feature-list {
    list-style:none;
    padding:0;
    margin:0
}
.feature-list li {
    padding:12px 0;
    border-bottom:1px solid var(--line);
    font-size:13px;
    color:var(--gk-text-secondary)
}
.feature-list li:before {
    content:'↗';
    margin-right:13px;
    color:var(--accent)
}
.breadcrumbs {
    display:flex;
    gap:12px;
    font:10px var(--mono);
    color:var(--gk-text-secondary);
    margin-bottom:45px;
    flex-wrap:wrap
}
.breadcrumbs a:hover {
    color:white
}
.detail-grid {
    display:grid;
    grid-template-columns:1.8fr 1fr;
    gap:110px;
    align-items:start
}
.prose h2 {
    font-size:31px;
    margin:40px 0 20px;
    letter-spacing:-.04em
}
.prose h2:first-child {
    margin-top:0
}
.prose p {
    font-size:15px;
    line-height:1.95;
    margin:20px 0
}
.preserve-lines {
    white-space:pre-line
}
.benefits {
    list-style:none;
    padding:0
}
.benefits li {
    padding:18px 0;
    border-bottom:1px solid var(--line);
    font-size:15px
}
.benefits li:before {
    content:'✓';
    color:var(--accent);
    margin-right:15px
}
.detail-aside {
    padding:30px;
    border:1px solid var(--line);
    background:var(--panel);
    position:sticky;
    top:120px
}
.detail-aside .text-link {
    margin-top:25px
}
.small-text {
    font-size:11px;
    color:var(--muted)
}
.detail-aside .small-text {
    margin-top:18px
}
.detail-image {
    margin-top:35px
}
.portfolio-filters {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr auto;
    gap:18px;
    align-items:end;
    border-block:1px solid var(--line);
    padding:25px 0;
    margin-bottom:45px
}
.portfolio-filters label {
    display:block;
    font-size:11px;
    margin-bottom:10px
}
.portfolio-filters .button {
    min-height:48px
}
.result-count {
    font:10px var(--mono);
    margin-bottom:25px
}
.project-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px
}
.project-image {
    position:relative;
    aspect-ratio:1.4;
    background:var(--gk-bg-soft);
    overflow:hidden;
    margin-bottom:18px
}
.project-image>img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s
}
.project-card:hover img {
    transform:scale(1.035)
}
.project-no-image {
    height:100%;
    padding:24px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:linear-gradient(140deg,var(--gk-bg-soft),var(--gk-bg-soft))
}
.project-no-image>span {
    font:8px var(--mono);
    color:var(--gk-text-secondary)
}
.project-no-image strong {
    font-weight:500;
    font-size:24px;
    line-height:1.15;
    letter-spacing:-.04em
}
.round-arrow {
    position:absolute;
    right:15px;
    bottom:15px;
    border:1px solid var(--gk-border);
    border-radius:50%;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    background:var(--gk-bg-soft)
}
.project-meta {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    font:9px var(--mono);
    color:var(--gk-text-secondary);
    margin-bottom:12px
}
.project-card h3 {
    font-size:24px
}
.project-card>p {
    font-size:12px;
    margin-top:12px
}
.tags {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:18px
}
.tags span,.badge {
    display:inline-block;
    font:9px/1.4 var(--mono);
    padding:6px 9px;
    border:1px solid var(--gk-border);
    color:var(--gk-text-secondary)
}
.page-hero .badge {
    margin:15px 0
}
.pagination {
    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:40px;
    font-size:13px
}
.project-hero-image {
    width:100%;
    max-height:700px;
    object-fit:contain;
    background:var(--panel)
}
.case-body {
    margin-top:70px
}
dl {
    margin:0
}
dt {
    font:9px var(--mono);
    color:var(--muted);
    margin-top:20px
}
dd {
    margin:5px 0 0;
    font-size:14px
}
.gallery {
    margin:75px 0
}
.gallery figure {
    margin:0 0 50px
}
.gallery img {
    width:100%
}
.gallery figcaption {
    font-size:12px;
    color:var(--muted);
    margin-top:10px
}
.about-grid {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:90px;
    align-items:center
}
.about-brand {
    min-height:400px;
    background:radial-gradient(ellipse,var(--gk-bg-soft),transparent 70%);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:55px
}
.about-logo {
    font-size:15px
}
.about-brand>.eyebrow {
    margin-bottom:0;
    font-size:8px
}
.principles {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:45px
}
.principles article {
    padding-top:24px;
    border-top:1px solid var(--gk-border)
}
.principles h3 {
    margin:25px 0 20px
}
.principles p {
    font-size:13px
}
.expertise {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:85px;
    align-items:center
}
.expertise>div>p:not(.eyebrow) {
    font-size:14px;
    margin-top:25px;
    max-width:400px
}
.technology-wall {
    display:flex;
    flex-wrap:wrap;
    gap:10px
}
.technology-wall span {
    padding:16px 20px;
    border:1px solid var(--line);
    font:13px var(--mono);
    color:var(--gk-text-secondary);
    background:var(--panel)
}
.narrow {
    max-width:800px
}
.status-page {
    min-height:65vh;
    padding-bottom:120px
}
.contact-grid {
    display:grid;
    grid-template-columns:.85fr 1.4fr;
    gap:95px;
    align-items:start
}
.contact-aside {
    position:sticky;
    top:135px
}
.contact-aside h2 {
    font-size:37px;
    margin-top:20px
}
.contact-aside>p {
    font-size:14px;
    margin-top:25px
}
.contact-steps {
    padding-left:20px;
    margin:30px 0;
    font-size:12px;
    color:var(--gk-text-secondary)
}
.contact-steps li {
    padding:7px 0
}
.aside-note {
    border-top:1px solid var(--line);
    padding-top:22px;
    display:flex;
    gap:20px;
    font-size:12px
}
.aside-note>span {
    color:var(--accent);
    font-size:30px
}
.contact-logo {
    font-size:10px;
    margin-top:35px
}
.contact-form {
    border:1px solid var(--line);
    padding:35px;
    background:var(--panel)
}
.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:23px
}
.field {
    display:flex;
    flex-direction:column;
    gap:8px
}
.field.full {
    grid-column:1/-1
}
.field label {
    font-size:11px;
    color:var(--gk-text-secondary)
}
.field label>span:not(.optional) {
    color:var(--gk-text-secondary)
}
.optional {
    color:var(--gk-text-secondary);
    font-size:10px
}
input:not([type=checkbox]):not([type=hidden]),select,textarea {
    display:block;
    width:100%;
    border:1px solid var(--gk-border);
    background:var(--gk-bg-soft);
    color:var(--ink);
    border-radius:0;
    padding:12px 13px;
    font-size:12px;
    min-height:46px
}
input::placeholder,textarea::placeholder {
    color:var(--gk-text-secondary)
}
textarea {
    resize:vertical;
    line-height:1.8
}
input[type=checkbox] {
    accent-color:var(--accent);
    width:16px;
    height:16px;
    flex-shrink:0;
    margin-top:3px
}
.field small {
    font-size:9px;
    color:var(--gk-text-secondary)
}
.consent {
    display:flex;
    align-items:start;
    gap:12px;
    font-size:11px;
    line-height:1.8;
    color:var(--gk-text-secondary);
    margin-top:27px
}
.consent a {
    text-decoration:underline;
    text-underline-offset:3px
}
.form-submit {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    align-items:center;
    margin-top:25px
}
.form-submit .button {
    font-size:12px
}
.honeypot {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)
}
.validation-summary-errors {
    padding:16px;
    border:1px solid var(--gk-border);
    margin-bottom:25px;
    color:var(--gk-text-secondary);
    font-size:12px
}
.validation-summary-valid {
    display:none
}
.validation-summary ul {
    margin:0;
    padding-left:18px
}
.field-validation-error {
    font-size:11px;
    color:var(--gk-text-secondary)
}
.input-validation-error {
    border-color:var(--gk-border)!important
}
.quote-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin-top:35px
}
.quote-grid figure {
    margin:0;
    padding:30px;
    border:1px solid var(--line)
}
blockquote {
    margin:0 0 30px;
    font-size:23px;
    line-height:1.5;
    letter-spacing:-.025em
}
figcaption {
    font-size:12px
}
figcaption>span {
    display:block;
    color:var(--muted)
}
.will-reveal {
    transition:opacity .7s,transform .7s
}
.will-reveal:not(.is-visible) {
    opacity:0;
    transform:translateY(15px)
}
@media(min-width:1500px) {
    .hero {
        padding-top:100px
    }
    .hero-art {
        height:525px
    }
    .hero h1 {
        font-size:77px
    }
    .hero-grid {
        gap:65px
    }
    .hero-logo {
        font-size:47px
    }
}
@media(max-width:1100px) {
    .container {
        width:calc(100% - 60px)
    }
    #main-nav {
        gap:19px
    }
    #main-nav>a:not(.button) {
        font-size:11px
    }
    .hero-art {
        height:415px
    }
    .hero-logo {
        font-size:35px
    }
    .hero h1 {
        font-size:55px
    }
    .hero-copy .eyebrow {
        font-size:8px
    }
    .hero-grid {
        grid-template-columns:1.2fr 1fr;
        gap:20px
    }
    .hero-description {
        font-size:13px
    }
    .hero .actions {
        gap:18px
    }
    .hero .actions .text-link {
        font-size:11px;
        gap:12px
    }
    .hero .button {
        font-size:12px;
        padding:14px 18px;
        gap:20px
    }
    .process-layout {
        gap:65px
    }
    .preview-banner {
        padding:45px;
        gap:45px
    }
    .detail-grid {
        gap:55px
    }
    .contact-grid {
        gap:45px
    }
    .contact-form {
        padding:25px
    }
    .service-row {
        grid-template-columns:60px 1.4fr 1fr;
        gap:35px
    }
    .service-card {
        padding:25px
    }
    .footer-top {
        gap:40px
    }
    .hero-note {
        font-size:8px
    }
}
@media(max-width:850px) {
    .nav-wrap {
        height:auto;
        min-height:83px;
        flex-wrap:wrap;
        padding:14px 0;
        gap:10px
    }
    #main-nav {
        width:100%;
        flex-wrap:wrap;
        padding-bottom:10px;
        gap:18px
    }
    .menu-toggle.is-ready {
        display:flex;
        align-items:center;
        gap:15px;
        background:none;
        color:var(--ink);
        border:1px solid var(--line);
        padding:10px 16px;
        font:11px var(--mono)
    }
    #main-nav.is-collapsible {
        display:none
    }
    #main-nav.is-open {
        display:flex
    }
    .hero-grid {
        grid-template-columns:1fr 1fr
    }
    .hero {
        padding-top:55px
    }
    .hero h1 {
        font-size:44px
    }
    .hero-art {
        height:370px
    }
    .hero-logo {
        font-size:31px
    }
    .art-top {
        font-size:6px;
        left:14px;
        right:14px
    }
    .hero-description {
        margin-top:22px
    }
    .hero-copy .eyebrow {
        font-size:7px
    }
    .hero .actions {
        align-items:flex-start;
        flex-direction:column;
        gap:12px
    }
    .hero-note {
        font-size:7px
    }
    .hero-bottom {
        margin-top:25px
    }
    .service-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .section {
        padding:80px 0
    }
    .section-start {
        padding-top:15px
    }
    .section-heading {
        gap:30px
    }
    .section-heading>p {
        max-width:285px;
        font-size:12px
    }
    .work-empty {
        gap:35px;
        padding:35px
    }
    .process-layout {
        gap:40px
    }
    .preview-banner {
        padding:35px;
        gap:30px
    }
    .sketch-body {
        padding:25px
    }
    .sketch-heading {
        font-size:42px
    }
    .sketch-star {
        font-size:80px
    }
    .preview-banner h2 {
        font-size:31px
    }
    .preview-banner .eyebrow {
        font-size:7px
    }
    .footer-bottom {
        flex-wrap:wrap;
        font-size:7px
    }
    .footer-top {
        grid-template-columns:1.3fr 1fr 1fr;
        gap:25px
    }
    .footer-logo {
        font-size:6px
    }
    .service-row {
        grid-template-columns:40px 1fr;
        gap:25px
    }
    .service-row>.feature-list {
        grid-column:2
    }
    .service-row h2 {
        font-size:31px
    }
    .project-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .portfolio-filters {
        grid-template-columns:1fr 1fr
    }
    .page-hero {
        padding-top:65px;
        padding-bottom:65px
    }
    .detail-grid {
        gap:35px;
        grid-template-columns:1.4fr 1fr
    }
    .detail-aside {
        padding:22px
    }
    .about-grid {
        gap:35px
    }
    .about-logo {
        font-size:11px
    }
    .expertise {
        gap:40px
    }
    .contact-grid {
        grid-template-columns:1fr
    }
    .contact-aside {
        position:static;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:20px
    }
    .contact-aside>.eyebrow {
        grid-column:1/-1;
        margin-bottom:0
    }
    .contact-aside h2 {
        margin:0
    }
    .contact-aside>p {
        margin:0
    }
    .contact-logo {
        display:none
    }
    .contact-steps {
        margin:0
    }
    .contact-form {
        padding:35px
    }
    .page-hero h1 {
        font-size:55px
    }
    .principles {
        gap:30px
    }
    .principles h3 {
        font-size:23px
    }
}
@media(max-width:600px) {
    .container {
        width:calc(100% - 40px)
    }
    .nav-wrap {
        min-height:78px
    }
    .nav-logo {
        font-size:5.5px
    }
    .hero {
        padding-top:40px
    }
    .hero-grid {
        grid-template-columns:1fr;
        gap:10px
    }
    .hero h1 {
        font-size:clamp(38px,9.5vw,58px);
        line-height:1.12
    }
    .hero-copy .eyebrow {
        font-size:7px;
        letter-spacing:.07em;
        margin-bottom:22px
    }
    .hero-description {
        font-size:13px;
        max-width:360px;
        line-height:1.9
    }
    .hero .actions {
        flex-direction:row;
        align-items:center;
        gap:20px
    }
    .hero .actions .text-link {
        font-size:10px
    }
    .hero-note {
        font-size:8px;
        margin-top:25px
    }
    .hero-copy {
        padding-bottom:20px
    }
    .hero-art {
        height:320px
    }
    .hero-logo {
        font-size:30px
    }
    .art-top {
        font-size:7px
    }
    .orbital-lines {
        width:270px;
        height:270px
    }
    .hero-bottom {
        font-size:6px;
        padding:20px 0
    }
    .hero-bottom a {
        font-size:9px
    }
    .hero-bottom a span {
        margin-left:10px
    }
    .value-strip {
        padding:20px 0
    }
    .value-strip .container {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px 20px;
        font-size:11px
    }
    .value-strip span:nth-child(even) {
        display:none
    }
    .value-strip span:before {
        content:'+';
        color:var(--gk-text-secondary);
        margin-right:10px
    }
    .section {
        padding:65px 0
    }
    .section-start {
        padding-top:0
    }
    .section-heading {
        display:block;
        margin-bottom:30px
    }
    .section-heading>p {
        max-width:100%;
        margin-top:23px
    }
    .section-heading>.text-link {
        margin-top:18px
    }
    h2 {
        font-size:34px
    }
    .eyebrow {
        font-size:8px;
        letter-spacing:.1em
    }
    .service-grid {
        grid-template-columns:1fr
    }
    .service-card {
        min-height:245px;
        padding:26px
    }
    .card-top {
        margin-bottom:25px
    }
    .service-card h3 {
        font-size:24px
    }
    .service-card p {
        max-width:100%;
        font-size:13px
    }
    .work-empty {
        grid-template-columns:1fr;
        gap:30px;
        padding:25px
    }
    .empty-index {
        min-height:140px
    }
    .work-empty h3 {
        font-size:26px
    }
    .process-layout {
        grid-template-columns:1fr;
        gap:35px
    }
    .process-logo {
        display:none
    }
    .process-intro>p:not(.eyebrow) {
        max-width:100%
    }
    .process-list li {
        gap:14px
    }
    .preview-banner {
        padding:30px 25px;
        grid-template-columns:1fr;
        gap:50px
    }
    .preview-banner h2 {
        font-size:34px
    }
    .preview-sketch {
        padding:10px 15px 0
    }
    .sketch-heading {
        font-size:53px
    }
    .sketch-caption {
        font-size:7px
    }
    .final-cta {
        padding-top:20px
    }
    .final-cta h2 {
        font-size:37px
    }
    .final-cta p:not(.eyebrow) {
        font-size:13px;
        max-width:320px
    }
    .site-footer {
        padding-top:45px
    }
    .footer-top {
        grid-template-columns:1fr 1fr;
        gap:35px 20px;
        padding-bottom:40px
    }
    .footer-top>div:first-child {
        grid-column:1/-1
    }
    .footer-logo {
        font-size:7px
    }
    .footer-top a:not(.brand-link) {
        font-size:11px
    }
    .footer-top .eyebrow {
        font-size:7px
    }
    .footer-bottom {
        gap:18px;
        font-size:7px;
        padding:24px 0
    }
    .footer-bottom>span:nth-child(2) {
        display:none
    }
    .footer-bottom>div {
        gap:15px
    }
    .page-hero {
        padding-top:48px;
        padding-bottom:50px
    }
    .page-hero h1 {
        font-size:43px
    }
    .page-hero .lead {
        font-size:14px;
        line-height:1.85;
        margin-top:24px
    }
    .service-row {
        padding:35px 0;
        grid-template-columns:30px 1fr;
        gap:20px
    }
    .service-row h2 {
        font-size:28px
    }
    .service-row p {
        font-size:13px
    }
    .service-row>.eyebrow {
        font-size:10px
    }
    .service-row .eyebrow span {
        font-size:27px
    }
    .portfolio-filters {
        grid-template-columns:1fr 1fr;
        gap:16px 12px
    }
    .portfolio-filters>div:first-child {
        grid-column:1/-1
    }
    .portfolio-filters .button {
        grid-column:1/-1
    }
    .portfolio-filters select {
        font-size:11px;
        padding-left:8px
    }
    .project-grid {
        grid-template-columns:1fr;
        gap:40px
    }
    .project-card h3 {
        font-size:26px
    }
    .detail-grid {
        grid-template-columns:1fr;
        gap:40px
    }
    .detail-aside {
        position:static
    }
    .prose h2 {
        font-size:28px
    }
    .prose p {
        font-size:14px
    }
    .breadcrumbs {
        font-size:8px;
        margin-bottom:30px
    }
    .about-grid {
        grid-template-columns:1fr;
        gap:45px
    }
    .about-brand {
        min-height:280px
    }
    .about-logo {
        font-size:13px
    }
    .principles {
        grid-template-columns:1fr;
        gap:30px
    }
    .principles h3 {
        margin:20px 0 15px;
        font-size:27px
    }
    .expertise {
        grid-template-columns:1fr;
        gap:35px
    }
    .technology-wall {
        gap:8px
    }
    .technology-wall span {
        font-size:11px;
        padding:13px 16px
    }
    .contact-aside {
        display:block
    }
    .contact-aside h2 {
        font-size:34px;
        margin:20px 0
    }
    .contact-aside>p {
        font-size:13px
    }
    .contact-steps {
        margin:25px 0 0
    }
    .aside-note {
        margin-top:25px
    }
    .contact-form {
        padding:25px 20px
    }
    .form-grid {
        grid-template-columns:1fr;
        gap:20px
    }
    .field.full {
        grid-column:auto
    }
    .field label {
        font-size:12px
    }
    .contact-grid {
        gap:35px
    }
    .form-submit {
        gap:17px
    }
    .form-submit .button {
        width:100%
    }
    .consent {
        font-size:10px
    }
    .quote-grid {
        grid-template-columns:1fr
    }
    .status-page {
        min-height:65vh;
        padding-bottom:80px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }
    .will-reveal:not(.is-visible) {
        opacity:1;
        transform:none
    }
}