/* CynCode — Editorial Commerce / Native PHP, CSS & JS. No build step. */
:root {
    --ink:#10272a;
    --ink-soft:#40595b;
    --muted:#526967;
    --paper:#fff;
    --pale:#f3f5f2;
    --line:#dbe3df;
    --cyan:#72e1d4;
    --cyan-dark:#076b66;
    --dark:#10272a;
    --dark-soft:#17373a;
    --max:1320px;
    --gutter:clamp(22px,4.3vw,76px);
    --radius:4px;
    --header-h:90px;
    --body:Arial,Helvetica,sans-serif;
    --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:120px
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:16px/1.65 var(--body);
    -webkit-font-smoothing:antialiased
}

button,input,textarea,select {
    font:inherit
}

button,a {
    -webkit-tap-highlight-color:transparent
}

button {
    cursor:pointer
}

a {
    color:inherit;
    text-decoration:none
}

a,button,input,textarea,select,summary {
    touch-action:manipulation
}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
    outline:3px solid #008b84;
    outline-offset:5px
}

p {
    margin:0 0 1.2em;
    color:var(--ink-soft)
}

h1,h2,h3 {
    margin:0;
    font-weight:600;
    letter-spacing:-.055em;
    line-height:1.1;
    text-wrap:balance
}

h1 {
    font-size:clamp(38px,4.3vw,68px)
}

h2 {
    font-size:clamp(32px,3.4vw,51px)
}

h3 {
    font-size:25px;
    letter-spacing:-.035em;
    line-height:1.2
}

ul,ol {
    padding-left:1.3em
}

img,svg {
    max-width:100%
}

svg {
    vertical-align:middle
}

.icon {
    width:22px;
    height:22px;
    flex-shrink:0
}

.container {
    width:min(var(--max),calc(100% - var(--gutter)*2));
    margin-inline:auto
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

.skip-link {
    position:fixed;
    left:20px;
    top:12px;
    z-index:200;
    transform:translateY(-160%);
    padding:12px 20px;
    background:var(--cyan);
    font-weight:bold
}

.skip-link:focus {
    transform:none
}

[hidden] {
    display:none!important
}

.small-note,.approval-note {
    font-size:14px;
    line-height:1.65;
    color:var(--muted);
    margin-top:22px
}

.eyebrow {
    display:flex;
    align-items:center;
    gap:11px;
    font:12px/1.7 var(--mono);
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:24px
}

.eyebrow-line {
    width:27px;
    height:2px;
    background:var(--cyan-dark);
    flex-shrink:0
}

.accent-text {
    color:var(--cyan)
}

.text-link {
    display:inline-flex;
    gap:24px;
    align-items:center;
    max-width:100%;
    font-size:14px;
    font-weight:600;
    border-bottom:1px solid currentColor;
    padding:7px 0
}

.text-link .icon {
    transition:transform .2s
}

.text-link:hover .icon {
    transform:translate(3px,-3px)
}

.actions {
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:32px
}

.button {
    border:1px solid transparent;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:15px 20px;
    min-height:53px;
    font-weight:600;
    font-size:13px;
    line-height:1.3;
    border-radius:2px;
    transition:background .2s,transform .2s,color .2s
}

.button-primary {
    background:var(--ink);
    color:#fff
}

.button-primary:hover {
    background:#235054;
    transform:translateY(-2px)
}

.button-secondary {
    background:transparent;
    border-color:#bccdca;
    color:var(--ink)
}

.button-secondary:hover {
    background:#e9f1ed;
    transform:translateY(-2px)
}

.button .icon {
    width:20px;
    height:20px
}

.live-dot {
    display:inline-block;
    width:7px;
    height:7px;
    background:var(--cyan-dark);
    border-radius:100%;
    flex-shrink:0
}

.dark-section {
    background:var(--dark);
    color:#fff
}

.dark-section p {
    color:#b7ccc9
}

.dark-section .eyebrow {
    color:#8fb7b3
}

.dark-section .button-primary {
    background:var(--cyan);
    color:var(--ink)
}

.dark-section .button-secondary {
    color:white;
    border-color:#527371
}

.dark-section .text-link {
    color:var(--cyan)
}

.pale-section {
    background:var(--pale)
}

/* Navigation */
.site-header {
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(16px)
}

.header-inner {
    max-width:1580px;
    width:calc(100% - var(--gutter)*2);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:var(--header-h);
    gap:35px
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    font-size:28px;
    font-weight:700;
    letter-spacing:-1.6px;
    white-space:nowrap;
    line-height:1
}

.brand-logo {
    display:block;
    width:160px;
    height:auto
}

.brand-mark {
    font-family:var(--mono);
    font-size:29px;
    letter-spacing:-6px;
    margin-right:4px;
    color:var(--cyan-dark);
    font-weight:500
}

.brand-dot {
    color:var(--cyan-dark)
}

.main-nav {
    display:flex;
    gap:28px;
    align-items:center;
    font-size:16px;
    font-weight:600;
    line-height:1.5
}

.main-nav>a:not(.nav-contact),.nav-dropdown>summary {
    padding:34px 0;
    position:relative
}

.main-nav>a:not(.nav-contact):after,.nav-dropdown>summary:after {
    content:'';
    position:absolute;
    bottom:21px;
    left:0;
    right:0;
    height:2px;
    background:var(--cyan-dark);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .2s
}

.main-nav>a:hover:after,.main-nav>a[aria-current]:after,.nav-dropdown>summary:hover:after,.nav-dropdown>summary.current:after {
    transform:scaleX(1)
}

.nav-contact {
    display:flex;
    align-items:center;
    gap:28px;
    background:var(--ink);
    color:white;
    padding:12px 17px;
    min-height:45px;
    border-radius:2px;
    transition:background .2s
}

.nav-contact:hover {
    background:#276063
}

.nav-contact .icon {
    width:19px;
    height:19px
}

.nav-dropdown>summary {
    display:flex;
    align-items:center;
    gap:5px;
    cursor:pointer;
    list-style:none
}

.nav-dropdown>summary::-webkit-details-marker {
    display:none
}

.nav-dropdown>summary .icon {
    width:14px;
    height:14px
}

.nav-dropdown[open]>summary .icon {
    transform:rotate(180deg)
}

.mega-menu {
    position:absolute;
    top:calc(100% - 1px);
    left:var(--gutter);
    right:var(--gutter);
    padding:38px;
    box-shadow:0 20px 40px #10272a15;
    background:#fff;
    border:1px solid var(--line);
    display:grid;
    grid-template-columns:.8fr 2fr;
    gap:40px;
    max-width:1320px;
    margin:auto
}

.mega-intro {
    padding:24px;
    background:var(--pale);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between
}

.mega-intro strong {
    font-size:29px;
    letter-spacing:-1.2px;
    font-weight:500;
    line-height:1.15;
    margin-bottom:25px
}

.mega-links {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 32px
}

.mega-links a {
    position:relative;
    padding:14px 24px 14px 0;
    border-bottom:1px solid var(--line)
}

.mega-links a:hover span {
    color:var(--cyan-dark)
}

.mega-links a>span {
    display:block;
    font-size:14px
}

.mega-links small {
    font-weight:400;
    color:var(--muted);
    display:block;
    margin-top:3px
}

.mega-links .icon {
    position:absolute;
    right:0;
    top:20px;
    width:16px;
    height:16px
}

.menu-toggle {
    display:none;
    width:42px;
    height:42px;
    border:1px solid var(--line);
    border-radius:2px;
    background:white;
    position:relative
}

.menu-toggle>span {
    display:block;
    position:absolute;
    width:19px;
    height:1px;
    background:var(--ink);
    left:10px;
    top:16px;
    transition:transform .2s
}

.menu-toggle>span+span {
    top:23px
}

.menu-toggle[aria-expanded=true]>span {
    top:20px;
    transform:rotate(45deg)
}

.menu-toggle[aria-expanded=true]>span+span {
    top:20px;
    transform:rotate(-45deg)
}

/* Homepage / hero */
.home-hero {
    background:linear-gradient(110deg,#fff 50%,#f5f8f4 100%);
    padding-top:76px;
    overflow:hidden
}

.home-hero-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:5%;
    align-items:center
}

.home-hero-copy {
    padding-bottom:34px
}

.home-hero h1 {
    font-size:clamp(45px,5.35vw,84px);
    letter-spacing:-.062em;
    line-height:1.015;
    font-weight:500;
    text-wrap:initial
}

.headline-accent {
    position:relative;
    display:inline;
    color:var(--cyan-dark)
}

.headline-accent:after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-6px;
    height:2px;
    background:var(--cyan)
}

.hero-intro {
    font-size:16px;
    line-height:1.75;
    margin-top:30px;
    max-width:660px
}

.home-hero .hero-intro {
    max-width:575px;
    font-size:16px;
    margin-top:30px
}

.home-hero .eyebrow {
    font-size:12px;
    margin-bottom:24px
}

.hero-signature {
    display:flex;
    gap:10px;
    align-items:center;
    font-size:11px;
    margin:27px 0 0;
    color:var(--muted)
}

.home-hero-art {
    min-width:0;
    position:relative;
    margin-top:12px
}

.home-hero-art .visual {
    transform:rotate(-2deg);
    box-shadow:16px 28px 0 #dfeee766
}

.hero-art-note {
    display:flex;
    gap:18px;
    justify-content:space-between;
    font:9px/1.8 var(--mono);
    padding:38px 0 16px;
    color:var(--muted);
    font-weight:500
}

.hero-art-note span:first-child {
    color:var(--cyan-dark)
}

.hero-art-note span:last-child {
    max-width:180px;
    text-align:right
}

.hero-baseline {
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    gap:25px;
    align-items:center;
    margin-top:43px;
    padding-block:21px;
    font:12px/1.5 var(--mono);
    color:var(--muted)
}

.hero-baseline a {
    display:flex;
    align-items:center;
    gap:15px;
    color:var(--ink)
}

.hero-baseline a .icon {
    transform:rotate(90deg);
    width:16px;
    height:16px
}

