:root {
    --paper: #f3f1ee;
    --paper-soft: #faf9f6;
    --ink: #192238;
    --muted: #5a6475;
    --line: #dfdcd6;
    --card: #fff;
    --ember: #f17a10;
    --ember-dark: #dd6700;
    --font-heading: "Sora", "Manrope", sans-serif;
    --font-body: "Manrope", "Sora", sans-serif;
    --step--1: clamp(.92rem, .18vw + .88rem, 1rem);
    --step-0: clamp(1.04rem, .32vw + .97rem, 1.17rem);
    --step-1: clamp(1.2rem, .58vw + 1.06rem, 1.46rem);
    --step-2: clamp(1.42rem, .98vw + 1.2rem, 1.92rem);
    --step-3: clamp(1.88rem, 1.65vw + 1.5rem, 2.88rem);
    --step-4: clamp(2.45rem, 2.75vw + 1.82rem, 4rem);
    --measure-body: 62ch;
    --panel-radius: 1.1rem;
    --panel-pop-distance: 4px;
    --panel-pop-duration: .26s;
    --panel-pop-ease: cubic-bezier(.22, 1, .36, 1);
    --section-gap: clamp(4.4rem, 6.5vw, 6.2rem);
    --section-divider-space: clamp(1.9rem, 2.7vw, 2.6rem);
    --navy-panel-border: #121b30f5;
    --navy-panel-bg: linear-gradient(155deg, #0f1a35 0%, #0d1730 56%, #13203a 100%);
    --navy-panel-shadow: 0 24px 44px #0c121f42, inset 0 1px 0 #ffffff14;
    --navy-panel-shadow-pop: 0 32px 58px #0c121f57, 0 12px 26px #0c121f2e, inset 0 1px 0 #ffffff1a;
    --navy-panel-glow: radial-gradient(circle, #f17a1038, #f17a1000);
    --navy-panel-text: #f1f5fcfa;
    --navy-panel-text-muted: #d9e2eff0;
    --navy-panel-text-soft: #bfcbdde0;
    --hero-panel-border: #ffffff3d;
    --hero-panel-bg: linear-gradient(145deg, #0a101880, #0a10184d);
    --hero-panel-shadow: 0 18px 38px #050a103d;
    --hero-panel-blur: 6px
}

* {
    box-sizing: border-box
}

body,
h2,
h3,
p {
    margin: 0
}

img {
    max-width: 100%;
    display: block
}

a {
    color: inherit
}

html,
body {
    min-height: 100%;
    overflow-x: hidden
}

html {
    scroll-behavior: smooth
}

body.site-page {
    font-family: var(--font-body);
    font-size: var(--step-0);
    letter-spacing: .001em;
    color: var(--ink);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    background-image: radial-gradient(circle at 10% 5%, #ffffffa6, #0000 28%), radial-gradient(circle at 85% 22%, #ffffff6b, #0000 36%), linear-gradient(#eeece861, #f3f1ee61);
    line-height: 1.72
}

.grain {
    pointer-events: none;
    z-index: -1;
    opacity: .12;
    background-image: repeating-linear-gradient(32deg, #0000000b 0 1px, #0000 1px 4px), repeating-linear-gradient(121deg, #ffffff42 0 1px, #0000 1px 6px);
    position: fixed;
    inset: 0
}

.section-heading,
.ornament-title {
    font-family: var(--font-heading);
    letter-spacing: -.04em;
    text-wrap: balance;
    line-height: 1.03
}

.section-copy,
.service-tile-text,
.services-intro,
.contact-panel-copy {
    font-family: var(--font-body);
    text-wrap: pretty
}

.btn {
    letter-spacing: .01em;
    text-transform: none;
    border: 1px solid #0000;
    border-radius: .5rem;
    justify-content: center;
    align-items: center;
    gap: .3rem;
    padding: .63rem 1.08rem;
    font-size: .88rem;
    font-weight: 700;
    transition: all .14s;
    display: inline-flex
}

.btn-primary {
    color: #fff;
    background: linear-gradient(#ff8616, #f07100);
    border-color: #de6700
}

.btn-primary:hover {
    background: linear-gradient(#f97d0f, #df6800)
}

.image-frame {
    position: relative;
    overflow: hidden
}

.reveal {
    animation: .6s both rise
}

.reveal:nth-of-type(2) {
    animation-delay: .1s
}

.reveal:nth-of-type(3) {
    animation-delay: .16s
}

@keyframes rise {
    0% {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }
}

:root {
    --paper: #ece7df;
    --paper-soft: #f7f3ec;
    --ink: #121920;
    --muted: #606975;
    --line: #14181e1f;
    --card: #fff;
    --ember: #ff7a00;
    --ember-dark: #d85c00;
    --panel-radius: 1.55rem;
    --panel-pop-distance: 6px;
    --section-gap: clamp(4.8rem, 7vw, 7rem);
    --section-divider-space: clamp(2.3rem, 3vw, 3rem);
    --navy-panel-border: #0d1118f0;
    --navy-panel-bg: linear-gradient(155deg, #12171d 0%, #0a0d12 56%, #171d24 100%);
    --navy-panel-shadow: 0 30px 60px #070a0f47, inset 0 1px 0 #ffffff0f;
    --navy-panel-shadow-pop: 0 38px 72px #070a0f57, 0 16px 30px #070a0f2e, inset 0 1px 0 #ffffff14;
    --navy-panel-glow: radial-gradient(circle, #ff7a0038, #ff7a0000);
    --navy-panel-text: #f6f8fcfa;
    --navy-panel-text-muted: #d2dbe8db;
    --navy-panel-text-soft: #b0bccec7
}

body.site-page {
    color: var(--ink);
    background-color: var(--paper);
    background-image: radial-gradient(circle at 12% 8%, #ffffffc2, #0000 25%), radial-gradient(circle at 82% 22%, #ffffff61, #0000 28%), linear-gradient(#efebe4 0%, #ece7df 22%, #f4f0e9 54%, #ece7df 100%)
}

.grain {
    opacity: .08;
    background-image: repeating-linear-gradient(32deg, #0000000a 0 1px, #0000 1px 4px), repeating-linear-gradient(121deg, #fff3 0 1px, #0000 1px 7px)
}

.section-kicker {
    letter-spacing: .22em
}

.btn {
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 999px;
    min-height: 3.15rem;
    padding: .72rem 1.3rem;
    font-size: .8rem;
    font-weight: 800;
    box-shadow: 0 12px 22px #11151c1a
}

.btn-primary {
    background: linear-gradient(#ff861a, #f06a00);
    border-color: #c55500e6;
    box-shadow: 0 18px 28px #ce5d0047, inset 0 1px #ffffff4d
}

.btn-primary:hover {
    background: linear-gradient(#ff912d, #f26f00);
    transform: translateY(-1px);
    box-shadow: 0 22px 34px #ce5d0052, inset 0 1px #ffffff57
}

.hero-header {
    z-index: 55;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.hero-topbar {
    pointer-events: auto;
    z-index: 56;
    width: 100%;
    padding: clamp(1rem, 2.3vw, 2rem) clamp(1rem, 4.1vw, 3rem) 0;
    position: relative
}

.topbar-row {
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    display: flex
}

.hero-nav-shell {
    flex-direction: column;
    align-items: center;
    gap: clamp(.8rem, 1.7vw, 1.4rem);
    width: min(1180px, 100%);
    padding: 0;
    display: flex
}

.hero-brand {
    flex: none;
    justify-content: center;
    align-items: center;
    gap: .72rem;
    min-width: 0;
    text-decoration: none;
    display: inline-flex
}

.hero-brand-img {
    object-fit: contain;
    filter: drop-shadow(0 14px 28px #0000006b);
    width: clamp(190px, 24vw, 430px);
    max-width: 76vw;
    height: auto;
    display: block
}

.hero-nav {
    backdrop-filter: blur(8px);
    background: #070b1147;
    border: 1px solid #ffffff29;
    border-radius: 999px;
    width: auto;
    max-width: 100%;
    padding: .3rem .4rem;
    display: block;
    box-shadow: 0 16px 34px #03070d38, inset 0 1px #ffffff14
}

.hero-nav-inner {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    display: flex
}

.hero-nav a {
    color: #e7ecf4e6;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 5px 18px #00000075, 0 0 22px #090e153d;
    padding: .42rem clamp(.66rem, 1.3vw, 1.46rem);
    font-size: clamp(.8rem, .86vw, 1.12rem);
    font-weight: 600;
    text-decoration: none;
    transition: transform .17s, color .17s, text-shadow .17s, opacity .17s;
    display: inline-block;
    position: relative
}

.hero-nav a:nth-child(-n+4) {
    color: #f5f8fdfa;
    font-weight: 700
}

.hero-nav a+a:before {
    content: "";
    background: linear-gradient(#ffffff24, #ffffff8f, #ffffff24);
    border-radius: 999px;
    width: 1px;
    height: 1.6rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

.hero-nav a:hover {
    color: #fff;
    opacity: 1;
    text-shadow: 0 6px 18px #0000008a, 0 0 26px #090e154d;
    transform: translateY(-1px)
}

.hero-nav a:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #ffffffbd
}

.hero-nav-action {
    background: linear-gradient(#ff8e21f0, #dc6300f0);
    border: 1px solid #ffffff52;
    border-radius: 999px;
    margin-left: clamp(.55rem, 1.1vw, 1rem);
    box-shadow: 0 18px 32px #0d111647, inset 0 1px #ffffff38;
    color: #fff !important;
    padding-inline: clamp(1rem, 1.6vw, 1.4rem) !important
}

.hero-nav-action:before {
    display: none
}

.hero-nav-action:hover {
    color: #fff;
    background: linear-gradient(#ff9934fa, #e06900fa)
}

.hero-stage {
    border-bottom: 1px solid var(--line);
    min-height: 90svh;
    position: relative
}

.hero-stage:before {
    content: "";
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(92deg, #060a10d6 0%, #060a10b3 22%, #060a1047 52%, #060a1014 72%, #060a1024 100%), radial-gradient(circle at 20% 64%, #ff892429, #ff892400 34%);
    position: absolute;
    inset: 0
}

.hero-stage:after {
    content: "";
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at 50% 12%, #080c1442, #080c140f 36%, #080c1400 62%), linear-gradient(#080c1447 0%, #080c1414 34%, #080c1429 64%, #080c1480 100%);
    position: absolute;
    inset: 0
}

.hero-bg {
    z-index: 0;
    object-fit: cover;
    filter: contrast(1.03)saturate(.9)brightness(.7);
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.hero-content {
    z-index: 5;
    justify-content: flex-start;
    align-items: flex-end;
    width: min(1320px, 100%);
    min-height: 90svh;
    margin: 0 auto;
    padding: clamp(15rem, 27vw, 20rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 7vw, 5.6rem) clamp(.35rem, 1.8vw, 1.8rem);
    display: flex;
    position: relative
}

.hero-copy {
    text-align: left;
    backdrop-filter: blur(10px);
    background: linear-gradient(#ffffff14, #ffffff08), linear-gradient(156deg, #070c13eb, #070c13cc 56%, #090e16e0);
    border: 1px solid #ffffff29;
    border-radius: clamp(.72rem, 1.2vw, 1.1rem);
    width: min(760px, 100%);
    padding: clamp(1.5rem, 2.9vw, 2.45rem) clamp(1.3rem, 2.8vw, 2.7rem) clamp(1.4rem, 2.8vw, 2.2rem);
    position: relative;
    overflow: hidden;
    box-shadow: 0 28px 58px #04080e6b, inset 0 1px #ffffff14
}

.hero-copy:before {
    content: "";
    background: linear-gradient(90deg, #ffffffe0, #ffa358eb, #fff0);
    height: 4px;
    position: absolute;
    top: 0;
    left: 0;
    right: 26%
}

.hero-copy:after {
    content: "";
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(circle, #ff82202e, #ff822000);
    border-radius: 50%;
    width: clamp(210px, 24vw, 330px);
    position: absolute;
    inset: auto -8% -60% auto
}

.hero-copy.no-title .hero-text {
    max-width: 13ch;
    font-family: var(--font-heading);
    letter-spacing: -.045em;
    margin-top: 0;
    font-size: clamp(2.45rem, 4.8vw, 4.9rem);
    font-weight: 800;
    line-height: .98
}

.hero-copy.no-title .hero-eyebrow {
    margin-top: 1rem
}

.hero-text {
    letter-spacing: -.012em;
    color: #ecf1f8f2;
    text-shadow: 0 2px 3px #04080e61, 0 8px 20px #0006, 0 0 24px #04080e38;
    max-width: 36ch;
    margin: 1rem 0 0;
    font-size: clamp(1.12rem, 1.5vw, 1.42rem);
    line-height: 1.76
}

.hero-copy .btn {
    min-height: 3rem;
    padding-inline: 1.18rem
}

.hero-direct-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .84rem;
    max-width: 620px;
    margin-top: 1.45rem;
    display: grid
}

.hero-direct-card {
    backdrop-filter: blur(7px);
    background: linear-gradient(#ffffff14, #ffffff08), linear-gradient(145deg, #0d131be6, #080c12b8);
    border: 1px solid #ffffff1f;
    border-radius: .92rem;
    gap: .2rem;
    min-height: 100%;
    padding: .92rem .98rem .98rem;
    text-decoration: none;
    transition: transform .16s, border-color .16s, background .16s;
    display: grid;
    box-shadow: 0 16px 28px #060a103d, inset 0 1px #ffffff0d
}

.hero-direct-card:hover {
    background: linear-gradient(#ffffff1a, #ffffff0a), linear-gradient(145deg, #101720f0, #0a0f16c2);
    border-color: #ff993466;
    transform: translateY(-2px)
}

.hero-direct-role {
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #ffb067f5;
    font-size: .69rem;
    font-weight: 800
}

.hero-direct-name {
    color: #f9fbfffa;
    font-size: clamp(.98rem, .86vw, 1.08rem);
    line-height: 1.32
}

.hero-direct-phone {
    color: #dce4efeb;
    font-size: .92rem;
    font-weight: 700
}

.hero-meta-row {
    flex-wrap: wrap;
    gap: .56rem;
    margin-top: 1.2rem;
    display: flex
}

.hero-meta-pill {
    color: #eff4fbdb;
    background: #060a0f38;
    border: 1px solid #ffffff1f;
    border-radius: 999px;
    align-items: center;
    gap: .34rem;
    min-height: 2.35rem;
    padding: .42rem .8rem;
    text-decoration: none;
    display: inline-flex
}

.hero-meta-pill:hover {
    color: #fff;
    border-color: #ff993475
}

.hero-meta-pill .material-symbols-outlined {
    color: #ffb067fa;
    font-size: 1rem
}

.topbar-row {
    align-items: center
}

.hero-brand-img {
    filter: drop-shadow(0 12px 24px #00000057);
    width: clamp(150px, 18vw, 270px);
    max-width: 38vw
}

.hero-nav {
    box-shadow: none;
    backdrop-filter: none;
    background: 0 0;
    border: 0;
    margin-left: auto;
    padding: 0
}

.hero-nav a {
    color: #e9edf4e6;
    letter-spacing: .02em;
    text-transform: none;
    text-shadow: none;
    padding: .68rem 1rem;
    font-size: .94rem;
    font-weight: 600
}

.hero-nav a:nth-child(-n+4) {
    color: #f8fafdfa
}

.hero-nav a+a:before {
    display: none
}

.hero-nav a:hover {
    color: #fff;
    text-shadow: none;
    transform: translateY(-1px)
}

.hero-nav-action {
    background: linear-gradient(#ff8618, #f16b00);
    border-color: #ff8a2bcc;
    margin-left: .7rem;
    box-shadow: 0 18px 28px #d15c0042, inset 0 1px #fff3;
    padding-inline: 1.45rem !important
}

.hero-stage {
    min-height: 100svh
}

.hero-stage:before {
    background: linear-gradient(94deg, #06080ceb 0%, #06080cd1 24%, #06080c57 56%, #06080c29 76%, #06080c47 100%), radial-gradient(circle at 18% 68%, #ff7a002e, #ff7a0000 34%)
}

.hero-stage:after {
    background: radial-gradient(circle at 62% 14%, #05080c24, #05080c00 30%), linear-gradient(#0406092e 0%, #04060905 32%, #04060929 62%, #0406098f 100%)
}

.hero-bg {
    filter: contrast(1.04)saturate(.76)brightness(.5)
}

.hero-content {
    align-items: flex-end;
    width: min(1320px, 100%);
    min-height: 100svh;
    padding: clamp(10rem, 20vw, 13rem) clamp(1rem, 4vw, 2.8rem) clamp(3.5rem, 7vw, 5.4rem)
}

.hero-copy {
    width: min(720px, 100%);
    box-shadow: none;
    backdrop-filter: none;
    background: 0 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    overflow: visible
}

.hero-copy:before {
    background: linear-gradient(90deg, #ffffffeb, #ff7a00eb, #ff7a0000);
    border-radius: 999px;
    width: 4.5rem;
    height: 4px;
    inset: auto auto calc(100% + 1.15rem) 0
}

.hero-copy:after {
    background: radial-gradient(circle, #ff7a002e, #ff7a0000);
    width: clamp(220px, 24vw, 320px);
    inset: auto auto -2rem 28rem
}

.hero-copy.no-title .hero-text {
    text-transform: none;
    max-width: 10ch;
    font-size: clamp(3.5rem, 7vw, 6.2rem);
    line-height: .94
}

.hero-text {
    color: #e8eef8eb;
    max-width: 24ch;
    margin-top: 1.1rem;
    font-size: clamp(1.2rem, 1.4vw, 1.5rem);
    line-height: 1.78
}

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #edf3fcc7;
    text-shadow: 0 2px 3px #04080e5c, 0 6px 16px #00000057;
    background: #0c0f148a;
    border: 1px solid #ffffff1f;
    border-radius: 1.2rem;
    align-items: center;
    min-height: 2rem;
    margin: 1.4rem 0 0;
    padding: .65rem 1.2rem;
    font-size: clamp(.74rem, .74vw, .88rem);
    font-weight: 700;
    line-height: 1.6;
    display: inline-flex
}

.hero-copy .btn-primary {
    color: #fff;
    background: linear-gradient(#ff8618, #f06a00);
    border-color: #c55500eb
}

.hero-copy .btn-primary:hover {
    color: #fff;
    background: linear-gradient(#ff912d, #f26f00)
}

.hero-direct-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 720px;
    margin-top: 1.8rem
}

.hero-direct-card {
    background: linear-gradient(#171b21f5, #0b0e12f5), linear-gradient(90deg, #ff7a001f, #ff7a0000);
    border: 1px solid #ffffff17;
    border-radius: 1.2rem;
    gap: .26rem;
    padding: 1rem 1.02rem 1.06rem;
    box-shadow: 0 20px 36px #04070a3d, inset 0 1px #ffffff0d
}

.hero-direct-card:hover {
    border-color: #ff7a0057
}

.hero-direct-role {
    color: #ffb16cf0
}

.hero-direct-phone {
    color: #e1e8f3d1
}

.hero-meta-row {
    gap: .72rem;
    margin-top: 1.4rem
}

.hero-meta-pill {
    background: #080b0f8f;
    border-color: #ffffff1a;
    border-radius: 999px;
    min-height: 2.6rem;
    padding: .52rem .92rem;
    box-shadow: inset 0 1px #ffffff0a
}

.hero-topbar {
    padding-top: clamp(.8rem, 1.5vw, 1.2rem)
}

.hero-brand-img {
    width: clamp(132px, 14vw, 220px);
    max-width: 30vw
}

.hero-nav-inner {
    gap: .08rem
}

.hero-nav a {
    padding: .54rem .84rem;
    font-size: .9rem
}

.hero-nav-action {
    margin-left: .5rem;
    padding-inline: 1.2rem !important
}

.hero-text-display {
    margin: 0
}

.hero-text-main,
.hero-text-accent {
    display: block
}

.hero-text-main {
    color: #fafbfdfa
}

.hero-text-accent {
    color: #ff7a00
}

.hero-copy.no-title .hero-text-display .hero-text-accent {
    text-shadow: 0 2px 4px #04080e6b, 0 12px 28px #b9540042
}

.hero-copy.no-title .hero-text-display {
    max-width: 9ch;
    font-family: var(--font-heading);
    letter-spacing: -.055em;
    font-size: clamp(3.55rem, 7.1vw, 6.35rem);
    font-weight: 800;
    line-height: .92
}

.hero-copy.no-title .hero-text {
    margin-top: 1.35rem
}

.hero-copy.no-title .hero-text-display .hero-text-main {
    max-width: 6.8ch
}

.hero-topbar {
    padding: 0
}

.topbar-row {
    justify-content: flex-start
}

.hero-nav-shell {
    backdrop-filter: blur(1px);
    border-width: 0 0 1px;
    border-color: #ffffff1a;
    border-radius: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: clamp(.82rem, 1.2vw, 1.15rem);
    width: 100%;
    max-width: none;
    min-height: clamp(3.35rem, 4.2vw, 4rem);
    padding: clamp(.44rem, .78vw, .66rem) clamp(1rem, 2.8vw, 2.4rem);
    box-shadow: 0 18px 34px #03060a33, inset 0 1px #ffffff0a
}

.hero-brand-badge {
    border-radius: 0;
    justify-content: center;
    align-items: center;
    height: clamp(2.6rem, 2.9vw, 2.95rem);
    display: inline-flex;
    overflow: hidden
}

.hero-brand-img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0
}

.hero-nav {
    flex: auto;
    min-width: 0
}

.hero-nav-inner {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: clamp(.08rem, .35vw, .3rem)
}

.hero-nav a {
    letter-spacing: .01em;
    padding: .42rem .82rem;
    font-size: clamp(.84rem, .92vw, .96rem)
}

.hero-nav-action {
    box-shadow: none;
    background: 0 0;
    border: 0;
    margin-left: clamp(.18rem, .5vw, .4rem);
    color: #ff8a22 !important;
    padding-inline: .42rem !important
}

.hero-nav-action:hover {
    background: 0 0;
    color: #ffab60 !important
}

.hero-content {
    padding-top: clamp(8.3rem, 13vw, 10rem)
}

main {
    flex-direction: column;
    gap: clamp(5.2rem, 8vw, 7.8rem);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4.6rem clamp(1rem, 3.8vw, 3.8rem) 6.8rem;
    display: flex
}

main>* {
    margin-top: 0 !important
}

#helhet {
    order: 1
}

#tjanster {
    order: 2
}

#projekt {
    order: 3
}

#om-oss {
    order: 4
}

#referenser {
    order: 5
}

#kontakt {
    order: 6
}

.ornament-title-wrap {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.55rem;
    display: flex
}

.ornament-title {
    letter-spacing: -.045em;
    color: #192238fa;
    justify-content: center;
    align-items: center;
    font-size: clamp(2.08rem, 3.5vw, 3.28rem);
    font-weight: 800;
    line-height: 1.08;
    display: inline-flex
}

.ornament-title-wrap:after {
    content: "";
    background: linear-gradient(90deg, #f17a10f2, #f17a1038);
    border-radius: 999px;
    width: clamp(74px, 8vw, 112px);
    height: 4px
}

.section-heading {
    font-size: var(--step-4);
    letter-spacing: -.045em;
    color: #192238fa;
    max-width: 14ch;
    font-weight: 800;
    line-height: 1.08
}

.section-kicker {
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #a4530a;
    margin: 0 0 .92rem;
    font-size: .78rem;
    font-weight: 800
}

.section-copy {
    max-width: var(--measure-body);
    letter-spacing: -.008em;
    color: var(--muted);
    font-size: clamp(1.12rem, .72vw, 1.42rem);
    line-height: 1.88
}

.section-copy.muted {
    font-size: var(--step-0);
    color: #70747a;
    line-height: 1.82
}

.services-stage {
    border-top: 1px solid var(--line);
    padding-top: calc(var(--section-divider-space) + .6rem);
    padding-bottom: clamp(.4rem, 1.3vw, 1rem)
}

.services-shell {
    border-radius: calc(var(--panel-radius) + .08rem);
    background: radial-gradient(circle at 10% 0, #ffffffb8, #fff0 32%), linear-gradient(145deg, #f7f4effa, #ece7dffa);
    border: 1px solid #d6d0c6f0;
    padding: clamp(1.75rem, 3.6vw, 3.1rem);
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 44px #1d222c14, inset 0 1px #ffffffd6
}

.services-shell:before {
    content: "";
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(circle, #f17a1024, #f17a1000);
    border-radius: 50%;
    width: clamp(220px, 28vw, 420px);
    position: absolute;
    inset: auto -12% -42% auto
}

.services-shell>* {
    z-index: 1;
    position: relative
}

.services-stage-head {
    text-align: center;
    justify-items: center;
    gap: .2rem;
    max-width: 60ch;
    margin: 0 auto;
    display: grid
}

.services-stage-head .ornament-title-wrap {
    margin-bottom: .95rem
}

.usp-shell {
    border-radius: calc(var(--panel-radius) + .08rem);
    background: radial-gradient(circle at 14% 18%, #ffffffdb, #fff0 38%), linear-gradient(145deg, #faf8f4fa, #eeeae2fa);
    border: 1px solid #d3cdc2f5;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, .82fr);
    align-items: start;
    gap: clamp(1.5rem, 3vw, 2.7rem);
    padding: clamp(1.45rem, 3.2vw, 3rem);
    display: grid;
    position: relative;
    overflow: hidden;
    box-shadow: 0 22px 46px #1d222c1a, 0 8px 20px #1d222c0f, inset 0 1px #ffffffc7
}

.usp-shell:before {
    content: "";
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(circle, #f17a102e, #f17a1000);
    border-radius: 50%;
    width: clamp(220px, 28vw, 420px);
    position: absolute;
    inset: auto -12% -40% auto
}

.usp-copy-block {
    z-index: 1;
    padding-right: clamp(0rem, 1.2vw, .6rem);
    position: relative
}

.usp-heading {
    max-width: 11ch
}

.usp-copy {
    max-width: 52ch
}

.usp-checklist {
    gap: 1rem;
    margin-top: 1.8rem;
    display: grid
}

.usp-check-item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .9rem;
    display: grid
}

.usp-check-icon {
    color: var(--ember);
    margin-top: .1rem;
    font-size: 1.45rem
}

.usp-check-copy {
    gap: .18rem;
    display: grid
}

.usp-check-title {
    font-family: var(--font-heading);
    color: #192238fa;
    margin: 0;
    font-size: clamp(1.08rem, 1.05vw, 1.32rem);
    font-weight: 700;
    line-height: 1.28
}

.usp-check-text {
    color: #545d6bf0;
    max-width: 52ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.7
}

.usp-quote-card {
    z-index: 1;
    border: 1px solid var(--navy-panel-border);
    background: var(--navy-panel-bg);
    color: var(--navy-panel-text);
    box-shadow: var(--navy-panel-shadow);
    border-radius: 1.4rem;
    padding: clamp(1.3rem, 2.4vw, 2.15rem);
    position: relative;
    overflow: hidden
}

.usp-quote-card:before {
    content: "";
    background: var(--navy-panel-glow);
    pointer-events: none;
    border-radius: 50%;
    width: 11rem;
    height: 11rem;
    position: absolute;
    top: -4.5rem;
    right: -3.2rem
}

.usp-quote-label {
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #ffb067f5;
    margin: 0;
    font-size: .76rem;
    font-weight: 800
}

.usp-quote-title {
    max-width: 9ch;
    font-family: var(--font-heading);
    letter-spacing: -.05em;
    color: var(--navy-panel-text);
    margin: 1rem 0 0;
    font-size: clamp(2rem, 2.65vw, 2.8rem);
    font-weight: 800;
    line-height: 1.05
}

.usp-quote-copy {
    max-width: 32ch;
    color: var(--navy-panel-text-muted);
    margin: 1rem 0 0;
    font-size: clamp(1.02rem, .9vw, 1.2rem);
    font-style: italic;
    line-height: 1.85
}

.usp-quote-attribution {
    align-items: center;
    gap: .86rem;
    margin-top: 1.5rem;
    display: flex
}

.usp-quote-badge {
    color: #fff;
    background: linear-gradient(#ff8a1f, #e56900);
    border-radius: 50%;
    place-items: center;
    width: 3rem;
    height: 3rem;
    display: grid;
    box-shadow: 0 10px 20px #e569003d
}

.usp-quote-meta {
    gap: .05rem;
    display: grid
}

.usp-quote-name {
    color: var(--navy-panel-text);
    font-size: 1.02rem;
    font-weight: 800
}

.usp-quote-role {
    color: var(--navy-panel-text-soft);
    font-size: .95rem
}

.projects-stage {
    border-top: 1px solid var(--line);
    padding-top: calc(var(--section-divider-space) + .6rem);
    padding-bottom: clamp(.45rem, 1.4vw, 1.1rem)
}

.projects-head {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    display: grid
}

.projects-title-wrap {
    grid-column: 2;
    justify-self: center;
    margin-bottom: 0
}

.projects-head .btn {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    float:right;
}


.projects-intro {
    letter-spacing: .003em;
    text-align: center;
    color: #545961eb;
    text-wrap: pretty;
    max-width: 62ch;
    margin: 1.45rem auto 0;
    font-size: clamp(1.1rem, .84vw, 1.3rem);
    font-weight: 500;
    line-height: 1.8
}

.projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.8rem;
    margin-top: 2.1rem;
    display: grid
}

.project-tile .service-tile-media {
    aspect-ratio: 16/10
}

.project-tile {
    background: radial-gradient(circle at 82% 10%, #ffb5722e, #ffb57200 26%), linear-gradient(145deg, #f6f3eefa, #ece7dffa);
    border-color: #cac2b5eb;
    position: relative
}

.project-tile .service-tile-copy {
    align-content: start;
    gap: .82rem
}

.project-tile .service-tile-copy:before {
    content: "Projektcase";
    color: #192238bd;
    letter-spacing: .11em;
    text-transform: uppercase;
    background: #19223814;
    border-radius: 999px;
    align-items: center;
    width: fit-content;
    padding: .24rem .56rem;
    font-size: .72rem;
    font-weight: 800;
    display: inline-flex
}

.project-tile:first-child {
    grid-column: span 2;
    grid-template-columns: minmax(0, 1.16fr) minmax(280px, .84fr);
    display: grid
}

.project-tile:first-child .service-tile-media {
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid #d6cfc4db;
    min-height: 100%
}

.project-tile:first-child .service-tile-copy {
    align-content: center;
    padding: 1.9rem 1.9rem 2rem
}

.project-tile:first-child .service-tile-copy:before {
    content: "Utvalt projekt";
    color: #9f4600;
    background: #f17a101f
}

.project-tile:first-child .service-tile-title {
    font-size: clamp(1.7rem, 2vw, 2.18rem);
    line-height: 1.08
}

.project-tile:first-child .service-tile-text {
    max-width: 34ch;
    font-size: clamp(1rem, .92vw, 1.1rem);
    line-height: 1.78
}

.services-intro {
    letter-spacing: .003em;
    text-align: center;
    color: #49515feb;
    text-wrap: pretty;
    max-width: 56ch;
    margin: 0 auto;
    font-size: clamp(1.08rem, .78vw, 1.22rem);
    font-weight: 500;
    line-height: 1.74
}

.services-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
    margin-top: 2.5rem;
    display: grid
}

.service-tile .image-overlay {
    align-items: center;
    gap: .42rem;
    flex-wrap: wrap;
    display: flex
}

.services-empty {
    margin: 1rem 0 0;
    color: rgba(91, 96, 103, .95)
}

.service-tile {
    --panel-border-color: #e9e4db;
    --panel-shadow-rest: 0 16px 32px #21242b1a, 0 5px 13px #21242b0d, inset 0 1px 0 #ffffffb3;
    --panel-shadow-pop: 0 24px 42px #21242b29, 0 10px 24px #21242b14, inset 0 1px 0 #ffffffbd;
    border: 1px solid var(--panel-border-color);
    border-radius: var(--panel-radius);
    background: radial-gradient(circle at 16% 12%, #ffffffeb, #0000 48%), linear-gradient(145deg, #faf8f3f7, #f2eee7eb);
    flex-direction: column;
    display: flex;
    overflow: hidden
}

.service-tile-media {
    aspect-ratio: 16/9;
    background: linear-gradient(#e9e4dbad, #e9e4db38);
    border-bottom: 1px solid #d6cfc4db
}

.service-tile-media img {
    object-fit: cover;
    filter: contrast(1.06)saturate(.96);
    width: 100%;
    height: 100%;
    display: block
}

.service-tile-copy {
    flex: 1;
    gap: .78rem;
    padding: 1.55rem 1.6rem 1.72rem;
    display: grid
}

.services-flow .service-tile-copy {
    align-content: start;
    min-block-size: clamp(12.2rem, 13vw, 14rem);
    padding: 1.45rem 1.45rem 1.55rem
}

.service-tile-title {
    font-family: var(--font-heading);
    letter-spacing: -.018em;
    color: #2d3138fa;
    overflow-wrap: anywhere;
    text-wrap: balance;
    margin: 0;
    font-size: clamp(1.28rem, 1.66vw, 1.64rem);
    font-weight: 700;
    line-height: 1.26
}

.service-tile-text {
    font-size: var(--step-0);
    letter-spacing: .002em;
    color: #535961f5;
    margin: 0;
    line-height: 1.84
}

.services-flow .service-tile-text {
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.76
}

.about-stage {
    --panel-border-color: var(--navy-panel-border);
    --panel-shadow-rest: var(--navy-panel-shadow);
    --panel-shadow-pop: var(--navy-panel-shadow-pop);
    border: 1px solid var(--panel-border-color);
    border-radius: var(--panel-radius);
    background: var(--navy-panel-bg);
    padding: 1.4rem;
    position: relative;
    overflow: hidden
}

.about-stage:before {
    content: "";
    background: var(--navy-panel-glow);
    pointer-events: none;
    border-radius: 50%;
    width: 11rem;
    height: 11rem;
    position: absolute;
    top: -4.2rem;
    right: -3rem
}

.about-stage:after {
    content: "";
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(circle, #ffffff14, #fff0);
    border-radius: 999px;
    width: 56%;
    position: absolute;
    inset: auto -14% -56% auto
}

.about-stack {
    z-index: 1;
    gap: 1.35rem;
    display: grid;
    position: relative
}

.about-photo {
    border: 1px solid #ffffff1f;
    border-radius: 1rem;
    order: 2;
    min-height: clamp(360px, 48vw, 620px);
    box-shadow: 0 20px 40px #060a1047
}

.about-photo-img {
    object-fit: cover;
    filter: grayscale(.08)contrast(1.04)brightness(.94);
    width: 100%;
    height: 100%
}

.about-copy {
    order: 1;
    max-width: 56ch
}

.about-copy>*+* {
    margin-top: .9rem
}

.about-copy .section-heading {
    margin: .24rem 0 0
}

.about-copy .section-copy:first-of-type {
    letter-spacing: .003em;
    color: var(--navy-panel-text);
    font-size: clamp(1.16rem, .72vw, 1.44rem);
    line-height: 1.76
}

.about-stage .section-heading {
    color: var(--navy-panel-text)
}

.about-stage .section-copy {
    color: var(--navy-panel-text-muted)
}

.about-stage .section-copy.muted {
    color: var(--navy-panel-text-soft)
}

.service-tile,
.about-stage {
    box-shadow: var(--panel-shadow-rest);
    will-change: transform, box-shadow;
    transition: transform var(--panel-pop-duration) var(--panel-pop-ease), box-shadow var(--panel-pop-duration) var(--panel-pop-ease), border-color var(--panel-pop-duration) ease
}

.service-tile:focus-within,
.about-stage:focus-within {
    transform: translateY(calc(var(--panel-pop-distance) * -1));
    box-shadow: var(--panel-shadow-pop)
}

@media (hover:hover) and (pointer:fine) {

    .service-tile:hover,
    .about-stage:hover {
        transform: translateY(calc(var(--panel-pop-distance) * -1));
        box-shadow: var(--panel-shadow-pop)
    }

    .references-marquee:hover .references-track {
        animation-play-state: paused
    }
}

.references-stage {
    border-top: 1px solid var(--line);
    padding-top: calc(var(--section-divider-space) + .8rem);
    padding-bottom: clamp(1.4rem, 2vw, 2.2rem);
    position: relative
}

.references-title-wrap {
    margin-bottom: .85rem
}

.references-intro {
    text-align: center;
    color: #50565ef2;
    max-width: 58ch;
    margin: 0 auto;
    font-size: clamp(1.04rem, .52vw, 1.16rem);
    line-height: 1.74
}

.references-empty {
    margin: 1rem auto 0;
    color: rgba(91, 96, 103, 0.95);
    text-align: center
}

.references-marquee {
    --references-gap: clamp(2rem, 4vw, 3.4rem);
    --references-side-pad: clamp(3rem, 9vw, 8rem);
    align-items: center;
    gap: var(--references-gap);
    width: 100vw;
    min-height: clamp(116px, 10.6vw, 148px);
    padding-inline: var(--references-side-pad);
    margin: 5.9rem calc(50% - 50vw) 2rem;
    display: flex;
    position: relative;
    overflow: hidden
}

.references-marquee.is-editing {
    width: min(1320px, calc(100vw - 2rem));
    min-height: 0;
    padding-inline: 0;
    margin: 2.6rem auto 0;
    display: block;
    overflow: visible
}

.references-marquee.is-editing:before,
.references-marquee.is-editing:after,
.references-marquee.is-editing .references-track[aria-hidden=true] {
    display: none
}

.references-marquee.is-editing .references-track {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    min-width: 0;
    animation: none;
    display: grid
}

.references-marquee.is-editing .reference-logo-item {
    width: 100%;
    height: clamp(90px, 8vw, 114px);
    padding: .9rem 1rem;
    border: 1px solid rgba(18, 25, 32, 0.12);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(243, 238, 229, 0.78))
}

.references-marquee.is-editing .reference-logo-item img {
    width: 100%;
    height: 100%;
    opacity: 1
}

.references-marquee:before,
.references-marquee:after {
    content: "";
    width: var(--references-side-pad);
    pointer-events: none;
    z-index: 3;
    position: absolute;
    top: -2px;
    bottom: -2px
}

.references-marquee:before {
    background: linear-gradient(to right, var(--paper) 34%, #f3f1ee00);
    left: 0
}

.references-marquee:after {
    background: linear-gradient(to left, var(--paper) 34%, #f3f1ee00);
    right: 0
}

.references-track {
    align-items: center;
    gap: var(--references-gap);
    flex: none;
    min-width: max-content;
    animation: 44s linear infinite references-marquee-scroll;
    display: flex
}

.reference-logo-item {
    flex: none;
    place-items: center;
    width: clamp(196px, 19vw, 258px);
    height: clamp(92px, 8vw, 114px);
    display: grid
}

.reference-logo-item img {
    object-fit: contain;
    object-position: center;
    filter: grayscale()contrast(1.08)brightness(.82);
    opacity: .88;
    width: 100%;
    height: 100%;
    transition: opacity .19s, filter .19s
}

.references-marquee:hover .reference-logo-item img {
    opacity: 1;
    filter: grayscale()contrast(1.14)brightness(.7)
}

@keyframes references-marquee-scroll {
    0% {
        transform: translate(0)
    }

    to {
        transform: translateX(calc(-100% - var(--references-gap)))
    }
}

@media (prefers-reduced-motion:reduce) {

    .service-tile,
    .about-stage {
        transition: border-color .12s
    }

    .service-tile:hover,
    .service-tile:focus-within,
    .about-stage:hover,
    .about-stage:focus-within {
        transform: none
    }

    .references-marquee {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-inline: .5rem;
        overflow-x: auto
    }

    .references-track {
        animation: none
    }

    .references-track[aria-hidden=true] {
        display: none
    }

    .reference-logo-item img {
        transition: none
    }
}

main {
    gap: clamp(5rem, 7vw, 7rem);
    padding-top: 4rem;
    padding-bottom: 7rem
}

#tjanster,
#helhet,
#projekt,
#om-oss,
#referenser,
#kontakt {
    scroll-margin-top: 7.5rem
}

.ornament-title {
    letter-spacing: -.055em;
    font-size: clamp(2.45rem, 4.2vw, 4.3rem);
    font-weight: 800
}

.section-heading {
    max-width: 12ch
}

.usp-stage {
    border-top: 0;
    padding-top: 0
}

.usp-shell {
    box-shadow: none;
    background: 0 0;
    border: 0;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .78fr);
    gap: clamp(1.5rem, 2.8vw, 2.6rem);
    padding: 0;
    overflow: visible
}

.usp-shell:before {
    display: none
}

.usp-copy-block {
    border-radius: calc(var(--panel-radius) + .35rem);
    background: radial-gradient(circle at 0 0, #ffffffd6, #fff0 32%), linear-gradient(#fffffff5, #f5f1e9e6);
    border: 1px solid #18202b14;
    padding: clamp(1.8rem, 3.4vw, 3rem);
    box-shadow: 0 26px 52px #151b2314, inset 0 1px #ffffffeb
}

.usp-copy-block:before {
    content: "";
    background: linear-gradient(90deg, #ff7a00f5, #ff7a002e);
    border-radius: 999px;
    width: 4.2rem;
    height: 4px;
    position: absolute;
    top: clamp(1.4rem, 2.6vw, 2.2rem);
    left: clamp(1.8rem, 3.4vw, 3rem)
}

.usp-copy-block>.section-kicker {
    margin-top: 1rem
}

.usp-heading {
    color: #11171ffa;
    max-width: 10ch
}

.usp-copy-block .section-copy {
    color: #525b68f5
}

.usp-checklist {
    gap: .9rem;
    margin-top: 2rem
}

.usp-check-item {
    background: #ffffffd6;
    border: 1px solid #171e2814;
    border-radius: 1.1rem;
    padding: .95rem 1rem;
    box-shadow: 0 14px 24px #171e280d, inset 0 1px #ffffffe6
}

.usp-check-icon {
    background: #ff7a001f;
    border-radius: 50%;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-top: 0;
    font-size: 1.15rem;
    display: grid
}

.usp-quote-card {
    border-radius: calc(var(--panel-radius) + .35rem);
    padding: clamp(1.8rem, 3vw, 2.6rem)
}

.usp-quote-title {
    max-width: 8ch
}

.projects-stage {
    border-top: 0;
    padding-top: 0
}

.projects-head {
    align-items: end
}

.projects-title-wrap {
    grid-column: 1;
    justify-self: start
}



.projects-intro {
    text-align: left;
    color: #50565fe6;
    max-width: 46ch;
    margin: .8rem 0 0
}

.projects-grid {
    gap: 1.45rem
}

.project-tile {
    background: linear-gradient(#12171efa, #0a0d12fa), linear-gradient(90deg, #ff7a0014, #ff7a0000);
    border-color: #10151c0f;
    box-shadow: 0 26px 46px #080b102e, inset 0 1px #ffffff0a
}

.project-tile .service-tile-media {
    border-bottom-color: #ffffff14
}

.project-tile .service-tile-media:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(#070a0f0a, #070a0f61);
    position: absolute;
    inset: 0
}

.project-tile .service-tile-copy {
    background: linear-gradient(#10141bdb, #0a0d12fa)
}

.project-tile .service-tile-copy:before {
    color: #ffb370f5;
    background: #ff7a001f
}

.project-tile:first-child .service-tile-media {
    border-right-color: #ffffff14
}

.project-tile:first-child .service-tile-copy:before {
    color: #ffba80fa;
    background: #ff7a0029
}

.project-tile .service-tile-title,
.project-tile .service-tile-text {
    color: #f5f7faf5
}

.project-tile .service-tile-text {
    color: #d1dae6d1
}

.services-stage {
    background: radial-gradient(circle at 18% 0, #ff7a001f, #ff7a0000 28%), linear-gradient(#090b0d 0%, #0d1014 100%);
    border-top: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(5rem, 8vw, 7rem) clamp(1rem, 3.8vw, 3rem);
    position: relative;
    overflow: hidden
}

.services-stage:before {
    content: "";
    opacity: .34;
    pointer-events: none;
    background-image: linear-gradient(#ffffff09 1px, #0000 1px), linear-gradient(90deg, #ffffff06 1px, #0000 1px);
    background-size: 120px 120px;
    position: absolute;
    inset: 0
}

.services-stage:after {
    content: "";
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(circle, #ff7a0024, #ff7a0000);
    border-radius: 50%;
    width: 36rem;
    position: absolute;
    inset: auto -12% -32% auto
}

.services-shell {
    width: min(1320px, 100%);
    box-shadow: none;
    background: 0 0;
    border: 0;
    margin: 0 auto;
    padding: 0
}

.services-shell:before {
    display: none
}

.services-stage-head {
    gap: .55rem;
    max-width: 44rem
}

.services-stage .section-kicker,
.services-stage .ornament-title,
.services-stage .services-intro {
    color: #f6f8fbfa
}

.services-stage .services-intro {
    color: #c2ccdab8
}

.services-stage-head .ornament-title-wrap:after {
    background: linear-gradient(90deg, #ff7a00f5, #ff7a0033)
}

.services-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 3rem
}

.service-tile {
    background: linear-gradient(#14181efa, #0a0c10fa), linear-gradient(90deg, #ff7a0014, #ff7a0000);
    border-color: #ffffff14;
    border-radius: 1.7rem;
    box-shadow: 0 24px 40px #05080c38, inset 0 1px #ffffff0a
}

.services-flow .service-tile {
    background: linear-gradient(#13171dfa, #0a0c10fa), linear-gradient(90deg, #ff7a0014, #ff7a0000);
    border-color: #ffffff12
}

.service-tile-media {
    background: #0d1014;
    border-bottom-color: #ffffff14;
    position: relative
}

.services-flow .service-tile-media {
    aspect-ratio: 16/12
}

.service-tile-media:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(#080a0e14, #080a0e75), linear-gradient(90deg, #ff7a000d, #ff7a0000);
    position: absolute;
    inset: 0
}

.service-tile-media img {
    filter: contrast(1.05)saturate(.82)brightness(.72)
}

.service-tile-copy {
    gap: .86rem;
    padding: 1.45rem 1.45rem 1.55rem
}

.services-flow .service-tile-copy {
    min-block-size: 13rem;
    padding: 1.4rem
}

.services-flow .service-tile-copy:before {
    content: "";
    background: linear-gradient(90deg, #f17a10f2, rgba #f17a1038 (241, 122, 16, .22));
    border-radius: 999px;
    width: clamp(74px, 8vw, 50px);
    height: 4px
}

.service-tile-title {
    color: #f6f8fbfa
}

.services-flow .service-tile-title {
    max-width: none;
    font-size: clamp(1.28rem, 1.4vw, 1.64rem);
    line-height: 1.16
}

.service-tile-text {
    color: #cdd6e2c7
}

.services-flow .service-tile-text {
    color: #cdd6e2c2;
    max-width: none
}

.about-stage {
    border-radius: 2rem;
    padding: 1.75rem
}

.about-photo {
    border-radius: 1.5rem
}

.about-copy .section-copy:first-of-type {
    color: #f1f5fcf5
}

.references-stage {
    border-top: 0;
    padding-top: 0
}

.references-intro {
    color: #4d545de6
}

.service-tile-media {
    overflow: hidden
}

.service-tile-media:after,
.project-tile .service-tile-media:after {
    opacity: 0;
    background: 0 0
}

.service-tile-media img {
    filter: contrast(1.08)saturate(1.06)brightness(.96);
    transition: transform .26s, filter .26s;
    transform: scale(1.001)
}

.project-tile .service-tile-media img {
    filter: contrast(1.08)saturate(1.08)brightness(.98)
}

@media (hover:hover) and (pointer:fine) {

    .service-tile:hover .service-tile-media img,
    .service-tile:focus-within .service-tile-media img {
        filter: contrast(1.1)saturate(1.12)brightness();
        transform: scale(1.04)
    }

    .service-tile:hover .service-tile-media:after,
    .service-tile:focus-within .service-tile-media:after,
    .project-tile:hover .service-tile-media:after,
    .project-tile:focus-within .service-tile-media:after {
        opacity: 0
    }
}

.contact-stage {
    border-top: 1px solid var(--line);
    padding-top: calc(var(--section-divider-space) + .8rem);
    position: relative
}

.contact-layout {
    gap: 1.6rem;
    display: grid
}

.contact-panel-heading {
    margin: 0
}

.contact-panel-copy {
    max-width: 50ch;
    margin: .95rem 0 0
}

.contact-people-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    display: grid
}

.contact-person-card,
.contact-base-card {
    border-radius: var(--panel-radius);
    background: radial-gradient(circle at 12% 12%, #fffffff2, #fff0 40%), linear-gradient(145deg, #f7f4effa, #ece7e0fa);
    border: 1px solid #bfb9afe0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 36px #24282e14, inset 0 1px #ffffffb8
}

.contact-person-card {
    border-top: 3px solid #f17a10b3;
    gap: .8rem;
    padding: 1.18rem 1.14rem 1.16rem;
    display: grid
}

.contact-person-card:after,
.contact-base-card:after {
    content: "";
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(circle, #f17a1026, #f17a1000);
    border-radius: 50%;
    width: 220px;
    position: absolute;
    inset: auto -16% -44% auto
}

.contact-person-role,
.contact-base-label {
    z-index: 1;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #a4530a;
    margin: 0;
    font-size: .74rem;
    font-weight: 800;
    position: relative
}

.contact-person-name {
    z-index: 1;
    font-family: var(--font-heading);
    color: #24282efa;
    margin: 0;
    font-size: clamp(1.28rem, 1.1vw, 1.54rem);
    line-height: 1.16;
    position: relative
}

.contact-person-links {
    z-index: 1;
    gap: .58rem;
    display: grid;
    position: relative
}

.contact-person-link,
.contact-base-line {
    color: #32373ef5;
    background: linear-gradient(#ffffffd1, #f5f2edf5);
    border: 1px solid #c4bfb6f0;
    border-radius: .88rem;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 3rem;
    padding: .82rem .92rem;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.42;
    text-decoration: none;
    display: inline-flex;
    box-shadow: inset 0 1px #ffffffb3, 0 10px 18px #22272e0f
}

.contact-person-link:hover,
.contact-base-line:hover {
    color: #8b4302;
    border-color: #e26c006b
}

.contact-person-link .material-symbols-outlined,
.contact-base-line .material-symbols-outlined,
.contact-directions-link .material-symbols-outlined {
    color: var(--ember);
    flex: none;
    font-size: 1.1rem
}

.contact-location-layout {
    grid-template-columns: minmax(320px, .4fr) minmax(0, .6fr);
    align-items: stretch;
    gap: 1.2rem;
    display: grid
}

.contact-base-card {
    background: radial-gradient(circle at 88% 16%, #ff933929, #ff933900 26%), linear-gradient(155deg, #18243b 0%, #101a2e 56%, #0d1528 100%);
    border-color: #10192be6;
    align-content: start;
    gap: .72rem;
    padding: 1.4rem 1.25rem 1.32rem;
    display: grid;
    box-shadow: 0 24px 44px #0d121d38, inset 0 1px #ffffff0d
}

.contact-base-card .contact-base-label {
    color: #ffb572f5
}

.contact-base-card .contact-base-line {
    box-shadow: none;
    color: #eff3faf5;
    background: #ffffff12;
    border-color: #ffffff1a
}

.contact-base-card .contact-base-line:hover {
    color: #fff;
    border-color: #ffb47057
}

.contact-base-card .contact-base-line .material-symbols-outlined,
.contact-base-card .contact-directions-link .material-symbols-outlined {
    color: #ffb572fa
}

.contact-base-line-static {
    margin: 0
}

.contact-directions-link {
    color: #ffecdcf5;
    background: #ffb5721a;
    border: 1px solid #ffb57247;
    border-radius: 999px;
    align-items: center;
    gap: .3rem;
    width: fit-content;
    min-height: 2.7rem;
    padding: .68rem .92rem;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex
}

.contact-directions-link:hover {
    color: #fff;
    background: #ffb57229
}

.map-card {
    border-radius: calc(var(--panel-radius) + .05rem);
    isolation: isolate;
    background: linear-gradient(145deg, #e6e3dd 0%, #f2efe8 52%, #e7e2da 100%);
    border: 1px solid #181f2c24;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 46px #2023291f, inset 1px 1px #ffffff29
}

.contact-map-card {
    min-height: 420px
}

.map-card:after {
    content: "";
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at 8% 14%, #fafcff29 0%, #fafcff0a 36%, #0000 60%), linear-gradient(#ffffff0f, #090c122e);
    position: absolute;
    inset: 0
}

.map-card:before {
    content: "";
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, #f17a1033 0%, #f17a100a 52%, #0000 100%);
    border-radius: 999px;
    width: 78%;
    height: 78%;
    position: absolute;
    inset: auto -32% -54% auto
}

.map-canvas {
    z-index: 1;
    transition: opacity .22s, transform .32s;
    position: absolute;
    inset: 0
}

.map-card:not(.is-ready) .map-canvas {
    opacity: .52;
    transform: scale(1.03)
}

.map-card.is-ready .map-canvas {
    opacity: 1;
    transform: scale(1)
}

.map-card.is-fallback .map-canvas {
    display: none
}

.map-fallback {
    z-index: 3;
    color: #fffffff0;
    text-align: center;
    background: radial-gradient(circle at 18% 18%, #ffffff42 0%, #0000 45%), linear-gradient(135deg, #353942cc, #1c2026eb);
    justify-content: center;
    align-items: center;
    gap: .55rem;
    padding: 1.2rem;
    display: none;
    position: absolute;
    inset: 0
}

.map-card.is-fallback .map-fallback {
    display: flex
}

.map-fallback .material-symbols-outlined {
    font-size: 1.45rem
}

.map-fallback p {
    margin: 0;
    font-size: .94rem;
    font-weight: 600
}

.map-card .mapboxgl-control-container .mapboxgl-ctrl {
    border: 1px solid #2a2e3633;
    border-radius: .6rem;
    box-shadow: 0 6px 14px #171b2033
}

.map-card .mapboxgl-ctrl-top-right {
    top: 1rem;
    right: 1rem
}

.map-marker-pin {
    color: #fff;
    background: linear-gradient(#ff8f1f, #eb6c00);
    border: 2px solid #ffffffc7;
    border-radius: 50%;
    place-items: center;
    width: 46px;
    height: 46px;
    display: grid;
    box-shadow: 0 14px 26px #eb6c007a, 0 0 0 7px #eb6c0036
}

.map-marker-pin .material-symbols-outlined {
    font-size: 1.34rem;
    line-height: 1
}

.contact-stage {
    border-top: 0;
    padding-top: 0
}

.contact-layout {
    gap: 1.8rem
}

.contact-copy {
    max-width: 50rem
}

.contact-panel-copy {
    color: #525a67f2;
    max-width: 46ch
}

.contact-people-grid {
    gap: 1.2rem
}

.contact-person-card,
.contact-base-card {
    border-radius: 1.55rem
}

.contact-person-card {
    background: radial-gradient(circle at 0 0, #ffffffd1, #fff0 34%), linear-gradient(#fffffff5, #f3eee5f0);
    border-color: currentColor #12182014 #12182014;
    border-top-style: none;
    border-top-width: 0;
    padding: 1.35rem 1.25rem 1.25rem;
    box-shadow: 0 22px 40px #12182014, inset 0 1px #ffffffeb
}

.contact-person-card:before {
    content: "";
    background: linear-gradient(90deg, #ff7a00f5, #ff7a0029);
    width: 100%;
    height: 4px;
    position: absolute;
    inset: 0 auto auto 0
}

.contact-person-link,
.contact-base-line {
    border-radius: 1rem;
    min-height: 3.15rem
}

.contact-person-link {
    background: linear-gradient(#ffffffeb, #f6f2eceb);
    border-color: #12182014;
    box-shadow: 0 12px 22px #151b230d, inset 0 1px #ffffffeb
}

.contact-base-card {
    background: radial-gradient(circle at 92% 12%, #ff7a0024, #ff7a0000 26%), linear-gradient(160deg, #161b22 0%, #0b0f14 58%, #171d25 100%);
    border-color: #0c1016eb;
    padding: 1.5rem 1.35rem 1.4rem;
    box-shadow: 0 28px 52px #070a0e3d, inset 0 1px #ffffff0a
}

.contact-base-card .contact-base-line {
    background: #ffffff0f;
    border-color: #ffffff14
}

.contact-directions-link {
    background: #ff7a001f;
    border-color: #ffa4553d;
    min-height: 3rem;
    padding-inline: 1rem
}

.contact-location-layout {
    gap: 1.3rem
}

.map-card {
    background: linear-gradient(145deg, #dcd8d0 0%, #f0ece4 54%, #e1ddd5 100%);
    border-color: #1319211a;
    border-radius: 1.65rem;
    box-shadow: 0 28px 50px #141a221f, inset 1px 1px #ffffff3d
}

.map-card:after {
    background: radial-gradient(circle at 8% 14%, #ffffff2e 0%, #ffffff0f 36%, #0000 60%), linear-gradient(#ffffff14, #090c122e)
}

.map-card .mapboxgl-canvas {
    filter: grayscale(.94)saturate(.16)contrast(1.04)brightness(.96)
}

.map-popup .mapboxgl-popup-content {
    color: #f6f9ff;
    background: #171a21e6;
    border: 1px solid #ffffff61;
    border-radius: .78rem;
    padding: .55rem .62rem;
    box-shadow: 0 12px 24px #06080c6b
}

.map-popup .mapboxgl-popup-tip {
    border-top-color: #171a21e6
}

.map-popup-title {
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fffffff0;
    margin: 0;
    font-size: .74rem;
    font-weight: 700
}

.map-popup-address {
    color: #f0f4ffe6;
    margin: .2rem 0 0;
    font-size: .83rem;
    line-height: 1.3
}

.footer-wrap {
    border-top: 1px solid var(--line);
    color: #2f3136de;
    background: radial-gradient(circle at 14% 8%, #fff9, #fff0 30%), linear-gradient(#f0ece6f5, #e9e5dffa);
    margin-top: 5.2rem
}

.footer-inner {
    gap: 1.7rem;
    width: 100%;
    padding: 2.8rem clamp(1rem, 3.8vw, 3.8rem) 1.18rem;
    display: grid
}

.footer-band {
    gap: 1.7rem;
    display: grid
}

.footer-cta {
    text-transform: uppercase;
    letter-spacing: .05em;
    width: fit-content;
    margin-top: .56rem
}

.footer-wrap {
    color: #dce4efd1;
    background: radial-gradient(circle at 16% 0, #ff7a001f, #ff7a0000 26%), linear-gradient(#0b0d10 0%, #11161c 100%);
    border-top: 0;
    margin-top: 6rem
}

.footer-inner {
    padding-top: 3.4rem;
    padding-bottom: 1.4rem
}

.footer-band {
    gap: 1.25rem
}

.footer-inner {
    gap: 1.1rem;
    padding-top: 2.1rem
}

.footer-band {
    background: linear-gradient(#12171ef0, #0a0d12fa), linear-gradient(90deg, #ff7a0014, #ff7a0000);
    border: 1px solid #ffffff14;
    border-radius: 1.35rem;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 1.4rem;
    padding: 1.2rem 1.35rem;
    box-shadow: 0 22px 38px #05080c2e, inset 0 1px #ffffff0a
}

.footer-brand-block {
    align-content: center;
    gap: .7rem;
    display: grid
}

.footer-brand-link {
    width: fit-content;
    display: inline-flex
}

.footer-logo-white {
    width: clamp(154px, 18vw, 220px);
    height: auto;
    display: block
}

.footer-mini-copy {
    color: #bec9d8b8;
    max-width: 28ch;
    margin: 0;
    font-size: .9rem;
    line-height: 1.55
}

.footer-brand-block .footer-cta {
    margin-top: .1rem
}

.footer-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    display: grid
}

.footer-nav a {
    color: #ecf1f8e0;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #ffffff0a;
    border: 1px solid #ffffff14;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    min-height: 3rem;
    padding: .7rem .95rem;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .16s, background .16s, color .16s, transform .16s;
    display: inline-flex
}

.footer-nav a:hover {
    color: #fff;
    background: #ff7a001a;
    border-color: #ff953e47;
    transform: translateY(-1px)
}

.footer-bottom {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: .2rem;
    display: flex
}

.footer-made-with {
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #aebacaad;
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none
}

.footer-made-with span {
    color: #ffb16ceb
}

.footer-made-with:hover,
.footer-made-with:focus-visible {
    text-decoration: underline;
    text-underline-offset: .25em
}

@media (width<=1023px) {
    .topbar-row {
        align-items: flex-start
    }

    .hero-topbar {
        padding: .78rem .78rem 0
    }

    .hero-nav-shell {
        width: 100%;
        box-shadow: none;
        backdrop-filter: none;
        background: 0 0;
        border: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        row-gap: .9rem;
        padding: 0
    }

    .hero-brand-img {
        width: clamp(124px, 34vw, 178px);
        max-width: 54vw
    }

    .hero-nav {
        order: unset;
        width: 100%;
        box-shadow: none;
        backdrop-filter: none;
        background: 0 0;
        border: 0;
        flex-basis: auto;
        padding: 0;
        display: block
    }

    .hero-nav-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: center;
        align-items: center;
        gap: .12rem .22rem;
        width: 100%;
        max-width: min(680px, 100%);
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        display: grid;
        background: rgba(0, 0, 0, 0.9);
        border-radius: 0.6rem;
        padding: 0.8rem;

    }

    .hero-nav a {
        letter-spacing: .07em;
        text-align: center;
        background: 0 0;
        width: 100%;
        min-height: 0;
        padding: .36rem .4rem;
        font-size: clamp(.74rem, 1.6vw, .96rem);
        display: block
    }

    .hero-nav a:nth-child(-n+4) {
        color: #f5f8fdfa;
        font-weight: 700
    }

    .hero-nav a+a:before {
        display: none
    }

    .hero-nav a:not(:last-child) {
        border-bottom: 0
    }

    .hero-stage,
    .hero-content {
        min-height: 78svh
    }

    .hero-content {
        align-items: flex-start;
        padding: 10.2rem 1rem 2.2rem
    }

    .hero-text {
        max-width: 34ch;
        font-size: clamp(1.04rem, 3.1vw, 1.26rem)
    }

    .hero-copy.no-title .hero-text {
        max-width: 13ch;
        font-size: clamp(1.84rem, 5.4vw, 2.9rem)
    }

    .hero-eyebrow {
        letter-spacing: .09em;
        max-width: 40ch;
        margin-top: .66rem;
        font-size: clamp(.76rem, 1.9vw, .88rem);
        line-height: 1.5
    }

    main {
        gap: 5rem;
        padding-top: 3.4rem;
        padding-bottom: 5.2rem
    }

    .about-photo {
        min-height: clamp(300px, 52vw, 500px)
    }

    .about-stage {
        padding: 1.2rem
    }

    .services-shell {
        padding: 1.45rem
    }

    .usp-shell {
        grid-template-columns: 1fr;
        padding: 1.35rem
    }

    .about-copy {
        max-width: none
    }

    .services-flow {
        gap: 1.35rem
    }

    .services-flow .service-tile-copy {
        min-block-size: 11.4rem;
        padding: 1.3rem 1.2rem 1.34rem
    }

    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem
    }

    .project-tile:first-child {
        grid-column: 1/-1
    }

    .project-tile:first-child .service-tile-copy {
        padding: 1.5rem 1.4rem 1.56rem
    }

    .project-tile:first-child .service-tile-title {
        font-size: 1.5rem
    }

    .service-tile-copy {
        padding: 1.28rem 1.2rem 1.34rem
    }

    .service-tile-title {
        font-size: 1.2rem
    }

    .service-tile-text {
        font-size: .99rem;
        line-height: 1.74
    }

    .references-marquee {
        --references-gap: 2.2rem;
        --references-side-pad: clamp(1.5rem, 4.8vw, 2.6rem)
    }

    .references-marquee.is-editing .references-track {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .reference-logo-item {
        width: 174px;
        height: 74px
    }

    .references-track {
        animation-duration: 38s
    }

    .contact-people-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .contact-location-layout {
        grid-template-columns: 1fr
    }

    .contact-map-card {
        min-height: 360px
    }
}

@media (width>=1024px) {
    .footer-band {
        grid-template-columns: minmax(0, 1fr) minmax(0, .92fr) minmax(0, 1.26fr);
        align-items: start
    }

    .about-stack {
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        align-items: stretch;
        gap: 1.8rem
    }

    .about-photo {
        min-height: clamp(420px, 38vw, 620px)
    }
}

@media (width<=640px) {
    :root {
        --section-divider-space: 1.4rem
    }

    main {
        gap: 4.2rem;
        padding-top: 2.6rem;
        padding-bottom: 4.5rem
    }

    .section-heading {
        letter-spacing: -.04em;
        font-size: clamp(1.72rem, 7vw, 2.34rem)
    }

    .section-copy {
        font-size: 1.02rem;
        line-height: 1.76
    }

    .about-copy .section-copy:first-of-type,
    .contact-panel-copy {
        font-size: 1.06rem;
        line-height: 1.7
    }

    .hero-topbar {
        padding: .62rem .56rem 0
    }

    .hero-nav-shell {
        border-radius: 0;
        row-gap: .72rem;
        padding: 0
    }

    .hero-brand-img {
        width: clamp(112px, 42vw, 156px);
        max-width: 60vw
    }

    .hero-nav {
        box-shadow: none;
        backdrop-filter: none;
        background: 0 0;
        border: 0;
        padding: 0;
        display: block
    }

    .hero-nav-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: center;
        align-items: center;
        gap: 0 .1rem;
        width: 100%;
        max-width: min(430px, 100%);
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        /* padding: 0; */
        display: grid
    }

    .hero-nav a {
        letter-spacing: .07em;
        text-align: center;
        width: 100%;
        padding: .32rem .3rem;
        font-size: clamp(.68rem, 2.2vw, .8rem);
        display: block
    }

    .hero-nav a+a:before {
        display: none
    }

    .hero-nav a:not(:last-child) {
        border-bottom: 0
    }

    .hero-nav-action {
        margin-left: 0
    }

    .hero-nav a.hero-nav-action {
        grid-column: 1/-1;
        margin-top: .2rem
    }

    .hero-stage,
    .hero-content {
        min-height: 80svh
    }

    .hero-content {
        align-items: flex-start;
        padding: 11.4rem .72rem 1.8rem
    }

    .hero-copy {
        border-radius: .64rem;
        padding: 1rem .92rem 1.1rem
    }

    .footer-inner {
        padding: 1.5rem 1rem .88rem
    }

    .btn {
        width: 100%
    }

    .services-intro {
        text-align: center;
        margin-top: .2rem;
        font-size: 1.01rem;
        line-height: 1.76
    }

    .hero-text {
        max-width: 24ch;
        font-size: clamp(1rem, 4.6vw, 1.2rem)
    }

    .hero-copy.no-title .hero-text {
        max-width: 12ch;
        font-size: clamp(1.72rem, 8vw, 2.45rem)
    }

    .hero-eyebrow {
        letter-spacing: .13em;
        max-width: 36ch;
        font-size: clamp(.69rem, 2.2vw, .8rem)
    }

    .hero-direct-grid {
        grid-template-columns: 1fr;
        margin-top: .92rem
    }

    .hero-direct-card {
        padding: .76rem .82rem .8rem
    }

    .hero-meta-row {
        width: 100%
    }

    .hero-meta-pill {
        justify-content: flex-start;
        width: 100%
    }

    .usp-copy-block,
    .usp-shell,
    .usp-quote-card,
    .contact-person-card,
    .contact-base-card {
        border-radius: .88rem
    }

    .contact-people-grid {
        grid-template-columns: 1fr
    }

    .services-flow {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-top: 1.95rem
    }

    .services-shell {
        padding: 1.15rem 1rem 1.05rem
    }

    .services-stage-head {
        text-align: left;
        justify-items: start
    }

    .services-stage-head .ornament-title-wrap {
        align-items: flex-start
    }

    .services-stage-head .services-intro {
        text-align: left
    }

    .usp-shell {
        gap: 1.1rem;
        padding: 0rem
    }

    .usp-copy {
        max-width: none
    }

    .usp-checklist {
        gap: .9rem;
        margin-top: 1.35rem
    }

    .usp-quote-card {
        padding: 1.12rem 1rem
    }

    .usp-quote-title {
        max-width: 11ch;
        font-size: clamp(1.6rem, 6vw, 2rem)
    }

    .usp-quote-copy {
        font-size: .98rem;
        line-height: 1.72
    }

    .projects-intro {
        text-align: left;
        margin-top: .2rem;
        font-size: 1.01rem;
        line-height: 1.76
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-top: 1.45rem
    }

    .project-tile:first-child {
        grid-column: auto;
        grid-template-columns: none;
        display: flex
    }

    .project-tile:first-child .service-tile-media {
        aspect-ratio: 16/10;
        border-bottom: 1px solid #d6cfc4db;
        border-right: 0;
        min-height: auto
    }

    .project-tile:first-child .service-tile-copy {
        padding: 1.18rem 1.06rem
    }

    .project-tile:first-child .service-tile-title {
        font-size: 1.12rem;
        line-height: 1.2
    }

    .project-tile:first-child .service-tile-text {
        max-width: none;
        font-size: .94rem;
        line-height: 1.72
    }

    .references-intro {
        text-align: center;
        line-height: 1.7
    }

    .references-marquee {
        --references-gap: 1.6rem;
        --references-side-pad: 1rem;
        margin-top: 1.2rem
    }

    .references-marquee.is-editing .references-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem
    }

    .references-marquee.is-editing .reference-logo-item {
        min-height: 88px;
        padding: .75rem .85rem
    }

    .reference-logo-item {
        width: 146px;
        height: 62px
    }

    .references-track {
        animation-duration: 32s
    }

    .about-stack {
        gap: .94rem
    }

    .service-tile {
        border-radius: .82rem
    }

    .service-tile-media {
        aspect-ratio: 16/11
    }

    .service-tile-copy {
        padding: 1.18rem 1.06rem
    }

    .service-tile-title {
        font-size: 1.12rem
    }

    .service-tile-text {
        margin-top: 0;
        font-size: .94rem;
        line-height: 1.72
    }

    .services-flow .service-tile-copy {
        min-block-size: 0;
        padding: 1.18rem 1.06rem
    }

    .projects-head .btn {
        width: auto
    }

    .contact-person-link,
    .contact-base-line {
        font-size: .94rem
    }

    .contact-map-card {
        min-height: 300px
    }
}

@media (width>=1024px) {
    .footer-band {
        grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr)
    }
}

@media (width<=1023px) {
    .hero-nav-shell {
        /* background: linear-gradient(#12161ceb, #0a0c10db), linear-gradient(90deg, #ff7a0014, #ff7a0000);
        border: 1px solid #ffffff14;
        border-radius: .95rem; */
        gap: .7rem;
        padding: .62rem .72rem .72rem;
        box-shadow: 0 18px 34px #04070a3d, inset 0 1px #ffffff0a
    }

    .hero-nav {
        width: 100%
    }

    .hero-nav-inner {
        gap: .25rem;
        max-width: none
    }

    .hero-nav a {
        border-radius: 999px;
        padding: .5rem .48rem;
        font-size: .82rem
    }

    .hero-nav a.hero-nav-action {
        margin-top: .3rem
    }

    .hero-content {
        padding-top: 13.5rem;
        padding-bottom: 3rem
    }

    .hero-copy {
        max-width: 44rem
    }

    .hero-copy.no-title .hero-text {
        max-width: 10ch;
        font-size: clamp(3rem, 8vw, 4.7rem)
    }

    .hero-copy.no-title .hero-text-display {
        max-width: 9ch;
        font-size: clamp(3rem, 8vw, 4.7rem)
    }

    .hero-direct-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .usp-shell {
        grid-template-columns: 1fr
    }

    .projects-head {
        grid-template-columns: 1fr auto
    }

    .projects-title-wrap {
        grid-column: 1
    }

    .projects-head .btn {
        grid-column: 2
    }

    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .services-stage {
        padding-block: 4.4rem
    }

    .services-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.15rem
    }

    .services-flow .service-tile-copy {
        min-block-size: 0
    }

    .contact-people-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .footer-band {
        grid-template-columns: 1fr;
        align-items: start
    }

    .footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (width<=640px) {
    main {
        gap: 4.3rem;
        padding-top: 2.8rem;
        padding-bottom: 5rem
    }

    .hero-nav-shell {
        border-radius: .85rem;
        padding: .58rem .6rem .68rem
    }

    .hero-brand-img {
        width: clamp(132px, 42vw, 170px);
        max-width: 62vw
    }

    .hero-nav-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .hero-nav a.hero-nav-action {
        grid-column: 1/-1
    }

    .hero-content {
        padding-top: 17rem;
        padding-bottom: 2.4rem
    }

    .hero-copy.no-title .hero-text {
        max-width: 9ch;
        font-size: clamp(2.45rem, 11vw, 3.4rem)
    }

    .hero-copy.no-title .hero-text-display {
        max-width: 8.5ch;
        font-size: clamp(2.45rem, 11vw, 3.4rem)
    }

    .hero-text {
        max-width: 22ch
    }

    .hero-eyebrow {
        margin-top: 1rem;
        padding: .3rem .72rem
    }

    .hero-direct-grid {
        grid-template-columns: 1fr;
        gap: .8rem
    }

    .usp-copy-block,
    .usp-quote-card,
    .service-tile,
    .about-stage,
    .contact-person-card,
    .contact-base-card,
    .map-card,
    .footer-band {
        border-radius: 1.15rem
    }

    .usp-copy-block {
        padding: 1.3rem 1.1rem 1.2rem
    }

    .usp-copy-block:before {
        top: 1rem;
        left: 1.1rem
    }

    .projects-head {
        grid-template-columns: 1fr;
        gap: .8rem
    }

    .projects-head .btn {
        grid-column: 1;
        justify-self: start
    }

    .projects-intro,
    .services-intro {
        text-align: left
    }

    .services-stage {
        padding: 3.8rem 1rem
    }

    .services-stage-head {
        text-align: left;
        justify-items: start
    }

    .services-stage-head .ornament-title-wrap {
        align-items: flex-start
    }

    .services-flow,
    .projects-grid,
    .contact-people-grid {
        grid-template-columns: 1fr
    }

    .project-tile:first-child {
        grid-column: auto;
        display: flex
    }

    .project-tile:first-child .service-tile-media {
        border-bottom: 1px solid #ffffff14;
        border-right: 0
    }

    .contact-location-layout {
        grid-template-columns: 1fr
    }

    .footer-inner {
        padding-top: 2rem
    }

    .footer-band {
        padding: 1rem
    }

    .footer-nav {
        grid-template-columns: 1fr
    }

    .footer-nav a {
        justify-content: flex-start;
        padding-inline: 1rem
    }

    .footer-bottom {
        align-items: flex-start
    }
}

@media (width<=1023px) {
    .hero-topbar {
        padding: 0
    }

    .topbar-row {
        align-items: stretch
    }

    .hero-nav-shell {
        border-radius: 0 0 .8rem .8rem;
        gap: .72rem;
        padding: .54rem .9rem .62rem
    }

    .hero-brand-badge {
        border-radius: 0;
        width: 4.7rem;
        height: 2.5rem
    }

    .hero-nav {
        flex-basis: 100%;
        width: 100%;
        margin-left: 0;
        display: none
    }

    .hero-nav-inner {
        flex-direction: column;
        align-items: stretch;
        gap: .28rem;
        padding-top: .15rem;
        display: flex
    }

    .hero-nav a {
        text-align: left;
        background: #ffffff08;
        border-radius: .85rem;
        width: 100%;
        padding: .64rem .82rem
    }

    .hero-nav a.hero-nav-action {
        text-align: left;
        background: 0 0;
        margin-top: .06rem;
        margin-left: 0;
        padding-inline: 0;
        color: #ff8a22 !important
    }

    .hero-content {
        padding-top: clamp(8rem, 18vw, 10rem)
    }
}

@media (width<=640px) {
    .hero-nav-shell {
        padding: .68rem .72rem .78rem
    }

    .hero-brand-badge {
        width: 4.3rem;
        height: 2.3rem
    }

    .hero-content {
        padding-top: 7.5rem
    }
}