/* Schematic UI illustrations, no simulated operational metrics. */
.visual {
    background:var(--dark);
    color:white;
    position:relative;
    overflow:hidden;
    border:1px solid #315052;
    border-radius:var(--radius);
    font-size:13px;
    aspect-ratio:1.09;
    display:flex;
    flex-direction:column
}

.visual-top {
    display:flex;
    align-items:center;
    gap:9px;
    padding:23px 26px;
    border-bottom:1px solid #2b494b;
    font:11px/1.4 var(--mono);
    letter-spacing:.10em;
    color:#b6d6cf
}

.visual-top .live-dot {
    width:5px;
    height:5px;
    background:var(--cyan)
}

.visual-corner {
    margin-left:auto;
    font-size:21px;
    color:var(--cyan)
}

.visual-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:21px 26px;
    border-top:1px solid #2b494b;
    font:11px/1.5 var(--mono);
    color:#9ebbb7;
    gap:10px
}

.visual-bottom strong {
    color:var(--cyan);
    font-weight:500
}

.orbit-scene {
    position:relative;
    flex:1;
    min-height:290px;
    display:grid;
    place-items:center;
    isolation:isolate
}

.orbit {
    position:absolute;
    border:1px solid #2f5554;
    border-radius:100%;
    width:59%;
    aspect-ratio:1
}

.orbit-one {
    border-style:dashed;
    border-color:#2c514e
}

.orbit-two {
    width:84%;
    border-color:#27474a
}

.orbit-center {
    text-align:center;
    z-index:2;
    position:relative
}

.orbit-center small {
    font:8px/1 var(--mono);
    letter-spacing:.16em;
    color:#9bbfb5
}

.orbit-center strong {
    display:block;
    font-size:clamp(23px,2.9vw,47px);
    letter-spacing:-.06em;
    font-weight:500;
    margin:9px 0 3px;
    color:var(--cyan);
    line-height:1.2
}

.orbit-center>span {
    font-size:10px;
    color:#a8c5bf
}

.orbit-label {
    position:absolute;
    z-index:3;
    display:flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    font-weight:500;
    border:1px solid #38645f;
    background:#1b393a;
    padding:9px 13px;
    border-radius:3px;
    box-shadow:0 8px 18px #00120d26
}

.orbit-label i {
    width:5px;
    height:5px;
    background:var(--cyan);
    border-radius:100%
}

.label-0 {
    top:9%;
    left:10%
}

.label-1 {
    top:23%;
    right:4%
}

.label-2 {
    bottom:18%;
    left:5%
}

.label-3 {
    bottom:6%;
    right:9%
}

.orbit-tick {
    width:5px;
    height:5px;
    background:var(--cyan);
    border-radius:100%;
    position:absolute;
    box-shadow:0 0 16px #72e1d440
}

.tick-one {
    top:14%;
    right:33%;
    animation:soft-pulse 5s infinite
}

.tick-two {
    bottom:14%;
    left:32%;
    animation:soft-pulse 5s 2s infinite
}

.integration-scene {
    padding:35px 28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1
}

.integration-sources,.integration-targets {
    display:flex;
    justify-content:space-between;
    width:100%;
    gap:20px
}

.integration-sources {
    width:84%
}

.integration-sources span,.integration-targets span {
    border:1px solid #3a6661;
    background:#1a3b3b;
    font:9px/1.5 var(--mono);
    letter-spacing:.08em;
    padding:13px 10px;
    flex:1;
    text-align:center;
    border-radius:2px;
    color:#d1e6df
}

.connector-lines {
    height:35px;
    width:58%;
    display:flex;
    justify-content:space-around;
    position:relative;
    border-bottom:1px solid #539a88;
    border-radius:0 0 5px 5px
}

.connector-lines i {
    height:100%;
    width:1px;
    background:#539a88;
    position:relative
}

.connector-lines i:after {
    content:'';
    position:absolute;
    width:4px;
    height:4px;
    border-radius:100%;
    background:var(--cyan);
    top:0;
    left:-1.5px;
    animation:data-flow 3s infinite
}

.connector-lines i:nth-child(2):after {
    animation-delay:1.5s
}

.connector-lines.lower {
    border-top:1px solid #539a88;
    border-bottom:0;
    width:69%;
    margin-top:0;
    height:34px;
    border-radius:5px 5px 0 0
}

.integration-hub {
    background:var(--cyan);
    color:var(--ink);
    padding:13px 24px;
    text-align:center;
    border-radius:3px;
    position:relative;
    z-index:1;
    min-width:68%;
    box-shadow:0 0 40px #72e1d410
}

.integration-hub .mini-code {
    position:absolute;
    left:13px;
    top:17px;
    letter-spacing:-2px;
    font-family:var(--mono);
    font-size:16px
}

.integration-hub strong {
    display:block;
    font-size:23px;
    letter-spacing:-.045em;
    font-weight:600
}

.integration-hub small {
    font:7px/1.5 var(--mono);
    letter-spacing:.1em;
    display:block;
    margin-top:4px
}

.workflow-scene {
    margin:27px 22px;
    flex:1;
    align-content:center
}

.workflow-heading {
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    font-size:16px;
    letter-spacing:-.025em;
    margin-bottom:20px
}

.workflow-heading .icon {
    width:18px;
    color:var(--cyan)
}

.workflow-row {
    display:flex;
    align-items:center;
    gap:10px;
    background:#1b393b;
    border:1px solid #315052;
    margin:8px 0;
    padding:11px 10px;
    border-radius:3px
}

.workflow-num {
    font:9px var(--mono);
    color:var(--cyan)
}

.workflow-row strong {
    font-size:13px;
    font-weight:500;
    flex:1
}

.workflow-status {
    font:10px/1.3 var(--mono);
    padding:5px;
    background:#284d48;
    color:#b7edda;
    border-radius:2px
}

.workflow-done {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:#bcd3c8;
    margin-top:21px
}

.workflow-done .icon {
    color:var(--cyan);
    width:15px;
    height:15px
}

/* Editorial sections and services */
.content-section {
    padding:95px 0
}

.first-section {
    padding-top:80px
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:7%;
    margin-bottom:47px
}

.section-heading>div {
    flex:1
}

.section-heading>p {
    max-width:435px;
    flex:.85;
    font-size:16px;
    margin:0 0 3px
}

.section-heading .eyebrow {
    margin-bottom:17px
}

.section-heading>.text-link {
    white-space:nowrap;
    flex:none;
    margin-bottom:4px
}

.service-trio {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}

.service-tile {
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:26px;
    background:var(--pale);
    border:1px solid transparent;
    transition:background .25s,transform .25s,border-color .25s;
    border-radius:3px
}

.service-tile:hover {
    background:#e7f1ec;
    border-color:#a2c5ba;
    transform:translateY(-5px)
}

.tile-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    font:12px/1.6 var(--mono);
    color:var(--muted)
}

.tile-top>.icon {
    width:19px;
    height:19px;
    color:var(--ink)
}

.tile-visual {
    padding:30px 0 29px;
    display:flex;
    align-items:center;
    gap:16px
}

.tile-visual>.icon {
    width:45px;
    height:45px;
    color:var(--cyan-dark);
    stroke-width:1.05
}

.tile-tokens {
    display:flex;
    gap:4px;
    flex-wrap:wrap
}

.tile-tokens>span {
    font:11px/1.6 var(--mono);
    padding:5px 6px;
    background:white;
    border:1px solid var(--line);
    border-radius:2px;
    color:var(--muted)
}

.service-tile h3 {
    font-size:29px;
    font-weight:500;
    letter-spacing:-.045em;
    max-width:320px;
    min-height:69px
}

.service-tile p {
    font-size:16px;
    margin-top:17px;
    margin-bottom:24px;
    line-height:1.7
}

.tile-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:16px;
    font-weight:600;
    padding-top:19px;
    border-top:1px solid #d1ddd6;
    margin-top:auto
}

.tile-bottom .icon {
    width:17px;
    height:17px
}

.goals-grid,.personal-grid,.process-grid,.trust-grid {
    display:grid;
    grid-template-columns:.95fr 1.1fr;
    gap:12%;
    align-items:start
}

.goals-grid h2 {
    margin-bottom:24px
}

.goals-grid>div>p:not(.eyebrow) {
    font-size:16px;
    max-width:430px
}

.goals-grid .text-link {
    margin-top:14px
}

.accordion {
    border-bottom:1px solid #cbd8d3
}

.accordion:first-child {
    border-top:1px solid #cbd8d3
}

.accordion>summary {
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px 0;
    list-style:none;
    font-size:17px;
    font-weight:500;
    line-height:1.45
}

.accordion>summary::-webkit-details-marker {
    display:none
}

.accordion>summary>.icon {
    margin-left:auto;
    width:19px;
    height:19px;
    transition:transform .2s;
    flex-shrink:0
}

.accordion[open]>summary>.icon {
    transform:rotate(45deg)
}

.detail-index {
    font:9px var(--mono);
    color:var(--cyan-dark);
    align-self:center
}

.detail-body {
    padding:0 24px 24px 34px;
    font-size:16px;
    max-width:900px
}

.detail-body p {
    margin:0 0 12px
}

.detail-body p:last-child {
    margin:0
}

.detail-body .text-link {
    font-size:14px;
    margin:5px 0 0
}

.principle-section {
    padding:99px 0 78px;
    position:relative;
    overflow:hidden
}

.principle-section .eyebrow {
    color:#8db7ac;
    margin-bottom:38px
}

.principle-section h2 {
    font-size:clamp(45px,6.8vw,104px);
    line-height:1.03;
    letter-spacing:-.06em;
    font-weight:500;
    max-width:1060px
}

.principle-section h2>span {
    color:var(--cyan)
}

.principle-bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-top:50px
}

.principle-symbol {
    font-size:135px;
    line-height:1;
    align-self:end;
    color:var(--cyan);
    font-weight:300
}

.principle-bottom>div {
    max-width:530px
}

.principle-bottom p {
    font-size:16px;
    line-height:1.8;
    margin-bottom:26px
}

.competence-list {
    border-top:1px solid var(--line)
}

.competence-list>a {
    display:grid;
    grid-template-columns:34px 1fr 1.15fr 28px;
    align-items:center;
    gap:25px;
    border-bottom:1px solid var(--line);
    padding:29px 0;
    transition:background .2s
}

.competence-list>a:hover {
    background:var(--pale)
}

.feature-index {
    display:block;
    font:10px var(--mono);
    color:var(--cyan-dark)
}

.competence-list h3 {
    font-size:25px;
    font-weight:500
}

.competence-list p {
    font-size:14px;
    margin:0
}

.competence-list>a>.icon {
    width:20px
}

.personal-manifesto h2 {
    font-size:clamp(35px,3.7vw,56px);
    font-weight:500;
    line-height:1.12
}

.personal-manifesto h2>span {
    color:var(--cyan-dark)
}

.editorial-copy {
    font-size:16px;
    line-height:1.85
}

.editorial-copy p:last-child {
    margin:0
}

.editorial-copy blockquote {
    font-size:21px;
    line-height:1.55;
    padding:8px 0 8px 23px;
    margin:32px 0;
    border-left:2px solid var(--cyan-dark);
    letter-spacing:-.025em
}

.dark-section .editorial-copy blockquote {
    border-color:var(--cyan);
    color:var(--cyan)
}

.process-grid>div>p:not(.eyebrow) {
    font-size:16px;
    margin-top:25px
}

.process-list {
    list-style:none;
    margin:0;
    padding:0
}

.process-list li {
    display:flex;
    gap:26px;
    align-items:flex-start;
    border-top:1px solid #cbd8d3;
    padding:24px 0
}

.process-list li:last-child {
    border-bottom:1px solid #cbd8d3
}

.process-index {
    font:11px var(--mono);
    color:var(--cyan-dark);
    padding-top:7px
}

.process-list li>div {
    flex:1
}

.process-list h3 {
    font-size:21px;
    letter-spacing:-.028em;
    font-weight:500
}

.process-list p {
    font-size:16px;
    margin:10px 0 0;
    line-height:1.7
}

.process-list li>.icon {
    width:17px;
    height:17px;
    margin-top:4px;
    color:var(--muted)
}

.audit-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}

.audit-card {
    border:1px solid var(--line);
    padding:27px;
    display:flex;
    flex-direction:column;
    position:relative;
    background:white
}

.audit-card:before {
    content:'';
    position:absolute;
    top:-1px;
    left:-1px;
    width:54px;
    height:3px;
    background:var(--cyan-dark)
}

.audit-card .eyebrow {
    font-size:12px;
    margin-bottom:22px
}

.audit-icon {
    width:43px;
    height:43px;
    background:var(--pale);
    display:grid;
    place-items:center;
    border-radius:2px;
    margin-bottom:23px
}

.audit-icon .icon {
    color:var(--cyan-dark)
}

.audit-card h3 {
    font-size:25px;
    font-weight:500;
    margin-bottom:17px
}

.audit-card>p:not(.eyebrow) {
    font-size:14px;
    margin-bottom:28px
}

.audit-deliverable {
    margin-top:auto;
    padding:17px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin-bottom:20px
}

.audit-deliverable span {
    display:block;
    font:9px var(--mono);
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
    margin-bottom:7px
}

.audit-deliverable strong {
    font-size:12px;
    font-weight:500
}

.audit-card>.text-link {
    border:none;
    justify-content:space-between;
    width:100%;
    font-size:12px
}

.cyncro-block {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10%;
    align-items:center
}

.cyncro-block h2 {
    font-weight:500;
    font-size:clamp(36px,4.4vw,66px);
    line-height:1.07;
    margin-bottom:27px
}

.cyncro-block p:not(.eyebrow) {
    font-size:16px;
    line-height:1.8
}

.cyncro-block .visual {
    aspect-ratio:1.3;
    border-color:#37615d
}

.cyncro-block .integration-scene {
    padding:25px
}

.cyncro-block .integration-hub {
    min-width:70%
}

.cyncro-block .visual-top,.cyncro-block .visual-bottom {
    padding:17px 24px
}

.cyncro-block .text-link {
    margin-top:9px
}

.trust-facts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:27px
}

.trust-facts>div {
    border-top:1px solid var(--line);
    padding-top:22px;
    display:flex;
    flex-direction:column
}

.trust-facts>div:last-child {
    grid-column:1/-1
}

.trust-facts strong {
    font-size:46px;
    letter-spacing:-.06em;
    font-weight:500;
    line-height:1.2
}

.trust-facts span {
    font-size:13px;
    color:var(--muted);
    margin-top:12px;
    max-width:370px
}

/* Project carousel */
.case-track {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    scrollbar-color:#a7c3b9 transparent;
    gap:22px;
    padding-bottom:8px
}

.case-slide {
    flex:0 0 100%;
    min-width:0;
    scroll-snap-align:start;
    display:grid;
    grid-template-columns:.85fr 1fr;
    border:1px solid var(--line);
    background:white
}

.case-number {
    padding:45px;
    background:var(--dark);
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0
}

.case-number>span {
    font:9px var(--mono);
    color:#a2c6bd;
    letter-spacing:.13em;
    margin-bottom:45px
}

.case-number>strong {
    font-size:clamp(45px,6.8vw,103px);
    font-weight:500;
    letter-spacing:-.06em;
    color:var(--cyan);
    line-height:1;
    overflow-wrap:anywhere
}

.case-number>p {
    color:#d0dfd9;
    max-width:290px;
    font-size:19px;
    margin:22px 0 0;
    letter-spacing:-.02em
}

.case-number>small {
    font:9px/1.65 var(--mono);
    color:#9db8ad;
    margin-top:40px
}

.case-slide-copy {
    padding:44px 48px;
    display:flex;
    flex-direction:column;
    align-items:flex-start
}

.case-slide-copy .eyebrow {
    font-size:12px;
    margin-bottom:18px
}

.case-slide-copy h3 {
    font-size:36px;
    line-height:1.12;
    font-weight:500
}

.case-slide-copy>p:not(.eyebrow) {
    font-size:14px;
    line-height:1.8;
    margin-top:22px
}

.tags {
    display:flex;
    flex-wrap:wrap;
    gap:6px
}

.tags span {
    font:8px/1.5 var(--mono);
    padding:5px 9px;
    border:1px solid #cbd7d2;
    border-radius:2px;
    color:var(--muted)
}

.case-slide-copy .tags {
    margin-bottom:23px
}

.case-slide-copy .text-link {
    margin-top:auto;
    font-size:12px
}

.carousel-controls {
    display:flex;
    align-items:center;
    gap:25px;
    margin-top:20px
}

.carousel-instruction {
    font-size:12px;
    color:var(--muted);
    flex:1
}

.carousel-pagination {
    display:flex;
    align-items:center;
    gap:0
}

.carousel-pagination button {
    width:26px;
    height:38px;
    border:0;
    background:transparent;
    padding:8px;
    display:grid;
    place-items:center
}

.carousel-pagination button>span {
    display:block;
    width:5px;
    height:5px;
    border-radius:100%;
    background:#a8bdb3;
    transition:width .2s,background .2s
}

.carousel-pagination button[aria-current=true]>span {
    background:var(--cyan-dark);
    width:16px;
    border-radius:6px
}

.carousel-arrows {
    display:flex;
    gap:8px
}

.carousel-arrows button {
    width:42px;
    height:42px;
    background:transparent;
    border:1px solid #b2c4bc;
    display:grid;
    place-items:center;
    transition:background .2s
}

.carousel-arrows button:hover {
    background:#e0ebe5
}

.carousel-arrows button .icon {
    width:17px;
    height:17px
}

.carousel-arrows button[data-prev] .icon {
    transform:rotate(180deg)
}

.carousel-arrows button:disabled {
    opacity:.4;
    cursor:default
}

.case-carousel:not(.is-ready) .carousel-controls {
    display:none
}

/* Inner pages */
.page-hero {
    padding:30px 0 76px;
    background:var(--pale)
}

.breadcrumbs {
    display:flex;
    align-items:center;
    gap:11px;
    font:9px/1.6 var(--mono);
    color:var(--muted);
    margin-bottom:48px;
    flex-wrap:wrap
}

.breadcrumbs a:hover {
    color:var(--cyan-dark)
}

.breadcrumbs>span:last-child {
    max-width:650px
}

.page-hero-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:7%;
    align-items:center
}

.page-hero-grid h1 {
    max-width:980px;
    font-weight:500
}

.page-hero-grid>.hero-intro {
    max-width:830px
}

.page-hero .hero-intro {
    max-width:810px;
    font-size:16px;
    line-height:1.8
}

.page-hero.has-visual .page-hero-grid {
    grid-template-columns:1.2fr .9fr
}

.page-hero.has-visual h1 {
    font-size:clamp(36px,4.1vw,61px)
}

.page-hero.has-visual .hero-intro {
    font-size:16px
}

.page-hero-visual {
    min-width:0
}

.page-hero-visual .visual {
    aspect-ratio:1.08
}

.page-hero-visual .orbit-center strong {
    font-size:37px
}

.page-hero-visual .orbit-scene {
    min-height:245px
}

.page-hero:not(.has-visual) .page-hero-grid>div {
    max-width:1080px
}

.page-hero:not(.has-visual) h1 {
    font-size:clamp(38px,5vw,75px);
    max-width:1100px
}

.page-jump {
    border-bottom:1px solid var(--line);
    background:#fff
}

.page-jump .container {
    display:flex;
    gap:27px;
    flex-wrap:wrap;
    font-size:16px;
    padding-block:17px;
    align-items:center
}

.page-jump span {
    font:14px var(--mono);
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
    margin-right:10px
}

.page-jump a {
    white-space:nowrap;
    border-bottom:1px solid transparent
}

.page-jump a:hover {
    border-color:var(--cyan-dark);
    color:var(--cyan-dark)
}

.editorial-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10%;
    align-items:start
}

.editorial-grid .eyebrow {
    margin-bottom:20px
}

.editorial-grid h2 {
    font-size:clamp(31px,3vw,46px);
    font-weight:500;
    line-height:1.14
}

.section-statement {
    padding-block:90px
}

.section-statement .editorial-grid {
    align-items:center
}

.section-statement h2 {
    font-size:clamp(34px,3.8vw,57px);
    line-height:1.1;
    color:var(--cyan)
}

.feature-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:42px 36px
}

.feature {
    border-top:1px solid var(--line);
    padding-top:20px;
    display:flex;
    flex-direction:column;
    align-items:flex-start
}

.feature .feature-index {
    margin-bottom:27px
}

.feature h3 {
    font-size:24px;
    font-weight:500
}

.feature p {
    font-size:16px;
    line-height:1.8;
    margin:18px 0 0
}

.feature .text-link {
    font-size:14px;
    margin-top:18px
}

.problem-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 50px
}

.problem-grid .accordion:nth-child(2) {
    border-top:1px solid #cbd8d3
}

.problem-grid .accordion summary {
    padding:22px 0;
    font-size:17px
}

.faq-list {
    max-width:980px
}

.faq-list .accordion summary {
    font-size:18px
}

.faq-list .detail-body {
    padding-left:0;
    max-width:850px;
    font-size:15px
}

.section-faq {
    background:var(--pale)
}

.section-steps .process-list {
    max-width:950px
}

.metrics {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:35px;
    margin:35px 0
}

.metrics>div {
    border-top:1px solid #c2d0c8;
    padding-top:25px
}

.metrics strong {
    display:block;
    font-size:clamp(42px,5vw,70px);
    line-height:1.1;
    letter-spacing:-.06em;
    font-weight:500;
    color:var(--cyan-dark)
}

.metrics span {
    display:block;
    font-size:16px;
    margin-top:14px;
    max-width:220px;
    color:var(--muted)
}

.section-proof,.section-facts {
    background:#e7f2ed
}

.section-proof .section-heading {
    margin-bottom:28px
}

.section-proof h2 {
    font-size:41px;
    font-weight:500;
    max-width:830px
}

.section-proof .text-link {
    font-size:14px
}

.related-links {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
}

.related-links>a {
    display:flex;
    align-items:start;
    gap:20px;
    font-size:19px;
    font-weight:500;
    line-height:1.4;
    letter-spacing:-.025em;
    border-top:1px solid #bacdc3;
    padding:22px 0
}

.related-links>a>.icon {
    margin-left:auto;
    flex-shrink:0;
    width:19px;
    margin-top:3px
}

.related-links>a:hover {
    color:var(--cyan-dark)
}

.check-list {
    margin:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:23px 50px;
    padding:0;
    list-style:none;
    max-width:1000px
}

.check-list li {
    display:flex;
    gap:15px;
    align-items:flex-start;
    color:var(--ink-soft);
    font-size:16px
}

.check-list .icon {
    color:var(--cyan-dark);
    width:19px;
    height:19px;
    margin-top:3px
}

/* Case studies & project overview */
.projects-section {
    padding-top:44px
}

.project-filter {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:50px
}

.project-filter button {
    padding:11px 17px;
    font-size:12px;
    border:1px solid var(--line);
    background:white;
    border-radius:2px
}

.project-filter button.is-active {
    background:var(--ink);
    color:white;
    border-color:var(--ink)
}

.project-filter:not(.is-ready) {
    display:none
}

.project-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:58px 38px
}

.project-card {
    min-width:0
}

.project-card-visual {
    display:block;
    position:relative;
    margin-bottom:26px;
    overflow:hidden
}

.project-card-visual .visual {
    aspect-ratio:1.8;
    transition:transform .4s
}

.project-card-visual:hover .visual {
    transform:scale(1.02)
}

.project-card .visual-top {
    padding:14px 23px;
    font-size:11px
}

.project-card .visual-bottom {
    display:none
}

.project-card .orbit-scene {
    min-height:240px
}

.project-card .orbit-center strong {
    font-size:36px
}

.project-card .orbit-one {
    width:37%
}

.project-card .orbit-two {
    width:56%
}

.project-card .orbit-label {
    font-size:9px
}

.project-card .workflow-scene {
    margin:15px 36px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3px 10px
}

.project-card .workflow-heading {
    grid-column:1/-1;
    font-size:16px;
    margin-bottom:7px
}

.project-card .workflow-row {
    margin:3px 0;
    gap:6px
}

.project-card .workflow-status {
    display:none
}

.project-card .workflow-done {
    grid-column:1/-1;
    margin-top:8px
}

.project-card .integration-scene {
    padding:12px 46px
}

.project-card .integration-hub {
    padding:6px 22px;
    min-width:60%
}

.project-card .integration-hub strong {
    font-size:18px
}

.project-card .integration-hub small {
    font-size:6px
}

.project-card .integration-sources span,.project-card .integration-targets span {
    padding:7px;
    font-size:8px
}

.project-card .connector-lines {
    height:23px
}

.project-open {
    position:absolute;
    bottom:17px;
    right:17px;
    background:var(--cyan);
    color:var(--ink);
    width:40px;
    height:40px;
    display:grid;
    place-items:center
}

.project-open .icon {
    width:19px
}

.project-card>.eyebrow {
    font-size:12px;
    margin-bottom:12px
}

.project-card h2 {
    font-size:31px;
    letter-spacing:-.035em;
    font-weight:500;
    line-height:1.15;
    max-width:530px
}

.project-card>p:not(.eyebrow) {
    font-size:14px;
    margin-top:19px
}

.project-result {
    border-top:1px solid var(--line);
    padding-top:16px;
    display:flex;
    align-items:center;
    gap:16px
}

.project-result strong {
    font-size:25px;
    font-weight:500;
    letter-spacing:-.04em;
    color:var(--cyan-dark);
    flex-shrink:0
}

.project-result span {
    font-size:12px;
    color:var(--muted)
}

.case-overview {
    background:#e8f1eb;
    padding:32px 0 28px
}

.case-meta {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px
}

.case-meta>div>span {
    display:block;
    font:9px var(--mono);
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
    margin-bottom:12px
}

.case-meta strong {
    font-size:18px;
    font-weight:500
}

.case-meta .tags {
    margin-top:4px
}

.case-overview .small-note {
    margin-bottom:0
}

.page-case .section-editorial .editorial-copy {
    font-size:16px
}

/* Contact & audit form */
.contact-section {
    padding:80px 0 90px;
    background:var(--pale)
}

.contact-grid {
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:9%;
    align-items:start
}

.contact-copy {
    padding-top:22px
}

.contact-copy h1 {
    font-size:clamp(40px,4.65vw,69px);
    font-weight:500;
    line-height:1.07
}

.contact-copy .hero-intro {
    font-size:16px;
    margin-top:30px
}

.contact-options {
    margin:38px 0 42px
}

.contact-options>a {
    border-top:1px solid #c9d6ce;
    display:flex;
    align-items:center;
    gap:16px;
    padding:19px 0
}

.contact-options>a:last-child {
    border-bottom:1px solid #c9d6ce
}

.contact-options>a>.icon:first-child {
    color:var(--cyan-dark);
    width:22px
}

.contact-options>a>.icon:last-child {
    margin-left:auto;
    width:17px;
    height:17px
}

.contact-options small {
    display:block;
    font:9px var(--mono);
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--muted);
    margin-bottom:5px
}

.contact-options strong {
    font-size:20px;
    font-weight:500;
    letter-spacing:-.02em
}

.contact-expect h2 {
    font-size:25px;
    letter-spacing:-.03em;
    font-weight:500
}

.contact-expect ol {
    font-size:14px;
    color:var(--ink-soft);
    padding-left:19px;
    margin:18px 0
}

.contact-expect li {
    margin-bottom:10px
}

.contact-expect p {
    font-size:13px;
    line-height:1.8;
    margin-top:25px;
    max-width:420px
}

.contact-location {
    display:block;
    font:10px/1.6 var(--mono);
    letter-spacing:.05em;
    color:var(--cyan-dark);
    margin-top:30px
}

.contact-form {
    padding:35px;
    background:white;
    border:1px solid #d6e1da;
    box-shadow:0 14px 36px #10272a04;
    border-radius:3px;
    scroll-margin-top:120px
}

.form-header {
    padding-bottom:27px;
    border-bottom:1px solid var(--line);
    margin-bottom:27px
}

.form-header .eyebrow {
    margin-bottom:10px;
    font-size:12px
}

.form-header h2 {
    font-size:31px;
    font-weight:500
}

.form-header p {
    font-size:13px;
    margin:12px 0 0
}

.form-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px 18px
}

.field {
    min-width:0
}

.field-full {
    grid-column:1/-1
}

.field label {
    display:block;
    font-size:12px;
    margin-bottom:8px;
    font-weight:600
}

.field label>span {
    color:var(--cyan-dark)
}

.field input,.field select,.field textarea {
    display:block;
    width:100%;
    border:1px solid #bdcec3;
    background:#fff;
    border-radius:2px;
    font-size:14px;
    line-height:1.5;
    padding:12px 13px;
    color:var(--ink);
    min-height:46px
}

.field select {
    padding-right:30px
}

.field textarea {
    resize:vertical;
    min-height:138px
}

.field input:focus,.field select:focus,.field textarea:focus {
    border-color:var(--cyan-dark);
    background:#fbfdfb;
    outline-width:2px;
    outline-offset:2px
}

.field input[aria-invalid],.field textarea[aria-invalid],.field select[aria-invalid] {
    border-color:#b42b36
}

.field small {
    font-size:11px;
    line-height:1.6;
    display:block;
    color:var(--muted);
    margin-top:8px
}

.field-error {
    color:#a41f2a;
    font-size:12px;
    line-height:1.5;
    display:block;
    margin-top:6px
}

.field-error:empty {
    display:none
}

.honey-field {
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden
}

.privacy-field {
    display:flex;
    gap:11px;
    align-items:flex-start;
    margin-top:22px
}

.privacy-field input {
    margin:4px 0 0;
    accent-color:var(--cyan-dark);
    width:17px;
    height:17px;
    flex-shrink:0
}

.privacy-field label {
    font-size:11px;
    line-height:1.75;
    color:var(--muted)
}

.privacy-field a {
    text-decoration:underline;
    text-underline-offset:2px
}

.form-submit {
    width:100%;
    margin-top:24px;
    min-height:51px
}

.form-submit:disabled {
    opacity:.7;
    cursor:wait;
    transform:none
}

.form-footnote {
    font:9px/1.6 var(--mono);
    margin:16px 0 0;
    color:var(--muted)
}

.form-status {
    font-size:12px;
    margin:10px 0 0
}

.form-status:empty {
    display:none
}

.form-summary {
    padding:18px;
    border:1px solid #c94e57;
    background:#fff3f3;
    color:#801a23;
    margin:10px 0 24px;
    font-size:13px;
    line-height:1.6
}

.form-summary ul {
    padding-left:18px;
    margin:10px 0 0
}

.form-summary li {
    margin:5px 0
}

.form-summary a {
    text-decoration:underline
}

.audit-assurance {
    border-block:1px solid var(--line)
}

.audit-assurance .container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-block:22px
}

.audit-assurance span {
    display:flex;
    gap:10px;
    align-items:center;
    font-size:16px
}

.audit-assurance .icon {
    color:var(--cyan-dark);
    width:18px;
    height:18px
}

.audit-request {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:10%;
    align-items:start
}

.audit-request h2 {
    font-weight:500;
    font-size:clamp(36px,3.5vw,55px);
    margin-bottom:25px
}

.audit-request>div>p:not(.eyebrow) {
    font-size:15px
}

.audit-scope {
    border-top:1px solid #c9d8ce;
    margin:34px 0 27px;
    padding-top:23px
}

.audit-scope h3 {
    font-size:19px;
    letter-spacing:-.02em
}

.audit-scope li {
    font-size:14px;
    color:var(--ink-soft);
    margin-bottom:10px
}

.audit-request .form-header h2 {
    font-size:28px
}

.page-audit .page-hero h1 {
    max-width:1080px
}

.page-audit .page-hero .hero-intro {
    max-width:840px
}

/* Closing, footer and utility pages */
.closing-cta {
    background:#b6eee1;
    padding:86px 0
}

.closing-grid {
    display:grid;
    grid-template-columns:1.5fr .4fr;
    gap:16%;
    align-items:center
}

.closing-cta .eyebrow {
    color:#285c55;
    margin-bottom:21px
}

.closing-cta h2 {
    font-size:clamp(36px,4.65vw,72px);
    line-height:1.08;
    font-weight:500;
    max-width:950px
}

.closing-cta p:not(.eyebrow) {
    font-size:16px;
    max-width:640px;
    margin:25px 0 0;
    color:#29574e
}

.closing-cta .button-secondary {
    border-color:#699e8f;
    background:transparent
}

.closing-cta .button-secondary:hover {
    background:#cbf8ed
}

.big-arrow {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:1;
    border:1px solid #7fb5a4;
    border-radius:100%;
    transition:background .3s,transform .3s
}

.big-arrow .icon {
    width:80px;
    height:80px;
    stroke-width:.8
}

.big-arrow:hover {
    background:var(--ink);
    color:var(--cyan);
    transform:rotate(7deg)
}

.site-footer {
    background:var(--dark);
    color:#e3efea;
    padding:61px 0 20px
}

.footer-top {
    display:grid;
    grid-template-columns:1.5fr 1fr .9fr .65fr;
    gap:46px;
    padding-bottom:46px
}

.footer-brand .brand {
    color:white;
    font-size:31px
}

.footer-brand .brand-mark {
    color:var(--cyan)
}

.footer-brand p {
    font-size:14px;
    line-height:1.5;
    color:#a6c2b8;
    margin:24px 0 21px
}

.footer-email {
    font-size:14px;
    display:inline-flex;
    gap:13px;
    align-items:center;
    color:var(--cyan)
}

.footer-email .icon {
    width:17px;
    height:17px
}

.footer-column h2 {
    font:11px/1.5 var(--mono);
    letter-spacing:.07em;
    color:#f7fffa;
    margin:0 0 22px
}

.footer-column ul {
    list-style:none;
    padding:0;
    margin:0
}

.footer-column li {
    font-size:14px;
    margin:8px 0
}

.footer-column a {
    color:#a6c2b8
}

.footer-column a:hover {
    color:var(--cyan)
}

.footer-bottom {
    border-top:1px solid #35534b;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:10px;
    padding-top:24px;
    color:#a1bab0
}

.footer-bottom>div {
    display:flex;
    gap:21px
}

.footer-bottom a:hover {
    color:var(--cyan)
}

.footer-separator {
    display:inline-block;
    margin:0 8px;
    color:#58796c
}

.review-note {
    font-size:9px;
    color:#93afa4;
    padding-top:19px
}

.utility-section {
    padding:105px 0 130px;
    background:var(--pale)
}

.utility-section .container {
    max-width:1000px
}

.utility-section h1 {
    font-weight:500;
    font-size:clamp(39px,5vw,75px)
}

.utility-section p:not(.eyebrow) {
    margin-top:27px;
    max-width:720px;
    font-size:17px
}

.utility-symbol {
    width:64px;
    height:64px;
    background:var(--cyan);
    display:grid;
    place-items:center;
    border-radius:50%;
    margin-bottom:35px
}

.utility-symbol .icon {
    width:31px;
    height:31px
}

.reference-code {
    font:12px var(--mono)!important
}

.error-number {
    font-size:110px;
    letter-spacing:-.07em;
    color:var(--cyan-dark);
    font-weight:500;
    line-height:1;
    display:block;
    margin-bottom:36px
}

.legal-copy {
    max-width:850px
}

.legal-copy h2 {
    font-size:27px;
    letter-spacing:-.03em;
    margin:30px 0 18px
}

.legal-copy p {
    font-size:16px;
    line-height:1.85
}

.legal-copy a {
    text-decoration:underline
}

.legal-notice {
    border:1px solid #b6c8bd;
    background:var(--pale);
    padding:24px 28px;
    margin-bottom:34px
}

.legal-notice h2 {
    margin-top:0
}

.legal-notice p:last-child {
    margin-bottom:0
}

/* Progressive enhancement only: all content remains readable without JavaScript. */
[data-reveal].reveal-pending {
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s ease,transform .6s ease
}

[data-reveal].is-visible {
    opacity:1;
    transform:translateY(0)
}

@keyframes soft-pulse {
    0%,100% {
        opacity:.35
    }

    50% {
        opacity:1
    }

}

@keyframes data-flow {
    0% {
        top:0;
        opacity:0
    }

    20% {
        opacity:1
    }

    85% {
        opacity:1
    }

    100% {
        top:90%;
        opacity:0
    }

}

/* Responsive */
@media(min-width:1600px) {
    .header-inner {
        width:calc(100% - 110px)
    }

    .home-hero {
        padding-top:90px;
        padding-bottom:0
    }

    .home-hero h1 {
        font-size:88px
    }

    .home-hero-grid {
        gap:7%
    }

    .hero-baseline {
        margin-top:70px
    }

}

@media(max-width:1190px) {
    :root {
        --gutter:40px
    }

    .main-nav {
        gap:18px;
        font-size:11px
    }

    .header-inner {
        gap:22px
    }

    .brand {
        font-size:25px
    }

    .brand-logo {
        width:140px
    }

    .brand-mark {
        font-size:26px
    }

    .nav-contact {
        gap:13px;
        padding:12px 14px
    }

    .home-hero h1 {
        font-size:clamp(46px,5.8vw,69px)
    }

    .home-hero-grid {
        grid-template-columns:1.14fr 1fr;
        gap:4%
    }

    .home-hero .hero-intro {
        font-size:14px;
        line-height:1.8
    }

    .hero-signature {
        font-size:14px
    }

    .orbit-scene {
        min-height:260px
    }

    .visual-bottom {
        padding:17px 20px;
        font-size:11px
    }

    .visual-top {
        padding:18px 20px;
        font-size:11px
    }

    .service-tile {
        padding:22px
    }

    .service-tile h3 {
        font-size:25px
    }

    .tile-visual {
        gap:9px
    }

    .tile-tokens {
        gap:3px
    }

    .tile-tokens>span {
        font-size:6px
    }

    .tile-visual>.icon {
        width:37px;
        height:37px
    }

    .goals-grid,.personal-grid,.process-grid,.trust-grid {
        gap:7%
    }

    .case-number {
        padding:35px
    }

    .case-slide-copy {
        padding:35px
    }

    .case-slide-copy h3 {
        font-size:31px
    }

    .case-slide-copy>p:not(.eyebrow) {
        font-size:13px
    }

    .contact-grid {
        gap:6%
    }

    .contact-form {
        padding:27px
    }

    .workflow-row {
        gap:7px
    }

    .workflow-status {
        font-size:10px
    }

    .workflow-row strong {
        font-size:13px
    }

    .page-hero.has-visual .page-hero-grid {
        gap:5%;
        grid-template-columns:1.15fr .9fr
    }

    .page-hero.has-visual h1 {
        font-size:45px
    }

    .page-hero.has-visual .hero-intro {
        font-size:15px
    }

    .footer-top {
        gap:28px
    }

    .feature-grid {
        gap:33px 26px
    }

}

@media(max-width:980px) {
    :root {
        --header-h:76px;
        --gutter:30px
    }

    .menu-toggle {
        display:block
    }

    .header-inner {
        min-height:76px;
        flex-wrap:wrap;
        position:relative
    }

    .main-nav {
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        order:3;
        max-height:calc(100dvh - 80px);
        overflow-y:auto;
        padding:0 0 20px
    }

    .js .main-nav {
        display:none
    }

    .js .main-nav.is-open {
        display:flex
    }

    .main-nav>a:not(.nav-contact),.nav-dropdown>summary {
        padding:15px 0;
        font-size:16px;
        border-bottom:1px solid var(--line)
    }

    .main-nav>a:after,.nav-dropdown>summary:after {
        display:none
    }

    .nav-dropdown>summary {
        justify-content:space-between
    }

    .nav-contact {
        margin-top:18px;
        padding:14px 18px;
        font-size:14px
    }

    .nav-contact .icon {
        margin-left:auto
    }

    .mega-menu {
        position:static;
        display:block;
        box-shadow:none;
        margin:0;
        border:0;
        padding:13px 0 18px
    }

    .mega-intro {
        display:none
    }

    .mega-links {
        grid-template-columns:1fr 1fr;
        gap:0 25px
    }

    .mega-links a {
        padding:13px 20px 13px 0
    }

    .mega-links small {
        font-size:11px
    }

    .mega-links a>span {
        font-size:13px
    }

    .home-hero {
        padding-top:52px
    }

    .home-hero-grid {
        grid-template-columns:1.15fr 1fr;
        align-items:center
    }

    .home-hero h1 {
        font-size:clamp(40px,5.6vw,57px)
    }

    .home-hero .hero-intro {
        font-size:13px
    }

    .home-hero .eyebrow {
        font-size:12px
    }

    .home-hero .actions {
        gap:9px
    }

    .home-hero .button {
        font-size:11px;
        padding:12px 14px;
        gap:12px;
        min-height:47px
    }

    .home-hero .button .icon {
        width:16px
    }

    .home-hero .hero-signature {
        font-size:9px;
        line-height:1.6
    }

    .home-hero-art .visual {
        aspect-ratio:.88
    }

    .orbit-label {
        font-size:9px;
        padding:7px 10px
    }

    .orbit-scene {
        min-height:270px
    }

    .orbit-center strong {
        font-size:30px
    }

    .orbit-center>span {
        font-size:8px
    }

    .orbit-center small {
        font-size:7px
    }

    .hero-art-note {
        font-size:8px
    }

    .hero-baseline {
        font-size:12px;
        gap:15px;
        margin-top:30px
    }

    .content-section {
        padding-block:70px
    }

    .section-heading {
        gap:5%;
        margin-bottom:35px
    }

    .section-heading>p {
        font-size:13px
    }

    .section-heading h2 {
        font-size:35px
    }

    .service-trio {
        gap:12px
    }

    .service-tile {
        padding:18px
    }

    .service-tile h3 {
        font-size:22px;
        min-height:78px
    }

    .service-tile p {
        font-size:12px
    }

    .tile-top {
        font-size:12px
    }

    .tile-visual {
        display:block;
        padding-block:23px
    }

    .tile-visual>.icon {
        width:39px;
        height:39px;
        margin-bottom:13px
    }

    .tile-tokens>span {
        font-size:6px
    }

    .goals-grid h2 {
        font-size:35px
    }

    .goals-grid>div>p:not(.eyebrow) {
        font-size:14px
    }

    .accordion>summary {
        font-size:16px;
        gap:13px
    }

    .detail-body {
        font-size:13px
    }

    .competence-list>a {
        grid-template-columns:25px 1fr 1fr 22px;
        gap:20px
    }

    .competence-list h3 {
        font-size:22px
    }

    .competence-list p {
        font-size:13px
    }

    .case-slide {
        grid-template-columns:.85fr 1fr
    }

    .case-slide-copy {
        padding:28px
    }

    .case-slide-copy h3 {
        font-size:28px
    }

    .case-slide-copy>p:not(.eyebrow) {
        font-size:13px
    }

    .case-number {
        padding:29px
    }

    .case-number>strong {
        font-size:65px
    }

    .case-number>p {
        font-size:16px
    }

    .case-number>small {
        font-size:8px
    }

    .audit-card {
        padding:21px
    }

    .audit-card h3 {
        font-size:22px
    }

    .audit-card>p:not(.eyebrow) {
        font-size:13px
    }

    .audit-deliverable strong {
        font-size:10px
    }

    .audit-card .eyebrow {
        font-size:12px
    }

    .cyncro-block {
        gap:7%
    }

    .cyncro-block .visual {
        aspect-ratio:.98
    }

    .cyncro-block h2 {
        font-size:43px
    }

    .cyncro-block p:not(.eyebrow) {
        font-size:14px
    }

    .integration-hub small {
        font-size:6px
    }

    .page-hero.has-visual .page-hero-grid {
        grid-template-columns:1.1fr .9fr;
        gap:4%
    }

    .page-hero.has-visual h1 {
        font-size:39px
    }

    .page-hero-visual .visual {
        aspect-ratio:.88
    }

    .page-hero-visual .orbit-center strong {
        font-size:30px
    }

    .page-hero-visual .orbit-center>span {
        font-size:8px
    }

    .workflow-scene {
        margin:22px 15px
    }

    .workflow-heading {
        font-size:13px
    }

    .workflow-row {
        flex-wrap:wrap
    }

    .workflow-status {
        margin-left:23px
    }

    .workflow-done {
        font-size:12px
    }

    .page-hero .button {
        font-size:11px;
        padding:12px 14px;
        gap:12px
    }

    .page-hero .hero-intro {
        font-size:15px
    }

    .page-hero {
        padding-bottom:60px
    }

    .feature-grid {
        grid-template-columns:1fr 1fr
    }

    .editorial-grid {
        gap:7%
    }

    .editorial-grid h2 {
        font-size:35px
    }

    .editorial-copy {
        font-size:15px
    }

    .problem-grid {
        gap:0 30px
    }

    .related-links>a {
        font-size:17px
    }

    .contact-grid,.audit-request {
        grid-template-columns:.9fr 1.05fr;
        gap:5%
    }

    .contact-copy h1 {
        font-size:45px
    }

    .contact-form {
        padding:23px
    }

    .contact-options strong {
        font-size:17px
    }

    .form-fields {
        grid-template-columns:1fr
    }

    .field-full {
        grid-column:auto
    }

    .footer-top {
        grid-template-columns:1.4fr 1fr 1fr;
        gap:35px
    }

    .footer-column:last-child {
        grid-column:2/4
    }

    .footer-column:last-child ul {
        display:flex;
        gap:25px;
        flex-wrap:wrap
    }

    .footer-column:last-child h2 {
        margin-bottom:10px
    }

    .footer-bottom {
        flex-wrap:wrap;
        gap:13px
    }

    .footer-bottom>span:nth-child(2) {
        order:3;
        flex-basis:100%
    }

    .project-card .visual {
        aspect-ratio:1.3
    }

    .project-card .orbit-one {
        width:56%
    }

    .project-card .orbit-two {
        width:85%
    }

    .project-card .workflow-scene {
        margin:20px;
        display:block
    }

    .project-card .workflow-row {
        padding:7px
    }

    .project-card .workflow-heading {
        font-size:12px
    }

    .project-card .workflow-done {
        font-size:11px
    }

    .project-card .integration-scene {
        padding-inline:22px
    }

    .project-card h2 {
        font-size:27px
    }

    .project-card .project-result {
        align-items:flex-start;
        flex-direction:column;
        gap:3px
    }

    .project-card>p:not(.eyebrow) {
        font-size:13px
    }

    .closing-grid {
        gap:8%;
        grid-template-columns:1.6fr .4fr
    }

    .big-arrow .icon {
        width:64px;
        height:64px
    }

}

@media(max-width:700px) {
    :root {
        --gutter:23px;
        --header-h:72px
    }

    html {
        scroll-padding-top:95px
    }

    .header-inner {
        min-height:72px
    }

    .brand {
        font-size:26px
    }

    .brand-mark {
        font-size:27px
    }

    .home-hero {
        padding-top:41px
    }

    .home-hero-grid {
        display:flex;
        flex-direction:column;
        gap:26px
    }

    .home-hero-copy {
        width:100%;
        padding:0
    }

    .home-hero h1 {
        font-size:clamp(42px,9.8vw,66px);
        line-height:1.03;
        letter-spacing:-.063em
    }

    .home-hero .eyebrow {
        font-size:12px;
        letter-spacing:.11em;
        margin-bottom:23px
    }

    .home-hero .hero-intro {
        font-size:14px;
        margin-top:26px;
        line-height:1.8;
        max-width:550px
    }

    .home-hero .actions {
        margin-top:25px;
        gap:10px
    }

    .home-hero .button {
        font-size:12px;
        padding:14px 16px;
        min-height:48px
    }

    .hero-signature {
        font-size:10px!important;
        margin-top:23px;
        line-height:1.6
    }

    .home-hero-art {
        width:100%;
        max-width:490px;
        margin-top:17px
    }

    .home-hero-art .visual {
        transform:rotate(-1.5deg);
        aspect-ratio:1.13;
        box-shadow:8px 11px 0 #dfeee76b
    }

    .visual-top {
        padding:18px 19px;
        font-size:10px
    }

    .visual-bottom {
        padding:17px 19px;
        font-size:10px
    }

    .orbit-scene {
        min-height:248px
    }

    .orbit-center strong {
        font-size:37px
    }

    .orbit-center>span {
        font-size:9px
    }

    .orbit-label {
        font-size:10px;
        padding:8px 12px
    }

    .label-0 {
        top:8%;
        left:9%
    }

    .label-1 {
        top:22%;
        right:3%
    }

    .label-2 {
        bottom:20%;
        left:4%
    }

    .label-3 {
        bottom:6%;
        right:8%
    }

    .hero-art-note {
        padding:23px 0 6px;
        font-size:8px;
        gap:10px
    }

    .hero-art-note span:last-child {
        max-width:160px
    }

    .hero-baseline {
        padding-block:18px;
        margin-top:29px;
        font-size:10px;
        gap:17px
    }

    .hero-baseline>span:last-child {
        display:none
    }

    .content-section {
        padding-block:57px
    }

    .first-section {
        padding-top:53px
    }

    .section-heading {
        display:block;
        margin-bottom:31px
    }

    .section-heading>p {
        margin-top:21px;
        max-width:100%;
        font-size:14px
    }

    .section-heading>.text-link {
        margin-top:20px
    }

    .section-heading h2 {
        font-size:35px;
        line-height:1.12
    }

    .eyebrow {
        font-size:12px;
        letter-spacing:.11em;
        margin-bottom:18px
    }

    .service-trio {
        grid-template-columns:1fr;
        gap:15px
    }

    .service-tile {
        padding:24px
    }

    .tile-top {
        font-size:12px
    }

    .tile-visual {
        display:flex;
        padding:25px 0 24px;
        gap:20px
    }

    .tile-visual>.icon {
        width:42px;
        height:42px;
        margin:0
    }

    .tile-tokens>span {
        font-size:7px;
        padding:5px 8px
    }

    .service-tile h3 {
        min-height:0;
        font-size:28px;
        max-width:360px;
        font-weight:500
    }

    .service-tile p {
        font-size:14px;
        max-width:450px;
        margin-top:17px
    }

    .tile-bottom {
        font-size:12px;
        padding-top:17px
    }

    .goals-grid,.personal-grid,.process-grid,.trust-grid {
        grid-template-columns:1fr;
        gap:32px
    }

    .goals-grid>div>p:not(.eyebrow) {
        max-width:none
    }

    .goals-grid h2 {
        font-size:35px
    }

    .goals-grid .text-link {
        margin-top:5px
    }

    .accordion>summary {
        font-size:16px;
        padding:21px 0;
        gap:13px
    }

    .detail-body {
        font-size:14px;
        padding-left:28px
    }

    .detail-index {
        font-size:9px
    }

    .principle-section {
        padding:60px 0 53px
    }

    .principle-section h2 {
        font-size:clamp(43px,10.9vw,70px);
        line-height:1.035;
        letter-spacing:-.065em
    }

    .principle-section .eyebrow {
        margin-bottom:26px
    }

    .principle-bottom {
        grid-template-columns:1fr;
        gap:18px;
        margin-top:37px
    }

    .principle-symbol {
        display:none
    }

    .principle-bottom p {
        font-size:14px;
        line-height:1.85;
        margin-bottom:20px
    }

    .competence-list>a {
        grid-template-columns:20px 1fr 20px;
        gap:10px 14px;
        padding:25px 0
    }

    .competence-list h3 {
        font-size:23px;
        font-weight:500
    }

    .competence-list p {
        grid-column:2/3;
        font-size:13px
    }

    .competence-list>a>.icon {
        grid-column:3;
        grid-row:1;
        align-self:center;
        width:18px
    }

    .case-slide {
        grid-template-columns:1fr
    }

    .case-number {
        padding:29px;
        min-height:260px
    }

    .case-number>span {
        margin-bottom:25px;
        font-size:9px
    }

    .case-number>strong {
        font-size:67px
    }

    .case-number>p {
        font-size:17px;
        max-width:none;
        margin-top:16px
    }

    .case-number>small {
        margin-top:23px;
        font-size:8px
    }

    .case-number>small br {
        display:none
    }

    .case-slide-copy {
        padding:27px
    }

    .case-slide-copy h3 {
        font-size:30px
    }

    .case-slide-copy>p:not(.eyebrow) {
        font-size:14px;
        margin-top:19px
    }

    .case-slide-copy .tags {
        margin-bottom:22px
    }

    .carousel-controls {
        gap:9px;
        margin-top:12px
    }

    .carousel-instruction {
        font-size:10px;
        max-width:130px;
        line-height:1.5;
        margin-right:auto
    }

    .carousel-pagination {
        margin-left:auto
    }

    .carousel-pagination button {
        width:21px;
        padding:6px
    }

    .carousel-arrows {
        gap:5px
    }

    .carousel-arrows button {
        width:36px;
        height:36px
    }

    .approval-note {
        font-size:10px
    }

    .personal-manifesto h2 {
        font-size:40px
    }

    .editorial-copy {
        font-size:16px;
        line-height:1.85
    }

    .process-grid>div>p:not(.eyebrow) {
        margin-top:20px;
        font-size:14px
    }

    .process-grid h2 {
        font-size:35px
    }

    .process-list li {
        gap:18px;
        padding:22px 0
    }

    .process-list h3 {
        font-size:21px;
        line-height:1.2
    }

    .process-list p {
        font-size:16px;
        line-height:1.75
    }

    .process-list li>.icon {
        width:16px
    }

    .audit-grid {
        grid-template-columns:1fr;
        gap:17px
    }

    .audit-card {
        padding:27px
    }

    .audit-card h3 {
        font-size:29px
    }

    .audit-card>.eyebrow {
        font-size:12px
    }

    .audit-icon {
        position:absolute;
        right:24px;
        top:24px;
        width:33px;
        height:33px;
        background:transparent
    }

    .audit-icon .icon {
        width:22px;
        height:22px
    }

    .audit-card>p:not(.eyebrow) {
        font-size:14px;
        max-width:460px;
        margin-bottom:24px
    }

    .audit-card .eyebrow {
        margin-bottom:29px
    }

    .audit-deliverable strong {
        font-size:12px
    }

    .audit-deliverable {
        margin-bottom:13px
    }

    .audit-card>.text-link {
        font-size:13px
    }

    .cyncro-block {
        grid-template-columns:1fr;
        gap:35px
    }

    .cyncro-block h2 {
        font-size:44px;
        margin-bottom:23px
    }

    .cyncro-block p:not(.eyebrow) {
        font-size:14px
    }

    .cyncro-block .visual {
        aspect-ratio:1.15;
        max-width:490px;
        margin:auto
    }

    .integration-scene {
        padding:24px
    }

    .integration-hub small {
        font-size:7px
    }

    .integration-hub strong {
        font-size:24px
    }

    .integration-hub .mini-code {
        font-size:16px
    }

    .integration-sources,.integration-targets {
        gap:12px
    }

    .integration-sources span,.integration-targets span {
        font-size:8px
    }

    .trust-section h2 {
        font-size:35px
    }

    .trust-facts {
        gap:20px
    }

    .trust-facts strong {
        font-size:41px
    }

    .trust-facts span {
        font-size:12px
    }

    .page-hero {
        padding:24px 0 45px
    }

    .breadcrumbs {
        font-size:8px;
        margin-bottom:28px;
        gap:8px
    }

    .breadcrumbs>span:last-child {
        max-width:260px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }

    .page-hero.has-visual .page-hero-grid {
        grid-template-columns:1fr;
        gap:31px
    }

    .page-hero .eyebrow {
        font-size:12px;
        line-height:1.9
    }

    .page-hero.has-visual h1,.page-hero:not(.has-visual) h1 {
        font-size:clamp(37px,8.3vw,53px);
        font-weight:500;
        line-height:1.08
    }

    .page-hero .hero-intro,.page-hero.has-visual .hero-intro {
        font-size:16px;
        margin-top:24px;
        line-height:1.8
    }

    .page-hero .actions {
        margin-top:26px
    }

    .page-hero .button {
        font-size:12px;
        min-height:49px;
        padding:14px 16px
    }

    .page-hero-visual .visual {
        max-width:490px;
        margin:auto;
        aspect-ratio:1.15
    }

    .page-hero-visual .orbit-center strong {
        font-size:35px
    }

    .page-hero-visual .orbit-center>span {
        font-size:9px
    }

    .page-hero-visual .orbit-scene {
        min-height:247px
    }

    .workflow-scene {
        margin:23px 22px
    }

    .workflow-heading {
        font-size:16px
    }

    .workflow-row {
        flex-wrap:nowrap;
        padding:10px;
        gap:10px
    }

    .workflow-status {
        margin-left:0;
        font-size:9px
    }

    .workflow-row strong {
        font-size:12px
    }

    .workflow-done {
        font-size:10px;
        margin-top:17px
    }

    .page-jump .container {
        gap:9px 18px;
        padding-block:14px;
        font-size:16px
    }

    .page-jump span {
        font-size:14px;
        width:100%;
        margin-bottom:1px
    }

    .editorial-grid {
        grid-template-columns:1fr;
        gap:23px
    }

    .editorial-grid h2 {
        font-size:35px;
        line-height:1.14
    }

    .editorial-grid .eyebrow {
        font-size:12px;
        margin-bottom:16px
    }

    .section-statement h2 {
        font-size:39px;
        line-height:1.12
    }

    .section-statement {
        padding-block:55px
    }

    .editorial-copy blockquote {
        font-size:20px;
        margin:23px 0;
        padding-left:18px
    }

    .feature-grid {
        grid-template-columns:1fr;
        gap:24px
    }

    .feature {
        padding-top:19px
    }

    .feature .feature-index {
        margin-bottom:16px
    }

    .feature h3 {
        font-size:24px;
        line-height:1.22
    }

    .feature p {
        font-size:14px;
        margin-top:13px;
        line-height:1.8
    }

    .feature .text-link {
        font-size:12px
    }

    .problem-grid {
        grid-template-columns:1fr;
        gap:0
    }

    .problem-grid .accordion:nth-child(2) {
        border-top:0
    }

    .problem-grid .accordion summary {
        font-size:16px
    }

    .faq-list .accordion summary {
        font-size:16px;
        line-height:1.5
    }

    .faq-list .detail-body {
        font-size:14px;
        line-height:1.8
    }

    .metrics {
        grid-template-columns:1fr 1fr;
        gap:24px 19px;
        margin-top:29px
    }

    .metrics strong {
        font-size:43px
    }

    .metrics span {
        font-size:14px;
        margin-top:11px
    }

    .metrics>div {
        padding-top:18px
    }

    .section-proof h2 {
        font-size:34px
    }

    .section-proof .small-note {
        font-size:11px
    }

    .related-links {
        grid-template-columns:1fr;
        gap:0
    }

    .related-links>a {
        font-size:20px;
        padding:23px 0;
        gap:20px
    }

    .check-list {
        grid-template-columns:1fr;
        gap:17px
    }

    .check-list li {
        font-size:15px
    }

    .project-filter {
        gap:7px;
        margin-bottom:35px
    }

    .project-filter button {
        font-size:11px;
        padding:10px 13px
    }

    .projects-section {
        padding-top:30px
    }

    .project-grid {
        grid-template-columns:1fr;
        gap:48px
    }

    .project-card-visual .visual {
        aspect-ratio:1.4
    }

    .project-card .orbit-scene {
        min-height:222px
    }

    .project-card .orbit-one {
        width:46%
    }

    .project-card .orbit-two {
        width:68%
    }

    .project-card .integration-scene {
        padding:18px 28px
    }

    .project-card .workflow-scene {
        margin:18px 29px
    }

    .project-card .workflow-heading {
        font-size:14px
    }

    .project-card .workflow-row {
        padding:9px
    }

    .project-card .workflow-row strong {
        font-size:13px
    }

    .project-card .workflow-status {
        display:block
    }

    .project-card h2 {
        font-size:29px
    }

    .project-card>.eyebrow {
        font-size:12px
    }

    .project-card>p:not(.eyebrow) {
        font-size:14px;
        margin-top:18px
    }

    .project-card .project-result {
        flex-direction:row;
        align-items:center;
        gap:15px
    }

    .project-result strong {
        font-size:26px
    }

    .project-result span {
        font-size:11px;
        line-height:1.5
    }

    .case-overview {
        padding:28px 0
    }

    .case-meta {
        grid-template-columns:1fr;
        gap:22px
    }

    .case-meta strong {
        font-size:19px
    }

    .case-overview .small-note {
        font-size:10px
    }

    .page-case .section-editorial .editorial-copy {
        font-size:15px
    }

    .contact-section {
        padding:35px 0 53px
    }

    .contact-grid,.audit-request {
        grid-template-columns:1fr;
        gap:35px
    }

    .contact-copy {
        padding-top:0
    }

    .contact-copy h1 {
        font-size:46px
    }

    .contact-copy .hero-intro {
        font-size:16px;
        margin-top:26px
    }

    .contact-options {
        margin:25px 0 30px
    }

    .contact-options strong {
        font-size:20px
    }

    .contact-options small {
        font-size:8px
    }

    .contact-options>a {
        padding:18px 0
    }

    .contact-expect h2 {
        font-size:24px
    }

    .contact-expect li {
        font-size:13px
    }

    .contact-expect p {
        font-size:12px
    }

    .contact-location {
        font-size:9px
    }

    .contact-form {
        padding:24px 20px
    }

    .form-header h2 {
        font-size:28px
    }

    .form-header .eyebrow {
        font-size:12px
    }

    .form-header p {
        font-size:12px
    }

    .form-header {
        margin-bottom:23px;
        padding-bottom:23px
    }

    .form-fields {
        gap:16px
    }

    .field input,.field select,.field textarea {
        font-size:16px
    }

    .field label {
        font-size:12px
    }

    .privacy-field label {
        font-size:11px
    }

    .form-submit {
        font-size:13px;
        min-height:50px
    }

    .audit-assurance .container {
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        padding-block:18px
    }

    .audit-assurance span {
        font-size:16px
    }

    .audit-request h2 {
        font-size:37px;
        overflow-wrap:anywhere
    }

    .audit-request .form-header h2 {
        font-size:26px;
        overflow-wrap:normal
    }

    .closing-cta {
        padding:57px 0 60px
    }

    .closing-grid {
        grid-template-columns:1fr
    }

    .closing-cta h2 {
        font-size:clamp(39px,9.2vw,58px);
        line-height:1.1
    }

    .closing-cta p:not(.eyebrow) {
        font-size:14px;
        line-height:1.8;
        margin-top:24px
    }

    .closing-cta .actions {
        margin-top:28px
    }

    .closing-cta .button {
        font-size:12px;
        padding:14px 15px;
        gap:13px
    }

    .big-arrow {
        display:none
    }

    .site-footer {
        padding-top:46px
    }

    .footer-top {
        grid-template-columns:1fr 1fr;
        gap:33px 22px;
        padding-bottom:30px
    }

    .footer-brand {
        grid-column:1/-1
    }

    .footer-brand .brand {
        font-size:32px
    }

    .footer-brand p {
        font-size:14px;
        margin:19px 0 17px
    }

    .footer-column h2 {
        margin-bottom:17px;
        font-size:11px
    }

    .footer-column li {
        font-size:13px;
        line-height:1.55;
        margin-bottom:10px
    }

    .footer-column:last-child {
        grid-column:1/-1
    }

    .footer-column:last-child ul {
        gap:15px
    }

    .footer-column:last-child h2 {
        margin-bottom:14px
    }

    .footer-bottom {
        font-size:9px;
        padding-top:20px;
        gap:15px 8px
    }

    .footer-bottom>div {
        gap:17px
    }

    .footer-bottom>span:nth-child(2) {
        font-size:9px;
        line-height:1.8;
        max-width:300px
    }

    .review-note {
        font-size:8px;
        line-height:1.7;
        padding-top:18px
    }

    .utility-section {
        padding:60px 0 80px
    }

    .utility-section h1 {
        font-size:42px
    }

    .utility-section p:not(.eyebrow) {
        font-size:15px
    }

    .error-number {
        font-size:90px;
        margin-bottom:28px
    }

    .legal-copy h2 {
        font-size:26px
    }

    .legal-copy p {
        font-size:14px
    }

    .legal-notice {
        padding:22px
    }

    .legal-notice h2 {
        font-size:24px
    }

    .utility-section .actions {
        gap:10px
    }

    .utility-section .button {
        font-size:12px;
        padding:14px 15px
    }

}

@media(max-width:360px) {
    :root {
        --gutter:19px
    }

    .home-hero h1 {
        font-size:41px
    }

    .home-hero .button {
        padding:13px 11px;
        gap:10px;
        font-size:11px
    }

    .hero-signature {
        font-size:8px!important
    }

    .orbit-label {
        font-size:9px
    }

    .visual-bottom {
        font-size:9px;
        padding:16px
    }

    .visual-top {
        font-size:9px
    }

    .tile-tokens>span {
        font-size:6px;
        padding:5px 6px
    }

    .carousel-instruction {
        max-width:90px
    }

    .case-number>strong {
        font-size:60px
    }

    .contact-copy h1 {
        font-size:40px
    }

    .contact-form {
        padding:21px 17px
    }

    .workflow-status {
        font-size:8px
    }

    .workflow-row strong {
        font-size:11px
    }

    .integration-hub small {
        font-size:6px
    }

}

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

    *,*:before,*:after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important
    }

    [data-reveal].reveal-pending {
        opacity:1;
        transform:none
    }

}

@media print {
    .site-header,.site-footer,.page-jump,.actions,.contact-form,.carousel-controls,.project-filter,.big-arrow,.visual,.closing-cta {
        display:none!important
    }

    body {
        font-size:11pt;
        color:#000;
        background:white
    }

    .container {
        width:100%;
        max-width:none
    }

    .home-hero-grid,.editorial-grid,.case-slide,.cyncro-block,.page-hero-grid {
        display:block!important
    }

    .content-section,.page-hero,.principle-section {
        padding:25px 0!important;
        background:white!important;
        color:black!important
    }

    .dark-section * {
        color:black!important
    }

    .case-track {
        display:block;
        overflow:visible
    }

    .case-slide {
        margin-bottom:20px;
        break-inside:avoid
    }

    .case-number {
        background:white;
        color:black;
        padding:10px
    }

    .case-number strong {
        color:black;
        font-size:40px
    }

    .case-slide-copy {
        padding:10px
    }

    details>* {
        display:block!important
    }

    .accordion>summary {
        font-size:14px
    }

    h1 {
        font-size:30pt!important
    }

    h2 {
        font-size:22pt!important
    }

    [data-reveal] {
        opacity:1!important;
        transform:none!important
    }

}

/* Long German compound nouns must never widen a small viewport. */
@media(max-width:700px) {
    h1,h2,h3 {
        overflow-wrap:anywhere;
        hyphens:auto
    }

}

html:not(.js) .menu-toggle {
    display:none
}

/* Bilingual navigation: always visible, including mobile and no-JavaScript views. */
.header-inner {
    gap:clamp(12px,1.6vw,25px)
}

.header-inner>.brand {
    order:0;
    flex-shrink:0
}

.header-inner>.main-nav {
    order:1;
    margin-left:auto
}

.header-inner>.language-switch {
    order:2
}

.header-inner>.menu-toggle {
    order:3
}

.language-switch {
    display:inline-flex;
    align-items:center;
    gap:2px;
    padding:3px;
    border:1px solid var(--line);
    border-radius:8px;
    flex-shrink:0;
    font-family:var(--mono);
    font-size:11px;
    line-height:1;
    letter-spacing:.02em
}

.language-switch>a,.language-switch>.language-current {
    min-width:32px;
    min-height:34px;
    display:grid;
    place-items:center;
    padding:5px;
    border-radius:5px;
    text-decoration:none
}

.language-switch>.language-current {
    background:var(--ink);
    color:var(--paper);
    font-weight:700
}

.language-switch>a:hover {
    background:var(--cyan);
    color:var(--ink)
}

.footer-bottom>.language-switch {
    border-color:rgba(255,255,255,.2);
    gap:2px
}

.footer-bottom>.language-switch>.language-current {
    background:var(--cyan);
    color:var(--ink)
}

.footer-bottom>.language-switch>a {
    margin:0;
    color:inherit
}

@media(max-width:1190px) and (min-width:981px) {
    .main-nav {
        gap:14px
    }

    .header-inner {
        gap:14px
    }

    .language-switch>a,.language-switch>.language-current {
        min-width:28px
    }

    .brand {
        font-size:25px
    }

}

@media(max-width:980px) {
    .header-inner>.main-nav {
        order:4;
        margin-left:0
    }

    .header-inner>.language-switch {
        margin-left:auto
    }

    .header-inner {
        gap:12px
    }

    .main-nav {
        flex-basis:100%
    }

    .language-switch>a,.language-switch>.language-current {
        min-width:32px;
        min-height:34px
    }

}

@media(max-width:700px) {
    .footer-bottom>.footer-location {
        order:3;
        flex-basis:100%
    }

    .footer-bottom>span:nth-child(2) {
        order:initial;
        flex-basis:auto
    }

    .footer-bottom {
        gap:16px
    }

    .language-switch {
        font-size:10px
    }

    .header-inner {
        gap:10px
    }

    .language-switch>a,.language-switch>.language-current {
        min-width:30px
    }

    .footer-bottom>.language-switch {
        margin-right:auto
    }

}