/*
「क्षेत्रविस्तारः — अनुकर्तुः शाश्वतदुःखं निष्फलता च」

यः कश्चिद् मया लिखितं विनानुज्ञया प्रयुञ्जीत वा येन केनचित् प्रकारेणानुकुर्यात्,
स जनः आजीवनं दुःखयातनां सहेत, तस्य च सर्वाणि कर्माणि निष्फलानि भवेयुः।
*/

:root{
    --red:#E4231C; --red-dark:#94120D; --amber:#FFC93C; --amber-deep:#FF8A00;
    --ink:#1C120B; --cream:#FFF6EE; --paper:#FFFFFF; --muted:#7A6A61;
    --line:rgba(28,18,11,.10); --shadow:0 20px 45px -20px rgba(148,18,13,.35);
    --display:'Sora',system-ui,sans-serif; 
    --body:Inter, ui-sans-serif, system-ui, -apple-system,BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace; 
    /*--header-h:92px;*/
    --header-h:88px;

    --cc-bg:#FFFFFF;
    --cc-text:#202124;
    --cc-muted:#5F6368;
    --cc-border:#DADCE0;
    --cc-soft:#F1F1F1;
    --cc-primary:#1D1D1D;
    --cc-primary-text:#FFFFFF;
    --cc-backdrop:rgba(0,0,0,.48);
    --cc-radius:14px;
    --cc-shadow:0 18px 60px rgba(0,0,0,.20);
}
html[data-theme="dark"]{
    --ink:#FFF6EE; --cream:#120D09; --paper:#1E1712; --muted:#A9998C;
    --line:rgba(255,246,238,.12); --shadow:0 20px 45px -20px rgba(0,0,0,.65);
    --cc-bg:#1E1712;
    --cc-text:#FFF6EE;
    --cc-muted:#A9998C;
    --cc-border:rgba(255,246,238,.14);
    --cc-soft:#30251E;
    --cc-primary:#FFF6EE;
    --cc-primary-text:#1E1712;
    --cc-backdrop:rgba(0,0,0,.64);
    --cc-shadow:0 18px 60px rgba(0,0,0,.55);
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    margin: 0;
    padding: 0;
    min-height: 100%;

    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%;

    font-family: var(--body);
    color: var(--ink);
    background: var(--cream);

    -webkit-font-smoothing: antialiased;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}
a{
    color:inherit
}
button {
    font: inherit;
}
.wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 36px;
}
.icon {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
    html {
    scroll-behavior: auto;
    }
    * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    }
}

/*===NAVBAR: retained visual system===*/
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 24px 0;
    background: rgba(228, 35, 28, 0.96);
    transition: background 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
}
#site-header.scrolled {
    background: rgba(255, 246, 238, 0.92);
    backdrop-filter: blur(10px);
    padding: 17px 0;
    box-shadow: 0 1px 0 var(--line);
}
html[data-theme="dark"] #site-header.scrolled {
    background: rgba(18, 13, 9, 0.88);
}
#site-header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 22px;
    color: #fff;
    text-decoration: none;
    transition: color 0.25s ease;
}
#site-header.scrolled .brand {
    color: var(--ink);
}
.brand .hex-mark {
    width: 42px;
    height: 42px;
    flex: none;
}
.navlinks {
    display: flex;
    gap: 38px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navlinks a {
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    position: relative;
    padding: 4px 0;
    transition: color 0.25s ease;
}
#site-header.scrolled .navlinks a {
    color: var(--muted);
}
.navlinks a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: var(--amber);
    transition: width 0.2s ease;
}
#site-header.scrolled .navlinks a::after {
    background: var(--red);
}
.navlinks a:hover::after,
.navlinks a.active::after {
    width: 100%;
}
#site-header.scrolled .navlinks a:hover,
#site-header.scrolled .navlinks a.active {
    color: var(--ink);
}
.nav-cta {
    display: flex;
    align-items: center;
    gap: 18px;
}

/*===LANGUAGE DROPDOWN===*/
.lang-switch {
    position: relative;
}
.lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    padding: 10px 17px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lang-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
#site-header.scrolled .lang-btn {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}
.lang-btn .icon {
    width: 18px;
    height: 18px;
}
.lang-caret {
    transition: transform 0.2s ease;
}
.lang-switch.open .lang-caret {
    transform: rotate(180deg);
}
.lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 150px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 6px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 120;
}
.lang-switch.open .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-menu li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
}
.lang-menu li:hover {
    background: rgba(228, 35, 28, 0.08);
}
.lang-menu li.active {
    color: var(--red);
    font-weight: 600;
}
.lang-menu li.active::after {
    content: "✓";
    font-size: 12px;
}

/*===LIGHT / DARK TOGGLE===*/
.theme-toggle {
    position: relative;
    width: 58px;
    height: 34px;
    flex: none;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    padding: 0;
}
#site-header.scrolled .theme-toggle {
    border-color: var(--line);
    background: var(--cream);
}
.theme-toggle::before {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease, background 0.25s ease;
}
html[data-theme="dark"] .theme-toggle::before {
    transform: translateX(24px);
    background: var(--ink);
}
.theme-toggle .icon {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
}
.theme-icon-sun {
    left: 6px;
    color: var(--amber-deep);
}
.theme-icon-moon {
    right: 6px;
    color: var(--muted);
    opacity: 0.6;
}
html[data-theme="dark"] .theme-icon-sun {
    opacity: 0.5;
}
html[data-theme="dark"] .theme-icon-moon {
    opacity: 1;
    color: var(--amber);
}
.menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #fff;
}
#site-header.scrolled .menu-btn {
    color: var(--ink);
}

/*===COOKIES===*/
.cc-banner,
.cc-modal,
.cc-settings{
    font-family:var(--body);
    color:var(--cc-text);
}

.cc-banner{
    position:fixed;
    z-index:10000;
    left:50%;
    bottom:20px;
    width:min(520px,calc(100vw - 32px));
    padding:20px;
    transform:translateX(-50%) translateY(12px) scale(.98);
    background:var(--cc-bg);
    border:1px solid var(--cc-border);
    border-radius:var(--cc-radius);
    box-shadow:var(--cc-shadow);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
}

.cc-banner.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0) scale(1);
}
.cc-banner.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(12px) scale(.98);
}

.cc-copy h2,
.cc-panel h2,
.cc-option h3{
    margin:0 0 6px;
}

.cc-copy p,
.cc-panel>p,
.cc-option p{
    margin:0;
    color:var(--cc-muted);
    line-height:1.5;
}

.cc-copy h2{
    font-size:18px;
}

.cc-copy p{
    font-size:14px;
}

.cc-banner a{
    display:inline-block;
    margin-top:8px;
    color:var(--cc-text);
    font-size:13px;
}

.cc-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:14px;
}

.cc-button{
    min-height:38px;
    padding:9px 14px;
    border:0;
    border-radius:9px;
    background:var(--cc-soft);
    color:var(--cc-text);
    font:inherit;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:opacity .15s ease,transform .15s ease;
}

.cc-button:hover{
    opacity:.86;
}

.cc-button:active{
    transform:scale(.98);
}

.cc-button.primary{
    background:var(--cc-primary);
    color:var(--cc-primary-text);
}

.cc-manage{
    display:block;
    margin:16px auto 0;
    padding:0;
    border:0;
    background:none;
    color:var(--cc-text);
    font:inherit;
    font-size:14px;
    text-decoration:underline;
    cursor:pointer;
}

.cc-modal{
    position:fixed;
    z-index:10001;
    inset:0;
    display:grid;
    place-items:center;
    padding:16px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s;
}

.cc-modal.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.cc-backdrop{
    position:absolute;
    inset:0;
    background:var(--cc-backdrop);
}

.cc-panel{
    position:relative;
    z-index:1;
    width:min(520px,100%);
    max-height:90vh;
    overflow:auto;
    padding:22px;
    background:var(--cc-bg);
    border:1px solid var(--cc-border);
    border-radius:var(--cc-radius);
    box-shadow:var(--cc-shadow);
}

.cc-panel h2{
    margin-right:38px;
    font-size:18px;
}

.cc-panel>p{
    margin-bottom:12px;
    font-size:14px;
}

.cc-close{
    position:absolute;
    top:10px;
    right:13px;
    padding:4px;
    border:0;
    background:none;
    color:var(--cc-text);
    font-size:26px;
    line-height:1;
    cursor:pointer;
}

.cc-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:15px 0;
    border-bottom:1px solid var(--cc-border);
}

.cc-option h3{
    font-size:14px;
}

.cc-option p{
    font-size:13px;
}

.cc-option strong{
    flex:none;
    font-size:12px;
}

.cc-option input{
    width:20px;
    height:20px;
    flex:none;
    accent-color:var(--cc-primary);
}

.cc-panel .cc-actions{
    margin-top:18px;
}

.cc-settings{
    position:fixed;
    z-index:9999;
    left:16px;
    bottom:16px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 13px;
    border:1px solid var(--cc-border);
    border-radius:999px;
    background:var(--cc-bg);
    color:var(--cc-text);
    box-shadow:0 4px 18px rgba(0,0,0,.14);
    font:inherit;
    font-size:13px;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s;
}

.cc-settings.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

@media(max-width:560px){
    .cc-banner{
        bottom:10px;
        width:calc(100vw - 20px);
    }

    .cc-actions{
        grid-template-columns:1fr;
    }
}

/*===CLEAN SECTION SKELETONS===*/
main {
    padding-top: var(--header-h);
}
.section-frame {
    min-height: 70vh;
    padding: 88px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}
.section-frame:nth-child(even) {
    background: var(--cream);
}
.frame {
    width: 100%;
    min-height: 340px;
    border: 1.5px dashed var(--line);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.frame-kicker {
    margin: 0 0 10px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}
.frame h1,
.frame h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 46px);
}
.frame-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
}

/* HOME SECTION: one full-bleed section containing both procedural layers. */
.home {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg,#c9051a 0%,#d92f27 35%,#e84c30 65%,#f2623e 100%);
}
.home__background { z-index: 0; pointer-events: none; }
.home__stage { z-index: 1; }

/*===HOME SECTION===*/

.home__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.home__stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1212px;
    height: 864px;
    transform-origin: center center;
    overflow: hidden;
}
.home__foreground,
.home__globe {
    position: absolute;
    inset: 0;
    width: 1212px;
    height: 864px;
    display: block;
    pointer-events: none;
}

.home__foreground { z-index: 0; }
.home__globe { z-index: 2; }

.home__content {
    position: absolute;
    inset: 0;
    width: 1212px;
    height: 864px;
    z-index: 1;
    pointer-events: none;
}

.home__stage > .hex-mark {
    position: absolute;
    left: 50%;
    top: 53.5%;
    width: 15.7%;
    height: auto;
    aspect-ratio: 808 / 973;
    transform: translate(-50%, -50%);
    display: block;
    overflow: visible;
    z-index: 3;
    pointer-events: none;
}


/*===Business-software overlays.===*/
.home__business-words {
    position: absolute;
    inset: 0;
    overflow: hidden;
    padding-top: 0;
    top: -10px;
    color: #fff;
    font-size: 20px;
    line-height: 1.32;
    letter-spacing: .002em;
    text-transform: uppercase;
    pointer-events: none;
}
.home__business-words .line {
    display: block;
    white-space: nowrap;
    text-align: left;
    margin: 0;
    transform-origin: left center;
}
.home__business-words .strong { font-weight: 800; }
.home__business-words .small { font-size: 17px; }

/* Fixed-pixel indents preserve the composition without vw/% font scaling. */
.home__business-words .l1  { transform: translateX(20px); }
.home__business-words .l2  { transform: translateX(7px); }
.home__business-words .l3  { transform: translateX(0); }
.home__business-words .l4  { transform: translateX(-7px); }
.home__business-words .l5  { transform: translateX(-14px); }
.home__business-words .l6  { transform: translateX(-21px); }
.home__business-words .l7  { transform: translateX(-21px); }
.home__business-words .l8  { transform: translateX(-14px); }
.home__business-words .l9  { transform: translateX(-7px); }
.home__business-words .l10 { transform: translateX(7px); }
.home__business-words .l11 { transform: translateX(21px); }
.home__business-words .l12 { transform: translateX(35px); }
.home__business-words .l13 { transform: translateX(55px); }
.home__business-words .l14 { transform: translateX(76px); }
.home__business-words .l15 { transform: translateX(97px); }
.home__business-words .l16 { transform: translateX(124px); }
.home__business-words .l17 { transform: translateX(152px); }
.home__business-words .l18 { transform: translateX(187px); }

.home__business-icons {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.home__business-icons .icon-row {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    gap: 18px;
}

/*
    Every row starts slightly underneath the globe. The globe is above this
*/
.home__business-icons .r1 { top: 458px; left: 716px; }
.home__business-icons .r2 { top: 538px; left: 678px; }
.home__business-icons .r3 { top: 618px; left: 700px; }
.home__business-icons .r4 { top: 698px; left: 662px; }
.home__business-icons .r5 { top: 778px; left: 684px; }

.home__business-icons svg {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    overflow: hidden;
    filter: brightness(0) invert(1);
    opacity: .98;
}

/* Top-right company title: anchored to the fixed 1212x864 design stage so it
    keeps the same composition through browser resize and zoom. */
.home__company-title {
    position: absolute;
    top: 30px;
    right: 48px;
    z-index: 4;
    color: #fff;
    text-align: right;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1.15;
}
.home__company-title strong {
    display: block;
    font-size: 39px;
    font-weight: 800;
    letter-spacing: .01em;
}
.home__company-title span {
    display: block;
    margin-top: 5px;
    font-size: 33px;
    font-weight: 400;
    letter-spacing: .01em;
}

/*===WORKFLOR SECTION===*/
.workflow{
    /* light = matches the reference: vivid pink-to-orange */
    --bg-a: #ec4899;
    --bg-b: #f36a4f;
    --bg-c: #f97316;
    --surface: rgba(255,255,255,0.14);
    --surface-strong: rgba(255,255,255,0.24);
    --border: rgba(255,255,255,0.38);
    --grid: rgba(255,255,255,0.42);
    --line: rgba(255,255,255,0.55);
    --text: #fffdfb;
    --muted: rgba(255,255,255,0.78);
    --accent: #f5d178;
    --accent-soft: rgba(255,231,168,0.35);
    --warm: #fff2d6;
    --warm-strong: #ffffff;
    --dot: rgba(255,255,255,0.16);
    --node-active-solid: #FFFFFF;
}

html[data-theme="dark"] .workflow{
    --bg-a: #2a0e21;
    --bg-b: #401a20;
    --bg-c: #3a1a0a;
    --surface: rgba(0,0,0,0.32);
    --surface-strong: rgba(0,0,0,0.46);
    --border: rgba(255,255,255,0.14);
    --grid: rgba(255,255,255,0.18);
    --line: rgba(255,255,255,0.28);
    --text: #f7ece7;
    --muted: rgba(247,236,231,0.62);
    --accent: #f5d178;
    --accent-soft: rgba(255,181,107,0.28);
    --warm: #ff9b4d;
    --warm-strong: #ffc98a;
    --dot: rgba(255,255,255,0.06);
    --node-active-solid: #FFFFFF;
}

*{ box-sizing: border-box; }


.workflow{
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(32px, 4vw, 64px) clamp(28px, 6vw, 96px) clamp(56px, 6vw, 96px);
    overflow: hidden;
    color: var(--text);
    background: linear-gradient(125deg, var(--bg-a) 0%, var(--bg-b) 55%, var(--bg-c) 100%);
}

.workflow .head {
    max-width: 700px;
    margin-bottom: 50px;
}

.stage-row {
    display: flex;
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;

    gap: clamp(70px, 8vw, 140px);
    align-items: center;
    justify-content: center;
}

.stage {
    position: relative;

    flex: 0 1 720px;
    width: min(55vw, 720px);
    max-width: 720px;

    aspect-ratio: 1 / 1;
}

.panel {
    flex: 0 1 460px;
    width: min(34vw, 460px);
    max-width: 460px;

    padding: 34px;
    min-height: 400px;

    position: static;
}

.workflow::before{
    content:"";
    position:absolute;
    inset: -20% -10%;
    background-image: radial-gradient(circle, var(--dot) 1.4px, transparent 1.6px);
    background-size: 28px 28px;
    pointer-events:none;
    z-index:0;
}

.workflow > *{ position:relative; z-index:1; }
.workflow .head{
    display:flex;
    flex-direction:column;
    gap:8px;
    width: min(100%, 720px);
    max-width: 720px;
    margin: 0 auto clamp(28px, 3vw, 48px);
    align-self: stretch;
}

.eyebrow{
    font-size:14px;
    color: var(--muted);
    font-weight: 500;
}

.workflow .head h1{
    margin:0;
    font-size: clamp(32px, 3.2vw, 48px);
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.15;
}

.workflow .head p{
    margin:0;
    color: var(--muted);
    font-size:clamp(15px, 1.15vw, 18px);
    line-height:1.55;
}

.stage-row{
    display:grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr);
    gap: clamp(40px, 6vw, 110px);
    align-items:center;
    width: min(100%, 1240px);
    margin: 0 auto;
}

.stage{
    position:relative;
    width: 100%;
    max-width: 720px;
    justify-self: center;
    aspect-ratio: 1/1;
}

.stage svg{ width:100%; height:100%; display:block; overflow: visible; }

.hex-outline{ fill: none; stroke: var(--grid); stroke-width: 1.5; }
.spoke{ stroke: var(--grid); stroke-width: 1; opacity: 0.7; }

.ring-sweep{
    fill:none; stroke: var(--warm-strong); stroke-opacity: 0.22;
    stroke-width: 1; stroke-dasharray: 2 10;
    transform-origin: 300px 300px;
    animation: ringRotate 9s linear infinite, ringBreathe 3.2s ease-in-out infinite;
}

@keyframes ringRotate{
    to{ stroke-dashoffset: -240; }
}

@keyframes ringBreathe{
    0%, 100%{ stroke-opacity: 0.16; transform: scale(1); }
    50%{ stroke-opacity: 0.36; transform: scale(1.012); }
}

.ring-sonar{
    fill:none; stroke: var(--warm-strong); stroke-width: 2;
    opacity: 0; transform-origin: 300px 300px;
    animation: ringSonar 4.2s ease-out infinite;
}

@keyframes ringSonar{
    0%{ transform: scale(0.86); opacity: 0.85; }
    70%{ transform: scale(1.16); opacity: 0; }
    100%{ transform: scale(1.16); opacity: 0; }
}

.node-ripple{
    fill:none; stroke: var(--warm-strong); stroke-width: 2.5;
    pointer-events: none;
}

.traveler{ fill: var(--warm-strong); filter: drop-shadow(0 0 6px var(--warm-strong)); }

.node circle.node-ring{
    fill: transparent;
    stroke: var(--line);
    stroke-width: 1.5;
    transition: stroke 0.25s ease, filter 0.25s ease, fill 0.2s ease;
}
.node circle.node-hit{ fill: transparent; cursor: pointer; }

.node text.node-num{
    fill: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    text-anchor: middle;
    dominant-baseline: middle;
    transition: fill 0.25s ease;
    pointer-events:none;
}

.node text.node-label{
    fill: var(--text);
    font-size: 15px;
    font-weight: 500;
    pointer-events:none;
}
html[lang="th"] .workflow .node text.node-label{ font-size:14px; }

.node:focus{ outline:none; }
.node:focus circle.node-ring{
    stroke: var(--warm-strong);
    filter: drop-shadow(0 0 0 2px var(--accent-soft));
}

.node.active circle.node-ring{
    stroke: var(--warm-strong);
    fill: var(--node-active-solid);
    filter: drop-shadow(0 0 12px var(--accent-soft));
}
.node.active text.node-num{ fill: var(--bg-b); }

.node.pinned circle.node-ring{
    stroke: var(--accent);
    filter: drop-shadow(0 0 12px var(--accent-soft));
}
.node.pinned text.node-num{ fill: var(--accent); }

@keyframes nodeFlashBg{
    0%{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
    30%{ filter: drop-shadow(0 0 22px var(--accent)); }
    100%{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
}
.node.flash circle.node-ring{
    animation: nodeFlashBg 600ms ease-out;
}

@keyframes numScramble{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.18); }
}
.node text.node-num.num-scramble{
    fill: var(--accent);
    transform-box: fill-box;
    transform-origin: center;
    animation: numScramble 320ms ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
    .node.flash circle.node-ring,
    .node text.node-num.num-scramble{
    animation: none;
    }
}

.cursor-hand{
    stroke: var(--warm-strong);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.95;
    transition: opacity 0.25s ease;
}
.cursor-hand.idle{ opacity: 0.3; }
.cursor-hand-tip{ fill: var(--warm-strong); filter: drop-shadow(0 0 5px var(--warm-strong)); transition: opacity 0.25s ease; }
.cursor-hand-tip.idle{ opacity: 0.3; }
.clock-tick{ stroke: var(--muted); stroke-width: 1; opacity: 0.6; }
.hand{ stroke-linecap: round; }
.hand-hour{ stroke: var(--text); stroke-width: 3.5; }
.hand-min{ stroke: var(--text); stroke-width: 2.5; }
.hand-sec{ stroke: var(--accent); stroke-width: 1.2; }
.hub{ fill: var(--accent); }

.digital{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; fill: var(--text); text-anchor: middle; }
.tz{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; fill: var(--muted); text-anchor: middle; letter-spacing: 0.04em; }

.panel{
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: clamp(28px, 3vw, 40px);
    display:flex;
    flex-direction:column;
    gap: 14px;
    align-self:flex-start;
    position: sticky;
    top: 32px;
    min-height: clamp(360px, 32vw, 440px);
    backdrop-filter: blur(10px);
}

.panel .stepno{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--text); opacity:0.85; }
.panel.pinned .stepno{ color: var(--accent); }

.panel h2{ margin:0; font-size: 24px; font-weight: 600; }

.panel .role{
    margin:0; font-size: 13px; color: var(--muted);
    border-left: 2px solid var(--border); padding-left: 10px; line-height:1.5;
}

.panel p.desc{ margin:0; font-size: 15px; line-height: 1.6; color: var(--text); }

.panel .hint{ margin-top: auto; font-size: 13px; color: var(--muted); line-height:1.5; }

.panel .flow{ font-size: 13px; color: var(--muted); }
.panel .flow b{ color: var(--text); font-weight:600; }

@media (max-width: 1500px){
    .workflow{
        padding: 32px 20px 56px;
    }
    .workflow .head{
        margin-bottom: 24px;
    }
    .stage-row{
        display:flex;
        flex-direction: column;
        gap: 28px;
    }
    .stage{
        width: min(100%, 640px);
    }
    .panel{
        position: static;
        width: min(100%, 640px);
        max-width: none;
        min-height: 0;
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce){
    .traveler, .ring-sweep, .ring-sonar, .node-ripple{ display:none; }
    .ring-sweep{ animation: none; }
}

/* applied by the IntersectionObserver below when the section scrolls out of view */
.workflow.anim-paused *{
    animation-play-state: paused !important;
}

/*===BACK TO TOP===*/
#to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--amber);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 90;
}
#to-top.show {
    opacity: 1;
    pointer-events: auto;
}
#to-top:hover {
    transform: translateY(-3px);
}

/*===SCREEN SIZE CHANGE===*/
@media (max-width: 980px) {
    .navlinks {
    display: none;
    position: fixed;
    top: 64px;
    right: 20px;
    left: 20px;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
    gap: 16px;
    }
    .navlinks.mobile-open {
    display: flex;
    }
    .navlinks a,
    .navlinks a.active {
    color: var(--ink);
    }
    .menu-btn {
    display: block;
    }
}
@media (max-width: 480px) {
    .lang-label {
    display: none;
    }
    .lang-btn {
    padding: 8px;
    }
    .wrap {
    padding: 0 18px;
    }
}

/* === WORKFLOW ITERATION 2: 16:9 full-size geometry + centralized type scale === */
:root {
  --wf-text-eyebrow: clamp(15px, 0.72vw, 19px);
  --wf-text-title: clamp(40px, 2.35vw, 60px);
  --wf-text-subtitle: clamp(16px, 0.86vw, 22px);
  --wf-text-node: clamp(15px, 0.72vw, 18px);
  --wf-text-node-num: clamp(12px, 0.60vw, 15px);
  --wf-text-clock: clamp(15px, 0.72vw, 18px);
  --wf-text-timezone: clamp(9px, 0.45vw, 12px);
  --wf-text-step: clamp(13px, 0.64vw, 16px);
  --wf-text-panel-title: clamp(25px, 1.25vw, 32px);
  --wf-text-panel-body: clamp(16px, 0.78vw, 20px);
  --wf-text-panel-small: clamp(13px, 0.65vw, 17px);
}

@media (min-width: 1400px) {
  .workflow {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    padding: clamp(54px, 4.2vw, 108px) 0 clamp(58px, 4.5vw, 116px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 800px) clamp(64px, 4vw, 104px) minmax(420px, 500px) minmax(80px, 1fr);
    grid-template-rows: auto 1fr;
    align-content: start;
  }

  .workflow .head {
    grid-column: 2 / 3;
    grid-row: 1;
    width: 100%;
    max-width: 800px;
    margin: 0 0 clamp(34px, 2.4vw, 62px);
    gap: 8px;
    align-self: start;
  }

  .workflow .stage-row {
    grid-column: 2 / 5;
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 800px) clamp(64px, 4vw, 104px) minmax(420px, 500px);
    gap: 0;
    align-items: center;
  }

  .workflow .stage {
    grid-column: 1;
    width: 100%;
    max-width: 800px;
    justify-self: stretch;
  }

  .workflow .panel {
    grid-column: 3;
    width: 100%;
    max-width: 500px;
    min-height: clamp(390px, 28vw, 470px);
    padding: clamp(30px, 2vw, 42px);
    position: static;
    align-self: center;
  }
}

.workflow .eyebrow { font-size: var(--wf-text-eyebrow); }
.workflow .head h1 { font-size: var(--wf-text-title); line-height: 1.10; }
.workflow .head p { font-size: var(--wf-text-subtitle); line-height: 1.52; }
.workflow .node text.node-label { font-size: var(--wf-text-node); }
.workflow .node text.node-num { font-size: var(--wf-text-node-num); }
.workflow .digital { font-size: var(--wf-text-clock); }
.workflow .tz { font-size: var(--wf-text-timezone); }
.workflow .panel .stepno { font-size: var(--wf-text-step); }
.workflow .panel h2 { font-size: var(--wf-text-panel-title); }
.workflow .panel p.desc { font-size: var(--wf-text-panel-body); }
.workflow .panel .role,
.workflow .panel .hint,
.workflow .panel .flow { font-size: var(--wf-text-panel-small); }

/* === WORKFLOW ITERATION 3: enlarge the CONTENT, not just the section === */
:root {
  --wf-text-eyebrow: clamp(17px, 0.82vw, 21px);
  --wf-text-title: clamp(48px, 2.75vw, 70px);
  --wf-text-subtitle: clamp(18px, 1.00vw, 25px);
  --wf-text-node: clamp(18px, 0.84vw, 22px);
  --wf-text-node-num: clamp(14px, 0.68vw, 18px);
  --wf-text-clock: clamp(18px, 0.84vw, 22px);
  --wf-text-timezone: clamp(11px, 0.52vw, 14px);
  --wf-text-step: clamp(15px, 0.72vw, 19px);
  --wf-text-panel-title: clamp(30px, 1.48vw, 38px);
  --wf-text-panel-body: clamp(18px, 0.90vw, 23px);
  --wf-text-panel-small: clamp(15px, 0.76vw, 19px);
}

@media (min-width: 981px) {
  .workflow {
    /* Keep the 2560x1440 section, but give its children a much larger canvas. */
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    padding: clamp(52px, 3.4vw, 88px) 0 clamp(44px, 3vw, 76px);
  }

  .workflow .head {
    grid-column: 1;
    grid-row: 1;
    width: min(760px, 31vw);
    max-width: 760px;
    /* Reference position: around x=840 on a 2560-wide viewport. */
    margin: 0 0 clamp(22px, 1.7vw, 44px) calc(50% - 440px);
  }

  .workflow .stage-row {
    grid-column: 1;
    grid-row: 2;
    width: min(1700px, 72vw);
    max-width: 1700px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1000px) clamp(72px, 4vw, 104px) minmax(500px, 600px);
    align-items: center;
  }

  .workflow .stage {
    width: 100%;
    max-width: 1000px;
  }

  .workflow .panel {
    width: 100%;
    max-width: 600px;
    min-height: clamp(450px, 24vw, 560px);
    padding: clamp(36px, 2vw, 50px);
  }
}

/* === WORKFLOW FINAL RESPONSIVE ALIGNMENT FIX === */
@media (min-width: 981px) {
  .workflow {
    /* Do not crop the SVG when the viewport is shorter than a 16:9 desktop. */
    aspect-ratio: auto;
    min-height: min(100vh, 1440px);
    overflow: hidden;
  }

  .workflow .stage-row {
    /* One shared geometry for the diagram, spacer, and panel. */
    width: min(1700px, 78vw);
    grid-template-columns: minmax(0, 1fr) clamp(56px, 4vw, 96px) minmax(420px, 560px);
  }

  .workflow .head {
    /* Start exactly on the same left edge as the hex/SVG column. */
    width: min(760px, 100%);
    margin-left: calc((100% - min(1700px, 78vw)) / 2);
  }

  .workflow .stage {
    /* Height-aware sizing prevents the bottom of the SVG from being clipped
       on wide-but-short viewports such as 2264 x 1202. */
    width: min(100%, calc(100vh - 360px));
    max-width: 900px;
    justify-self: start;
  }

  .workflow .panel {
    /* The middle grid track is a real, guaranteed space between SVG + panel. */
    grid-column: 3;
    width: 100%;
    max-width: 560px;
    justify-self: start;
  }
}

@media (min-width: 981px) and (max-height: 1250px) {
  .workflow {
    padding-top: clamp(40px, 3vw, 64px);
    padding-bottom: clamp(40px, 3vw, 64px);
  }

  .workflow .head {
    margin-bottom: clamp(18px, 1.4vw, 30px);
  }

  .workflow .stage {
    width: min(100%, calc(100vh - 330px));
  }
}


/*===SERVICES SECTION===*/
.services {
    --svc-bg-a: #e4231c;
    --svc-bg-b: #f0491e;
    --svc-bg-c: #ffc93c;
    --svc-card: #fff6ee;
    --svc-card-text: #1c120b;
    /*
    --svc-back: #1c120b;
    --svc-back-text: #fff6ee;
    */
    --svc-back: #fff6ee;
    --svc-back-text: #1c120b;

    --svc-muted: #7a6a61;
    --svc-accent: #ff9100;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    aspect-ratio: auto;
    min-height: 100svh;
    padding: clamp(54px, 4.2vw, 108px) 0 clamp(58px, 4.5vw, 116px);
    color: #fff;
    background: radial-gradient(120% 90% at 20% 0%, #ff4e39 0%, transparent 55%),
    linear-gradient(
        160deg,
        var(--svc-bg-a) 0%,
        var(--svc-bg-b) 42%,
        #ff8a00 78%,
        var(--svc-bg-c) 100%
    );
}
html[data-theme="dark"] .services {
  --svc-bg-a: #250909;
  --svc-bg-b: #3b1710;
  --svc-bg-c: #5a3510;
  --svc-card: #241b16;
  --svc-card-text: #fff6ee;
  --svc-back: #0f0b09;
  --svc-back-text: #fff6ee;
  --svc-muted: #c8b8aa;
  --svc-accent: #f5d178;
  background: radial-gradient(120% 90% at 20% 0%, #4b1616 0%, transparent 55%),
    linear-gradient(
      160deg,
      var(--svc-bg-a) 0%,
      var(--svc-bg-b) 48%,
      var(--svc-bg-c) 100%
    );
}
.services-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
html[data-theme="dark"] .services-bg {
  opacity: 0.34;
}
.services .wrap {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100% - 72px));
  max-width: 1500px;
  margin-inline: auto;
  padding: 0;
}
.services .section-head {
  max-width: 800px;
  margin: 0 0 clamp(34px, 2.4vw, 62px);
}
.services .section-head .eyebrow {
  margin: 0 0 12px;
  color: var(--svc-accent);
  font-family: var(--mono);
  font-size: clamp(17px, 0.82vw, 21px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.services .section-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(48px, 2.75vw, 70px);
  line-height: 1.1;
}
.services .section-head p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(18px, 1vw, 25px);
  line-height: 1.52;
}
.services .service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1vw, 22px);
}
.services .service-card {
  perspective: 1200px;
  height: clamp(190px, 10vw, 255px);
}
.services .service-card-btn {
  all: unset;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.services .service-card-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 16px;
}
.services .service-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
}
.services .service-card:hover .service-card-inner,
.services .service-card:focus-within .service-card-inner,
.services .service-card.is-flipped .service-card-inner {
  transform: rotateY(180deg);
}
.services .service-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 1.25vw, 30px);
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.services .service-front {
  justify-content: space-between;
  color: var(--svc-card-text);
  background: var(--svc-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.services .svc-code {
  font: clamp(12px, 0.58vw, 15px) / 1.2 var(--mono);
  color: var(--svc-muted);
  letter-spacing: 0.06em;
}
.services .svc-title-front {
  margin-top: auto;
  font: 600 clamp(17px, 0.82vw, 21px) / 1.25 var(--display);
}
.services .service-back {
  justify-content: center;
  transform: rotateY(180deg);
  color: var(--svc-back-text);
  background: var(--svc-back);
}
.services .svc-title {
  margin-bottom: 8px;
  color: var(--svc-accent);
  font: 600 clamp(17px, 0.82vw, 21px) / 1.25 var(--display);
}
.services .svc-desc {
  /*color: rgba(255, 246, 238, 0.85);*/
  color: var(--svc-back-text);
  font-size: clamp(14px, 0.68vw, 18px);
  line-height: 1.6;
}
@media (max-width: 980px) {
  .services {
    min-height: 100svh;
  }
  .services .wrap {
    width: min(100% - 40px, 1500px);
  }
  .services .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .services .service-grid {
    grid-template-columns: 1fr;
  }
  .services .section-head h2 {
    font-size: clamp(34px, 10vw, 48px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .services .service-card-inner {
    transition: none;
  }
}
/* Home dark mode */
html[data-theme="dark"] .home {
  background: linear-gradient(
    180deg,
    #30070d 0%,
    #46120f 38%,
    #572016 68%,
    #63301e 100%
  );
}
html[data-theme="dark"] .home__background,
html[data-theme="dark"] .home__foreground,
html[data-theme="dark"] .home__globe {
  filter: brightness(0.68) saturate(0.88);
}
html[data-theme="dark"] .home__business-words,
html[data-theme="dark"] .home__company-title {
  color: #f7ece7;
}
html[data-theme="dark"] .home__business-icons svg {
  opacity: 0.82;
}

/*===SERVICES V2 LAYOUT FIX===*/
.services {
  display: block;
}
.services > .wrap {
  position: relative;
  z-index: 1;
  display: block;
  width: min(1500px, calc(100% - 72px));
  margin-inline: auto;
}
.services .section-head {
  position: static;
  inset: auto;
  transform: none;
  float: none;
  width: auto;
  max-width: 820px;
  margin: 0 0 clamp(48px, 3vw, 72px);
  padding: 0;
  background: transparent;
}
.services .service-grid {
  position: static;
  inset: auto;
  transform: none;
  width: 100%;
  margin: 0;
}
.services .svc-icon {
  display: block;
  width: clamp(64px, 4.4vw, 112px);
  height: clamp(64px, 4.4vw, 112px);
  margin: auto;
  color: #f0451b;
}
html[data-theme="dark"] .services .section-head {
  background: transparent;
  color: #fff;
}
html[data-theme="dark"] .services .section-head .eyebrow {
  color: var(--svc-accent);
}
html[data-theme="dark"] .services .section-head h2 {
  color: #fff;
}
html[data-theme="dark"] .services .section-head p {
  color: rgba(255, 255, 255, 0.78);
}
html[data-theme="dark"] .services .svc-icon {
  color: #f5d178;
}

/*===CLIENTS SECTION===*/
#clients.clients-section{
    position: relative;
    contain: layout paint style;
    width: 100%;
    min-height: 100vh;
    min-height: 680px;
    overflow: hidden;
    background: linear-gradient(180deg, #ec3f8c 0%, #f0537e 30%, #f4715f 65%, #f68a52 100%);
    
  }

  #clients.clients-section svg.circuit-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.28;
  }

  #clients.clients-section .circuit-bg line, #clients.clients-section .circuit-bg path{
    stroke: #ffffff;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Thicker / thinner trace variants so the circuit reads as real
     PCB-style routing rather than a uniform grid mesh. */
  #clients.clients-section .circuit-bg path.trace-thick{
    stroke-width: 3.25;
  }
  #clients.clients-section .circuit-bg path.trace-thin{
    stroke-width: 1.2;
  }

  #clients.clients-section .circuit-bg circle{
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
  }

  #clients.clients-section .circuit-bg circle.node-filled{
    fill: #ffffff;
    stroke: none;
  }

  /* RAM/GPU-light signal rendering. Static pads are merged into ONE path.
     Every circuit route gets its own traveling light (matching the original
     animation density), while expensive per-node DOM + SVG masks stay removed.
     Avoid CSS filters/drop-shadows: they can allocate off-screen surfaces. */
  #clients.clients-section .circuit-bg .signal-halo{
    fill: #ffffff;
    stroke: none;
    opacity: 0.16;
  }

  #clients.clients-section .circuit-bg .signal-dot{
    fill: #ffffff;
    stroke: none;
    opacity: 0.98;
  }



  #clients{
    --ink:#1c2321;
    --paper:#f2ede2;
    --card:#ffffff;
    --line:#e4e0d6;
    --muted:#8a8478;
    --gold:#b6924f;

    /* Themable tokens — dark is the default scheme */
    --bg:var(--ink);
    --bg-radial-1:rgba(182,146,79,0.14);
    --bg-radial-2:rgba(182,146,79,0.10);
    --text:var(--paper);
    --text-muted:rgba(242,237,226,0.6);
    --border-soft:rgba(242,237,226,0.14);
    --toggle-border:rgba(242,237,226,0.22);
    --toggle-text:rgba(242,237,226,0.55);
    --arrow-border:rgba(242,237,226,0.22);
    --arrow-bg:rgba(242,237,226,0.04);
    --dot-bg:rgba(242,237,226,0.25);
  }

  html[data-theme="light"] #clients{
    --bg:var(--paper);
    --bg-radial-1:rgba(182,146,79,0.10);
    --bg-radial-2:rgba(182,146,79,0.07);
    --text:var(--ink);
    --text-muted:rgba(28,35,33,0.6);
    --border-soft:rgba(28,35,33,0.12);
    --toggle-border:rgba(28,35,33,0.18);
    --toggle-text:rgba(28,35,33,0.55);
    --arrow-border:rgba(28,35,33,0.16);
    --arrow-bg:rgba(28,35,33,0.035);
    --dot-bg:rgba(28,35,33,0.2);
  }

  
  
  #clients .clients-ui{
    background:transparent;
    font-family:var(--body);
    color:var(--text);
    padding:64px 24px 80px;
    min-height:680px;
    transition:color .35s ease;
  }

  #clients .wrap{max-width:1160px;margin:0 auto;}

  #clients .client-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:44px;
    border-bottom:1px solid var(--border-soft);
    padding-bottom:28px;
  }

  #clients .header-text h1{
    font-family:Sora, var(--body);
    font-weight:500;
    font-size:clamp(28px,4vw,42px);
    margin:0 0 8px;
    letter-spacing:-0.01em;
  }

  #clients .header-text p{
    margin:0;
    color:var(--text-muted);
    font-size:15px;
    line-height:1.5;
    max-width:56ch;
  }

  

  
  
  
  
  
  

  #clients .slider{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
  }

  #clients .viewport{
    overflow:hidden;
    border-radius:8px;
    flex:1;
    min-width:0;
  }

  #clients .track{
    display:flex;
    gap:24px;
    transition:transform .55s cubic-bezier(.65,0,.35,1);
    will-change:transform;
    touch-action:pan-y;
    cursor:grab;
    user-select:none;
  }
  #clients .track.dragging{cursor:grabbing;}

  #clients .arrow{
    flex:0 0 auto;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid var(--arrow-border);
    background:var(--arrow-bg);
    color:var(--text);
    font-family:Sora, var(--body);
    font-size:19px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease, transform .15s ease;
  }
  #clients .arrow:hover{background:rgba(182,146,79,0.22); border-color:var(--gold);}
  #clients .arrow:active{transform:scale(0.92);}
  #clients .arrow svg{width:16px;height:16px;}

  /* ---- Card ---- */
  #clients .card{
    flex:0 0 calc((100% - 48px)/3);
    background:var(--card);
    color:var(--ink);
    border-radius:10px;
    padding:24px 26px 20px;
    position:relative;
    box-shadow:0 18px 40px -22px rgba(0,0,0,0.5);
    transition:transform .35s ease, box-shadow .35s ease;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    cursor:pointer;
    content-visibility:auto;
    contain-intrinsic-size:260px 220px;
  }
  #clients .card:hover{
    transform:translateY(-4px);
    box-shadow:0 26px 48px -20px rgba(0,0,0,0.55);
  }

  #clients .quote-mark{
    font-family:Sora, var(--body);
    font-size:46px;
    line-height:1;
    position:absolute;
    top:6px;
    opacity:0.16;
    color:var(--accent, var(--gold));
    pointer-events:none;
    user-select:none;
  }
  #clients .quote-mark.left{left:10px;}
  #clients .quote-mark.right{right:10px; transform:scaleX(-1);}

  #clients .card-header{
    text-align:center;
    padding-bottom:12px;
    margin-bottom:16px;
    border-bottom:2px solid var(--ink);
    position:relative;
    flex:0 0 auto;
  }

  #clients .client-name{
    font-family:Sora, var(--body);
    font-weight:500;
    font-size:21px;
    margin:0;
    color:var(--accent, var(--gold));
    letter-spacing:0.01em;
  }

  #clients .content-row{
    display:flex;
    gap:16px;
    flex:1 1 auto;
    min-height:110px;
  }

  #clients .logo-box{
    flex:0 0 92px;
    width:92px;
    height:110px;
    border-radius:4px;
    overflow:hidden;
    background:#f4f1ea;
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
  }
  #clients .logo-box svg{
    width:100%;
    height:100%;
    display:block;
  }

  #clients .desc-col{
    flex:1;
    min-width:0;
  }

  #clients .desc-block{
    font-size:12.5px;
    line-height:1.55;
    color:#4a463e;
  }

  #clients .desc-block .label{
    font-weight:600;
    color:var(--ink);
    text-decoration:underline;
    text-decoration-color:var(--line);
    text-underline-offset:2px;
  }

  #clients .desc-block .card-footer{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-size:11.5px;
    color:var(--muted);
    flex:0 0 auto;
  }
  #clients .card-footer .open-since{text-align:left;}
  #clients .card-footer .worked-since{text-align:right; margin-left:auto;}

  #clients .dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:34px;
  }
  #clients .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--dot-bg);
    border:none;
    cursor:pointer;
    padding:0;
    transition:background .2s ease, transform .2s ease;
  }
  #clients .dot.active{background:var(--gold); transform:scale(1.35);}

  /* ---- Popup ---- */
  #clients .popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,13,10,0.68);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:999;
    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
  }
  #clients .popup-overlay.open{opacity:1; pointer-events:auto;}

  #clients .popup-card{
    background:var(--card);
    color:var(--ink);
    width:100%;
    max-width:480px;
    max-height:88vh;
    overflow-y:auto;
    border-radius:16px;
    padding:36px 32px 28px;
    position:relative;
    box-shadow:0 40px 80px -20px rgba(0,0,0,0.55);
    transform:scale(0.93) translateY(6px);
    transition:transform .32s cubic-bezier(.2,.9,.3,1.2), opacity .28s ease;
    opacity:0;
  }
  #clients .popup-overlay.open .popup-card{
    transform:scale(1) translateY(0);
    opacity:1;
  }

  #clients .popup-close{
    position:absolute;
    top:14px;
    right:14px;
    width:30px;
    height:30px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    font-size:16px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease, transform .15s ease;
  }
  #clients .popup-close:hover{background:#f4f1ea;}
  #clients .popup-close:active{transform:scale(0.9);}

  #clients .popup-card .quote-mark{
    font-size:58px;
    top:14px;
    opacity:0.18;
  }
  #clients .popup-card .quote-mark.left{left:18px;}
  #clients .popup-card .quote-mark.right{right:18px;}

  #clients .popup-header{
    text-align:center;
    padding-bottom:14px;
    margin-bottom:20px;
    border-bottom:2px solid var(--ink);
  }
  #clients .popup-header h2{
    font-family:Sora, var(--body);
    font-weight:500;
    font-size:26px;
    margin:0;
    color:var(--accent, var(--gold));
    letter-spacing:0.01em;
  }

  #clients .popup-

  .popup-logo{
    flex:0 0 108px;
    width:108px;
    height:128px;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
    overflow:hidden;
  }
  #clients .popup-logo svg{width:100%;height:100%;display:block;}

  #clients .popup-desc-label{
    font-weight:600;
    font-size:13px;
    color:var(--ink);
    text-decoration:underline;
    text-decoration-color:var(--line);
    text-underline-offset:3px;
    margin:0 0 10px;
  }

  #clients .popup-desc ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  #clients .popup-desc li{
    font-size:13px;
    line-height:1.4;
    color:#4a463e;
    padding-bottom:9px;
    border-bottom:1px solid var(--line);
  }
  #clients .popup-desc li:last-child{border-bottom:none; padding-bottom:0;}

  #clients .popup-stats{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-top:18px;
    border-top:1px solid var(--line);
  }
  #clients .stat{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    gap:12px;
  }
  #clients .stat-label{
    font-weight:600;
    color:var(--ink);
  }
  #clients .stat-value{color:#4a463e;}

  #clients .stars{
    position:relative;
    display:inline-block;
    font-size:19px;
    letter-spacing:3px;
    line-height:1;
  }
  #clients .stars-bg{color:var(--line);}
  #clients .stars-fg{
    position:absolute;
    top:0; left:0;
    overflow:hidden;
    width:0%;
    color:var(--gold);
    white-space:nowrap;
    transition:width 1.1s cubic-bezier(.16,1,.3,1);
  }
  #clients .popup-overlay.open .stars-fg{
    width:var(--pct);
  }
  #clients .stars-fg span{
    display:inline-block;
    animation:starPop .5s cubic-bezier(.2,1.4,.4,1) backwards;
  }
  @keyframes starPop{
    0%{transform:scale(0.4); opacity:0;}
    60%{transform:scale(1.15);}
    100%{transform:scale(1); opacity:1;}
  }

  @media (max-width:860px){
    #clients .card{flex:0 0 calc((100% - 24px)/2);}
    #clients .client-header{flex-direction:column; align-items:flex-start;}
  }
  @media (max-width:600px){
    #clients .card{flex:0 0 100%;}
    #clients .arrow{width:32px; height:32px;}
    #clients .popup-
    .popup-logo{width:100%; height:96px;}
  }
  @media (prefers-reduced-motion:reduce){
    #clients .clients-ui, #clients .track, #clients .card, #clients .popup-card, #clients .stars-fg, #clients .stars-fg span{transition:none !important; animation:none !important;}
  }

#clients.clients-section > .circuit-bg{
  z-index:0;
  pointer-events:none;
}
#clients .clients-ui{
  position:relative;
  z-index:2;
  width:100%;
}
#clients.clients-section .wrap{
  position:relative;
  z-index:2;
}

/*===CLIENTS ADJUSTMENTS 01===*/
/* 1 */
#clients.clients-section{width:100%;min-height:calc(100vh - var(--nav-height,80px));height:auto;display:flex;align-items:center;overflow:hidden}
#clients .clients-ui{width:100%;min-height:calc(100vh - var(--nav-height,80px));display:flex;align-items:center}
#clients .page{width:100%;max-width:none;min-height:0;margin:0}
#clients .client-shell{width:min(100%,1480px);margin-inline:auto}

/* 2 */
#clients .client-header,#clients .client-header h1,#clients .client-header p,
html[data-theme="light"] #clients .client-header,html[data-theme="light"] #clients .client-header h1,html[data-theme="light"] #clients .client-header p,
html[data-theme="dark"] #clients .client-header,html[data-theme="dark"] #clients .client-header h1,html[data-theme="dark"] #clients .client-header p{color:#fff !important}

/* 3 */
html[data-theme="dark"] #clients .card{background:#171717 !important;color:#fff !important}
html[data-theme="dark"] #clients .card,html[data-theme="dark"] #clients .card *{color:#fff}
html[data-theme="dark"] #clients .card .divider{background:rgba(255,255,255,.72)}

/* 4 */
#clients .popup-overlay{position:fixed !important;inset:0 !important;width:100vw !important;height:100dvh !important;min-height:100vh;z-index:10000 !important;overflow-y:auto;overscroll-behavior:contain}
html.client-popup-open,body.client-popup-open{overflow:hidden !important;overscroll-behavior:none}

/* 5 */
html[data-theme="dark"] #clients .popup-card{background:#171717 !important;color:#fff !important}
html[data-theme="dark"] #clients .popup-card,html[data-theme="dark"] #clients .popup-card *{color:#fff}
html[data-theme="dark"] #clients .popup-card .popup-divider{background:rgba(255,255,255,.72)}


/*===CLIENTS DEBUG/FIX 02 — sequential 1→5===*/

/* 1. fg.html popup design, scaled for the full page */
.client-popup{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100vh;
  background:rgba(15,13,10,.68);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(24px,3vw,56px);
  z-index:10000 !important;
  opacity:0;
  pointer-events:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  transition:opacity .28s ease;
}
.client-popup.open{opacity:1;pointer-events:auto}
.client-popup .popup-card{
  --ink:#1c2321; --card:#fff; --line:#e4e0d6; --gold:#b6924f;
  background:var(--card);
  color:var(--ink);
  width:min(760px,calc(100vw - 48px));
  max-width:760px;
  max-height:min(88dvh,980px);
  overflow-y:auto;
  border-radius:16px;
  padding:clamp(36px,2.6vw,52px) clamp(32px,2.8vw,56px) clamp(28px,2.4vw,46px);
  position:relative;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.55);
  transform:scale(.93) translateY(6px);
  transition:transform .32s cubic-bezier(.2,.9,.3,1.2),opacity .28s ease;
  opacity:0;
}
.client-popup.open .popup-card{transform:scale(1) translateY(0);opacity:1}
.client-popup .popup-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .15s ease}
.client-popup .popup-close:hover{background:#f4f1ea}.client-popup .popup-close:active{transform:scale(.9)}
.client-popup .quote-mark{font-family:Sora,var(--body);font-size:58px;line-height:1;position:absolute;top:14px;opacity:.18;color:var(--accent,var(--gold));pointer-events:none;user-select:none}
.client-popup .quote-mark.left{left:18px}.client-popup .quote-mark.right{right:18px;transform:scaleX(-1)}
.client-popup .popup-header{text-align:center;padding-bottom:18px;margin-bottom:26px;border-bottom:2px solid var(--ink)}
.client-popup .popup-header h2{font-family:Sora,var(--body);font-weight:500;font-size:clamp(26px,1.8vw,34px);margin:0;color:var(--accent,var(--gold));letter-spacing:.01em}
.client-popup .popup-body{display:flex;gap:clamp(20px,2vw,32px);margin-bottom:28px}
.client-popup .popup-logo{flex:0 0 clamp(150px,12vw,190px);width:clamp(150px,12vw,190px);height:clamp(178px,14vw,224px);border-radius:6px;display:flex;align-items:center;justify-content:center;align-self:flex-start;overflow:hidden}
.client-popup .popup-logo svg{width:100%;height:100%;display:block}
.client-popup .popup-desc{flex:1;min-width:0}
.client-popup .popup-desc-label{font-weight:600;font-size:15px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;margin:0 0 12px}
.client-popup .popup-desc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.client-popup .popup-desc li{font-size:15px;line-height:1.45;color:#4a463e;padding-bottom:11px;border-bottom:1px solid var(--line)}
.client-popup .popup-desc li:last-child{border-bottom:none;padding-bottom:0}
.client-popup .popup-stats{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--line)}
.client-popup .stat{display:flex;justify-content:space-between;align-items:center;font-size:15px;gap:16px}
.client-popup .stat-label{font-weight:600;color:var(--ink)}.client-popup .stat-value{color:#4a463e}
.client-popup .stars{position:relative;display:inline-block;font-size:21px;letter-spacing:3px;line-height:1}
.client-popup .stars-bg{color:var(--line)}.client-popup .stars-fg{position:absolute;top:0;left:0;overflow:hidden;width:0%;color:var(--gold);white-space:nowrap;transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.client-popup.open .stars-fg{width:var(--pct)}
html.client-popup-open,body.client-popup-open{overflow:hidden !important;overscroll-behavior:none}
@media(max-width:600px){.client-popup .popup-body{flex-direction:column}.client-popup .popup-logo{width:100%;height:120px;flex-basis:120px}}

/* 2. Restore fg.html card composition and enlarge it */
#clients .desc-block .body{
  display:block;
  overflow:visible;
  line-clamp:unset;
  -webkit-line-clamp:unset;
}
#clients .card{
  padding:clamp(26px,1.7vw,34px) clamp(28px,1.9vw,38px) clamp(22px,1.5vw,30px);
  min-height:clamp(300px,23vw,370px);
  contain-intrinsic-size:380px 320px;
}
#clients .card-header{padding-bottom:16px;margin-bottom:20px}
#clients .client-name{font-size:clamp(22px,1.45vw,28px)}
#clients .content-row{gap:clamp(18px,1.4vw,26px);min-height:150px}
#clients .logo-box{flex:0 0 clamp(118px,8vw,150px);width:clamp(118px,8vw,150px);height:clamp(142px,9.6vw,180px)}
#clients .desc-block{font-size:clamp(14px,.9vw,16px);line-height:1.55}
#clients .card-footer{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:22px;padding-top:17px;border-top:1px solid var(--line);font-size:clamp(13px,.82vw,15px);color:var(--muted);flex:0 0 auto}
#clients .card-footer .open-since{text-align:left}
#clients .card-footer .worked-since{text-align:right;margin-left:auto}

/* dark card details without flattening the fg.html hierarchy */
html[data-theme="dark"] #clients .card{background:#171717 !important;color:#fff !important;--ink:#fff;--line:rgba(255,255,255,.22);--muted:rgba(255,255,255,.68)}
html[data-theme="dark"] #clients .desc-block{color:rgba(255,255,255,.82)}
html[data-theme="dark"] #clients .desc-block .label{color:#fff}

/* 3. Expand the Clients content area to the same large-section scale */
#clients.clients-section{min-height:100svh}
#clients .clients-ui{width:100%;min-height:100svh;padding:clamp(54px,4.2vw,108px) 0 clamp(58px,4.5vw,116px);display:flex;align-items:center}
#clients .wrap{position:relative;z-index:2;width:min(1500px,calc(100% - 72px));max-width:1500px;margin-inline:auto;padding:0}
#clients .client-header{width:min(100%,800px);margin:0 0 clamp(42px,3vw,66px);padding-bottom:clamp(26px,2vw,34px)}
#clients .header-text h1{font-size:clamp(38px,3.2vw,56px)}
#clients .header-text p{font-size:clamp(16px,1.05vw,19px);max-width:62ch}
#clients .slider{gap:clamp(14px,1.2vw,24px)}
#clients .track{gap:clamp(24px,1.8vw,34px)}
#clients .card{flex:0 0 calc((100% - 68px)/3)}
#clients .arrow{width:clamp(42px,3vw,54px);height:clamp(42px,3vw,54px)}
#clients .dots{margin-top:clamp(34px,2.5vw,48px)}

/* 4. Workflow midpoint colors between its former palette and Clients */
.workflow{
  --bg-a:#ec4493;
  --bg-b:#f15f67;
  --bg-c:#f77f34;
}
html[data-theme="dark"] .workflow{
  --bg-a:#300f23;
  --bg-b:#4a2025;
  --bg-c:#4f2510;
}

/* 5. Dedicated dark Clients background */
html[data-theme="dark"] #clients.clients-section{
  background:linear-gradient(180deg,#351225 0%,#47202a 30%,#582926 65%,#633016 100%);
}
html[data-theme="dark"] #clients.clients-section svg.circuit-bg{opacity:.20}

/* Keep light Clients background explicit after the dark override. */
html[data-theme="light"] #clients.clients-section{
  background:linear-gradient(180deg,#ec3f8c 0%,#f0537e 30%,#f4715f 65%,#f68a52 100%);
}

/* Popup dark theme, now that the modal lives outside #clients */
html[data-theme="dark"] .client-popup .popup-card{--ink:#fff;--card:#171717;--line:rgba(255,255,255,.22);background:#171717;color:#fff}
html[data-theme="dark"] .client-popup .popup-desc-label,
html[data-theme="dark"] .client-popup .stat-label{color:#fff}
html[data-theme="dark"] .client-popup .popup-desc li,
html[data-theme="dark"] .client-popup .stat-value{color:rgba(255,255,255,.82)}
html[data-theme="dark"] .client-popup .popup-close{background:#242424;color:#fff;border-color:rgba(255,255,255,.22)}

/*===SECTION FLOW + DESKTOP ZOOM RESPONSIVE FIX 03===*/
/* Workflow is the visual bridge from Services (orange) into Clients (pink/coral).
   Keep the direction of the gradient consistent with the page's vertical flow. */
.workflow{
  --bg-a:#f77f34;
  --bg-b:#f15f67;
  --bg-c:#ec4493;
  background:linear-gradient(160deg,var(--bg-a) 0%,var(--bg-b) 52%,var(--bg-c) 100%);
}
html[data-theme="dark"] .workflow{
  --bg-a:#4f2510;
  --bg-b:#4a2025;
  --bg-c:#300f23;
}

/* At desktop widths, size/position Services and Clients from the viewport just
   like Workflow. Avoid fixed max-width caps becoming visually tiny at 50% zoom. */
@media (min-width:981px){
  .services{
    display:flex;
    align-items:center;
    min-height:min(100vh,1440px);
  }
  .services > .wrap{
    width:min(78vw,1900px);
    max-width:none;
  }
  .services .section-head{
    width:min(820px,42vw);
    max-width:none;
    margin-bottom:clamp(32px,2.5vw,64px);
  }
  .services .service-grid{
    gap:clamp(14px,1vw,24px);
  }
  .services .service-card{
    height:clamp(190px,10.5vw,280px);
  }

  #clients.clients-section{
    min-height:min(100vh,1440px);
  }
  #clients .clients-ui{
    min-height:min(100vh,1440px);
    padding:clamp(54px,4.2vw,108px) 0 clamp(58px,4.5vw,116px);
  }
  #clients .wrap{
    width:min(78vw,1900px);
    max-width:none;
  }
  #clients .client-header{
    width:min(800px,42vw);
  }
  #clients .card{
    min-height:clamp(300px,18vw,390px);
  }
}

/*===WORKFLOW TRANSITION + INSPECTOR-OVERLAY HARDENING 04===*/
/* The workflow header does not need a flex formatting context. Keeping it as
   normal block flow preserves the same layout while avoiding the intermittent
   flex/grid inspector overlay seen as yellow dashed boxes in some browsers. */
.workflow .head{
  display:block;
}
.workflow .head > .eyebrow{
  display:block;
  margin:0 0 8px;
}
.workflow .head > h1{
  margin:0 0 8px;
}
.workflow .head > p{
  margin:0;
}

/* Continue the Services palette by turning its warm progression upside-down,
   then transpose through coral into the Clients palette toward the bottom. */
.workflow{
  --bg-a:#ffc93c;
  --bg-b:#ff8a00;
  --bg-c:#f0491e;
  --bg-d:#f4715f;
  --bg-e:#ec3f8c;
  background:linear-gradient(
    180deg,
    var(--bg-a) 0%,
    var(--bg-b) 22%,
    var(--bg-c) 43%,
    var(--bg-d) 70%,
    var(--bg-e) 100%
  );
}
html[data-theme="dark"] .workflow{
  --bg-a:#5a3510;
  --bg-b:#4b2910;
  --bg-c:#3b1710;
  --bg-d:#47202a;
  --bg-e:#351225;
  background:linear-gradient(
    180deg,
    var(--bg-a) 0%,
    var(--bg-b) 22%,
    var(--bg-c) 43%,
    var(--bg-d) 70%,
    var(--bg-e) 100%
  );
}

/*===SECTION SEAM FIX 05===*/
/* Resolve the Services -> Workflow hairline by giving both sections one shared
   boundary color. The transparent vertical wash gently normalizes the angled
   Services gradient near its bottom edge; Workflow begins at that exact color.
   A 1px overlap also prevents sub-pixel seams at non-100% browser zoom. */
:root{
  --services-workflow-edge:#ffc93c;
}
html[data-theme="dark"]{
  --services-workflow-edge:#5a3510;
}
.services{
  background:
    linear-gradient(to bottom,transparent 82%,var(--services-workflow-edge) 100%),
    radial-gradient(120% 90% at 20% 0%,#ff4e39 0%,transparent 55%),
    linear-gradient(160deg,var(--svc-bg-a) 0%,var(--svc-bg-b) 42%,#ff8a00 78%,var(--svc-bg-c) 100%);
}
html[data-theme="dark"] .services{
  background:
    linear-gradient(to bottom,transparent 82%,var(--services-workflow-edge) 100%),
    radial-gradient(120% 90% at 20% 0%,#4b1616 0%,transparent 55%),
    linear-gradient(160deg,var(--svc-bg-a) 0%,var(--svc-bg-b) 48%,var(--svc-bg-c) 100%);
}
.workflow{
  --bg-a:var(--services-workflow-edge);
  position:relative;
  margin-top:-1px;
}

/*===WORKFLOW -> CLIENTS SEAM FIX 06===*/
/* Workflow ends on one flat color, while the Clients background uses an angled
   gradient whose top edge otherwise contains several colors. Normalize only the
   first slice of Clients to the exact Workflow endpoint, then fade back into the
   original Clients gradient. The 1px overlap protects fractional browser zoom. */
:root{
  --workflow-clients-edge:#ec3f8c;
}
html[data-theme="dark"]{
  --workflow-clients-edge:#351225;
}
#clients.clients-section,
html[data-theme="light"] #clients.clients-section{
  background:
    linear-gradient(to bottom,var(--workflow-clients-edge) 0%,rgba(236,63,140,0) 12%),
    linear-gradient(180deg,#ec3f8c 0%,#f0537e 30%,#f4715f 65%,#f68a52 100%);
  position:relative;
  margin-top:-1px;
}
html[data-theme="dark"] #clients.clients-section{
  background:
    linear-gradient(to bottom,var(--workflow-clients-edge) 0%,rgba(53,18,37,0) 12%),
    linear-gradient(180deg,#351225 0%,#47202a 30%,#582926 65%,#633016 100%);
}


/*===ABOUT / MISSION / VISION===*/

  .about-section{width:100%;margin:0;padding:56px max(24px,4vw) 72px;min-height:min(100vh,1440px);background:linear-gradient(155deg,rgba(242,98,62,1) 0%,rgba(119,0,255,1) 76%)}
  .about-section-title{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:26px;font-weight:700;color:#fff}
  .about-section-title::before{content:"";width:25px;height:2px;background:#fff;display:block}
  .title-cursor{display:none;margin-left:1px;font:inherit;line-height:1}.title-cursor::before{content:"_"}
  .title-cursor.active{display:inline-block;animation:cursorBlink var(--cursor-speed,480ms) steps(1,end) infinite}
  @keyframes cursorBlink{0%,46%{opacity:1}47%,100%{opacity:0}}
  .about-section-subtext{max-width:1040px;margin:0 0 22px 33px;font-size:17px;line-height:1.55;color:rgba(255,255,255,.88)}
  .about-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(28px,2.2vw,56px);align-items:stretch;width:min(92vw,2200px);max-width:none;margin-inline:auto}
  .about-visual{min-height:clamp(420px,32vw,720px);border:0;border-radius:24px;display:grid;place-items:center;overflow:hidden;position:relative;background:none}
  .about-visual-outline{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
  .about-visual-outline line{fill:none;stroke:rgba(255,255,255,.74);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:butt;stroke-dasharray:1 1}
  .about-visual-card{text-align:center;transition:.35s ease;transform:translateY(0);opacity:1;width:100%;height:100%;position:relative;display:grid;place-items:center}
  .about-animation-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;pointer-events:none}
  .skeleton-stage{display:none}
  .skeleton-stage::before{content:"";width:min(46%,320px);aspect-ratio:1;border:1px dashed rgba(255,255,255,.28);border-radius:50%}
  .about-stage{display:grid}
  .mission-stage{display:none}
  .mission-scene{width:100%;height:100%;overflow:visible}
  .mission-route{fill:none;stroke:rgba(255,255,255,.82);stroke-width:7;stroke-linecap:round;stroke-dasharray:18 24;vector-effect:non-scaling-stroke}
  .mission-land{fill:none;stroke:rgba(255,255,255,.72);stroke-width:3.15;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  .mission-detail{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.82);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  .mission-science{fill:none;stroke:rgba(255,255,255,.78);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  .mission-icon{transform-box:fill-box;transform-origin:center}
  .mission-icon .icon-anim{transform-box:fill-box;transform-origin:center}
  .mission-building .window{fill:rgba(255,255,255,0);transition:fill calc(.32s * var(--mission-time-scale,1)) ease}
  .mission-building.activated .window{fill:rgba(255,255,255,.58)}
  .mission-building.activated .w2{transition-delay:calc(.09s * var(--mission-time-scale,1))}.mission-building.activated .w3{transition-delay:calc(.18s * var(--mission-time-scale,1))}.mission-building.activated .w4{transition-delay:calc(.27s * var(--mission-time-scale,1))}.mission-building.activated .w5{transition-delay:calc(.36s * var(--mission-time-scale,1))}.mission-building.activated .w6{transition-delay:calc(.45s * var(--mission-time-scale,1))}
  .mission-heart.activated{animation:missionHeart calc(.58s * var(--mission-time-scale,1)) ease-out 1}
  .mission-sprout .shoot{stroke-dasharray:70;stroke-dashoffset:70;opacity:0}
  /* Leaves are anchored to their actual stem junctions, so they grow out of the stem instead of scaling around their own centers. */
  .mission-sprout .leaf{transform-box:view-box;opacity:0}
  .mission-sprout .leaf.left{transform-origin:488px 486px;transform:scale(0)}
  .mission-sprout .leaf.right{transform-origin:488px 475px;transform:scale(0)}
  .mission-sprout.activated .shoot{animation:missionShoot calc(.72s * var(--mission-time-scale,1)) cubic-bezier(.2,.8,.2,1) forwards}
  .mission-sprout.activated .leaf.left{animation:missionLeaf calc(.46s * var(--mission-time-scale,1)) cubic-bezier(.2,.8,.2,1) calc(.34s * var(--mission-time-scale,1)) forwards}
  .mission-sprout.activated .leaf.right{animation:missionLeaf calc(.46s * var(--mission-time-scale,1)) cubic-bezier(.2,.8,.2,1) calc(.48s * var(--mission-time-scale,1)) forwards}
  .mission-atom .orbit-pack{transform-box:fill-box;transform-origin:center}
  .mission-atom.activated .orbit-pack{animation:missionOrbit calc(1.05s * var(--mission-time-scale,1)) cubic-bezier(.2,.7,.2,1) 1}
  .mission-chip .chip-pulse{opacity:0;fill:none;stroke:rgba(255,255,255,.95);stroke-width:5;stroke-linecap:round;stroke-dasharray:18 180}
  .mission-chip.activated .chip-pulse{animation:missionChipPulse calc(.9s * var(--mission-time-scale,1)) ease-out 1}
  @keyframes missionHeart{0%,100%{transform:scale(1)}22%{transform:scale(1.08)}42%{transform:scale(.98)}62%{transform:scale(1.055)}80%{transform:scale(1)}}
  @keyframes missionShoot{0%{stroke-dashoffset:70;opacity:0}12%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
  @keyframes missionLeaf{0%{transform:scale(0);opacity:0}18%{opacity:1}100%{transform:scale(1);opacity:1}}
  @keyframes missionOrbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
  @keyframes missionChipPulse{0%{opacity:0;stroke-dashoffset:0}15%{opacity:1}80%{opacity:1}100%{opacity:0;stroke-dashoffset:-150}}
  .mission-traveler{filter:drop-shadow(0 0 8px rgba(255,255,255,.38))}
  .mission-traveler use{transform-box:fill-box;transform-origin:center}
  @media(prefers-reduced-motion:reduce){.mission-route{stroke-dasharray:18 24}}
  .about-logo-svg{position:absolute;left:50%;top:50%;width:min(54%,24vw);max-width:none;height:auto;aspect-ratio:808/973;overflow:visible;opacity:0;filter:drop-shadow(0 0 10px rgba(255,255,255,.55));transform:translate(-50%,-50%) scale(.08) rotate(0deg);transform-origin:center}
  .about-logo-svg .logo-use{display:block}
  .mascot-wink-eye{transform-box:fill-box;transform-origin:center}
  .ignition-star,.wink-star{position:absolute;left:50%;top:50%;width:12px;height:12px;opacity:0;transform:translate(-50%,-50%) scale(.2)}
  .ignition-star::before,.ignition-star::after,.wink-star::before,.wink-star::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:999px;transform:translate(-50%,-50%);box-shadow:0 0 12px rgba(255,255,255,.95)}
  .ignition-star::before,.wink-star::before{width:3px;height:100%}.ignition-star::after,.wink-star::after{width:100%;height:3px}
  .ignition-star i,.wink-star i{position:absolute;inset:0;transform:rotate(45deg)}
  .ignition-star i::before,.ignition-star i::after,.wink-star i::before,.wink-star i::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:999px;transform:translate(-50%,-50%)}
  .ignition-star i::before,.wink-star i::before{width:2px;height:100%}.ignition-star i::after,.wink-star i::after{width:100%;height:2px}
  .trail-dot{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 10px rgba(255,255,255,.9);pointer-events:none}
  .wink-star.one{margin-left:clamp(-150px,-11vw,-86px);margin-top:clamp(-90px,-6vw,-48px)}.wink-star.two{margin-left:clamp(-178px,-14vw,-110px);margin-top:clamp(-56px,-4vw,-28px);width:8px;height:8px}
  .about-stage.running .ignition-star{animation:ignite .52s ease-out both}
  .about-stage.running .about-logo-svg{animation:logoArrival 2.15s cubic-bezier(.22,.7,.25,1) .28s both}
  .about-stage.running .mascot-wink-eye{animation:mascotWink .46s ease 2.55s both}
  .about-stage.running .wink-star.one{animation:sparkle .58s ease 2.72s both}
  .about-stage.running .wink-star.two{animation:sparkle .58s ease 2.86s both}
  @keyframes ignite{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}45%{opacity:1;transform:translate(-50%,-50%) scale(4.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(7)}}
  @keyframes logoArrival{0%{opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(0deg)}10%{opacity:1}52%{opacity:1;transform:translate(-8%,-82%) scale(.72) rotate(720deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(1080deg)}}
  @keyframes mascotWink{0%,100%{transform:scaleY(1)}42%,68%{transform:scaleY(.08)}}
  @keyframes sparkle{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(0)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.7) rotate(35deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.65) rotate(70deg)}}
  .about-panel{display:flex;flex-direction:column;min-height:clamp(420px,32vw,720px)}
  .about-tabs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.58);border-radius:15px;overflow:hidden;margin-bottom:10px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px)}
  .about-tab{appearance:none;border:0;border-right:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.88);padding:11px 12px;font:inherit;font-size:15px;font-weight:700;letter-spacing:.08em;cursor:pointer;text-transform:uppercase;transition:background .18s ease,color .18s ease}
  .about-tab:last-child{border-right:0}.about-tab:hover{background:#fff}.about-tab.active{background:#111;color:#fff}
  .about-description{flex:1;border:1px solid rgba(255,255,255,.62);border-radius:18px;padding:18px 26px;display:flex;flex-direction:column;justify-content:flex-start;background:#fff;color:#111}
  .about-description{overflow:auto;transition:opacity .18s ease}
  .about-points{display:grid;gap:18px}
  .about-point{padding-bottom:16px;border-bottom:1px solid #ddd}
  .about-point:last-child{padding-bottom:0;border-bottom:0}
  .about-point h2{font-size:15px;letter-spacing:.12em;margin:0 0 7px}
  .about-point p{font-size:15px;line-height:1.62;margin:0;color:#333}
  .op-toggle,.expand-toggle,.simple-toggle{border:0;background:none;padding:0;font:inherit;font-size:15px;font-weight:700;letter-spacing:.08em;cursor:pointer;text-align:left}
  .op-cursor,.expand-cursor{display:inline-block;margin-left:1px}
  .click-hint{display:inline-block;margin-left:10px;font-size:10px;font-weight:700;letter-spacing:.12em;color:#777;vertical-align:middle;opacity:.32;animation:clickHintPulse 1.65s ease-in-out infinite}
  .click-hint.is-learned{animation:none;opacity:0;transform:translateX(-4px);transition:opacity .35s ease,transform .35s ease}
  @keyframes clickHintPulse{0%,100%{opacity:.25}50%{opacity:.82}}
  @media(prefers-reduced-motion:reduce){.click-hint{animation:none;opacity:.6}}
  .op-copy,.expand-copy{margin-top:9px!important}
  .concept-list{margin:12px 0 0;padding-left:19px;display:grid;gap:10px}
  .concept-list li{font-size:14px;line-height:1.55;color:#333}
  .concept-list strong{letter-spacing:.06em}
  .mission-summary{margin-top:18px!important;padding-top:16px;border-top:1px solid #ddd}
  .mission-summary strong{display:block;margin-bottom:6px;font-size:13px;letter-spacing:.12em}
  .ai-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px;margin:14px 0 0;padding:0;list-style:none}
  .ai-roster li{font-size:14px;line-height:1.45;color:#333}
  .ai-roster strong{font-weight:700}
  .trademark-note{margin-top:14px!important;font-size:12px!important;color:#777!important}
  @media(max-width:520px){.ai-roster{grid-template-columns:1fr}}
  .about-note{margin-top:20px;font-size:13px;color:rgba(255,255,255,.78);text-align:center}
  /* Match htt.zip desktop strategy: viewport-relative sizing avoids fixed caps becoming tiny at browser zoom. */
  @media(min-width:981px){
    .about-section{display:flex;flex-direction:column;justify-content:center;min-height:min(100vh,1440px)}
    .about-section-title,.about-section-subtext{width:min(92vw,2200px);margin-right:auto}
    .about-section-title{margin-left:auto}
    .about-section-subtext{margin-left:calc(4vw + 33px)}
    .about-logo-svg{width:min(54%,24vw);max-height:78%;}
  }
  @media(max-width:760px){
    .about-section{padding:36px 18px 48px}.about-section-subtext{margin-left:33px}.about-grid{grid-template-columns:1fr}.about-panel{min-height:auto}.about-visual{min-height:280px;order:2}.about-logo-svg{width:min(48%,300px);max-height:78%}.about-panel{order:1}.about-description{min-height:280px;padding:18px 22px}.about-tab{font-size:15px;padding:10px 6px}
  }

  /* VISION — connected world / continuation */
  .vision-stage{display:none;background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.08),transparent 42%)}
  .vision-scene{width:100%;height:100%;overflow:visible}
  .vision-star{fill:#fff;opacity:.72;transform-box:fill-box;transform-origin:center;animation:visionTwinkle 3.8s ease-in-out infinite alternate}
  .vision-star:nth-of-type(3n){animation-delay:-1.3s}.vision-star:nth-of-type(4n){animation-delay:-2.4s}
  .vision-globe-ring,.vision-lat,.vision-lon{fill:none;stroke:rgba(255,255,255,.62);stroke-width:2.4;vector-effect:non-scaling-stroke}
  .vision-globe{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.9);stroke-width:3.2;vector-effect:non-scaling-stroke}
  .vision-world{fill:rgba(255,255,255,.13);stroke:rgba(255,255,255,.64);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  .vision-world-spin{transform-origin:500px 325px}
  .vision-network{opacity:0;transition:opacity .35s ease}
  .vision-network.active{opacity:1}
  .vision-shell{fill:none;stroke:rgba(255,255,255,.68);stroke-width:2.6;stroke-dasharray:11 15;vector-effect:non-scaling-stroke;stroke-dashoffset:220}
  .vision-network.active .vision-shell{animation:visionShellDraw 1.25s ease-out forwards}
  .vision-link{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:180;stroke-dashoffset:180}
  .vision-network.active .vision-link{animation:visionLinkDraw .75s ease-out forwards}
  .vision-network.active .l2{animation-delay:.15s}.vision-network.active .l3{animation-delay:.3s}.vision-network.active .l4{animation-delay:.45s}.vision-network.active .l5{animation-delay:.6s}.vision-network.active .l6{animation-delay:.75s}
  .vision-node{fill:#fff;opacity:0;filter:drop-shadow(0 0 5px rgba(255,255,255,.9));transform-box:fill-box;transform-origin:center}
  .vision-network.active .vision-node{animation:visionNodeIn .36s ease-out forwards}
  .vision-network.active .n2{animation-delay:.14s}.vision-network.active .n3{animation-delay:.28s}.vision-network.active .n4{animation-delay:.42s}.vision-network.active .n5{animation-delay:.56s}.vision-network.active .n6{animation-delay:.7s}.vision-network.active .n7{animation-delay:.84s}.vision-network.active .n8{animation-delay:.98s}
  .vision-mascot{filter:drop-shadow(0 0 8px rgba(255,255,255,.5));transform-origin:center;transform-box:fill-box}
  .vision-magic{opacity:0;pointer-events:none}
  .vision-magic.active{animation:visionMagic .78s ease-out both}
  .vision-magic line{stroke:#fff;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 5px #fff)}
  @keyframes visionTwinkle{from{opacity:.3;transform:scale(.72)}to{opacity:.9;transform:scale(1.18)}}
  @keyframes visionShellDraw{to{stroke-dashoffset:0}}
  @keyframes visionLinkDraw{to{stroke-dashoffset:0}}
  @keyframes visionNodeIn{0%{opacity:0;transform:scale(.15)}65%{opacity:1;transform:scale(1.35)}100%{opacity:.92;transform:scale(1)}}
  @keyframes visionMagic{0%{opacity:0;transform:scale(.25) rotate(0deg)}38%{opacity:1;transform:scale(1.25) rotate(35deg)}100%{opacity:0;transform:scale(1.8) rotate(80deg)}}
  @media(prefers-reduced-motion:reduce){.vision-star{animation:none}.vision-network{opacity:1}.vision-network .vision-shell,.vision-network .vision-link{stroke-dashoffset:0}.vision-network .vision-node{opacity:.92}}


/* About — integrated dark theme */
html[data-theme="dark"] #about.about-section{background:linear-gradient(155deg,#6f291f 0%,#32105d 76%)}
html[data-theme="dark"] #about .about-tabs{background:rgba(0,0,0,.20);border-color:rgba(255,255,255,.34)}
html[data-theme="dark"] #about .about-tab{background:rgba(28,28,28,.92);color:#f5f5f5;border-color:rgba(255,255,255,.22)}
html[data-theme="dark"] #about .about-tab:hover{background:#2b2b2b}
html[data-theme="dark"] #about .about-tab.active{background:#f2f2f2;color:#111}
html[data-theme="dark"] #about .about-description{background:#171717;color:#f5f5f5;border-color:rgba(255,255,255,.24)}
html[data-theme="dark"] #about .about-point{border-bottom-color:#3b3b3b}
html[data-theme="dark"] #about .about-point p,html[data-theme="dark"] #about .concept-list li,html[data-theme="dark"] #about .ai-roster li{color:#d4d4d4}
html[data-theme="dark"] #about .op-toggle,html[data-theme="dark"] #about .expand-toggle,html[data-theme="dark"] #about .simple-toggle{color:#f5f5f5}
html[data-theme="dark"] #about .mission-summary{border-top-color:#3b3b3b}
html[data-theme="dark"] #about .trademark-note,html[data-theme="dark"] #about .click-hint{color:#aaa!important}


/*===RESPONSIVE / ZOOM / ABOUT-WORKFLOW-CLIENT FIX 07===*/
/* Keep the About edge continuous with Home in both themes. */
:root{--home-about-edge:#f2623e}
html[data-theme="dark"]{--home-about-edge:#633016}
#about.about-section{
  position:relative;
  margin-top:-1px;
  background:linear-gradient(180deg,var(--home-about-edge) 0%,#e55332 48%,#f0491e 100%);
}
html[data-theme="dark"] #about.about-section{
  background:linear-gradient(180deg,var(--home-about-edge) 0%,#4b2318 48%,#3b1710 100%);
}

/* The shared #logo sprite remains the source artwork.  This tiny overlay is
   only the independently animatable left eye, because SVG <use> descendants
   cannot be targeted reliably across browsers. */
#about .mascot-wink-eye-overlay{transform-box:fill-box;transform-origin:center;pointer-events:none}
#about .about-stage.running .mascot-wink-eye-overlay{animation:mascotWink .46s ease 2.55s both}
#about .about-stage.running .about-logo-svg{animation-fill-mode:both}

/* About follows the same viewport-aware sizing approach as the rest of the
   integrated page instead of retaining the standalone page's fixed type. */
#about .about-section-title{font-size:clamp(24px,1.35vw,36px)}
#about .about-section-subtext{font-size:clamp(16px,.88vw,22px)}
#about .about-tab{font-size:clamp(14px,.78vw,18px)}
#about .about-point h2{font-size:clamp(14px,.78vw,18px)}
#about .about-point p{font-size:clamp(14px,.78vw,18px)}

/* At ordinary desktop widths keep the About composition compact enough to
   remain inside the viewport; at mobile/tablet widths stack it like the site. */
@media (min-width:981px){
  #about.about-section{display:flex;flex-direction:column;justify-content:center;min-height:min(100vh,1440px)}
  #about .about-grid{width:min(78vw,1900px)}
  #about .about-section-title,#about .about-section-subtext{width:min(78vw,1900px);margin-right:auto;margin-left:auto}
  #about .about-section-subtext{padding-left:33px}
}
@media (max-width:980px){
  #about.about-section{padding:clamp(34px,6vw,56px) 18px 48px;min-height:auto}
  #about .about-grid{grid-template-columns:1fr;width:min(100%,760px);gap:24px}
  #about .about-panel{order:1;min-height:0}
  #about .about-visual{order:2;min-height:clamp(280px,68vw,520px)}
  #about .about-description{min-height:280px}
  #about .about-section-title,#about .about-section-subtext{width:min(100%,760px);margin-right:auto;margin-left:auto}
  #about .about-section-subtext{padding-left:33px}
}

/* 987px-wide/short desktop: stage and panel use the same square footprint.
   This removes the height-derived SVG shrink that made the workflow diagram
   look detached from its panel. */
@media (min-width:981px) and (max-width:1120px){
  .workflow{padding:38px 20px 54px;min-height:auto;overflow:hidden}
  .workflow .head{width:min(72vw,560px);margin:0 auto 24px}
  .workflow .stage-row{display:flex;flex-direction:column;width:100%;gap:28px;margin:0 auto;align-items:center}
  .workflow .stage,.workflow .panel{width:min(72vw,560px);max-width:560px}
  .workflow .stage{aspect-ratio:1/1;flex:0 0 auto}
  .workflow .panel{position:static;min-height:0;align-self:center}
}

/* Client cards change by usable viewport, not by squeezing the desktop trio. */
@media (max-width:860px){
  #clients .clients-ui{padding:44px 0 56px}
  #clients .wrap{width:min(100% - 28px,760px)}
  #clients .client-header{margin-bottom:30px}
  #clients .slider{gap:10px}
  #clients .track{gap:18px}
  #clients .card{flex:0 0 calc((100% - 18px)/2);min-width:0}
}
@media (max-width:600px){
  #clients .wrap{width:min(100% - 24px,560px)}
  #clients .track{gap:0}
  #clients .card{flex:0 0 100%;width:100%;min-width:100%}
  #clients .arrow{width:40px;height:40px}
}

/* Navbar type/gaps scale up gently on very wide CSS viewports (including
   browser zoom-out), matching the fixed-design-stage stability of Home. */
@media (min-width:1400px){
  #site-header .brand{font-size:clamp(22px,1.05vw,30px)}
  #site-header .brand .hex-mark{width:clamp(42px,2.05vw,56px);height:clamp(42px,2.05vw,56px)}
  #site-header .navlinks{gap:clamp(38px,1.9vw,54px)}
  #site-header .navlinks a{font-size:clamp(17px,.84vw,22px)}
}


/*===BUGFIX PASS 2===*/
/* Client copy uses the available card space instead of artificial ellipsis.
   Card count remains the validated staged 3 -> 2 -> 1 layout. */
#clients .desc-block .body{display:block!important;overflow:visible!important;-webkit-line-clamp:unset!important;line-clamp:unset!important}
#clients .card{height:auto}
@media (min-width:861px){#clients .card{flex-basis:calc((100% - 48px)/3)}}
@media (min-width:601px) and (max-width:860px){#clients .card{flex-basis:calc((100% - 18px)/2)}}
@media (max-width:600px){#clients .card{flex-basis:100%}}


/* === CONTACT V6 + FOOTER INTEGRATION === */

    #contact{
      --red:#E4231C;
      --red-dark:#94120D;
      --amber:#FFC93C;
      --amber-deep:#FF8A00;
      --ink:#1C120B;
      --cream:#FFF6EE;
      --paper:#FFFFFF;
      --muted:#7A6A61;
      --line:rgba(28,18,11,.12);
      --display:"Sora",system-ui,sans-serif;
      --body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      --mono:"JetBrains Mono",ui-monospace,monospace;

      /* Starts at the current Clients endpoint: #f68a52 */
      --contact-edge:#f68a52;
      --contact-mid:#ffad58;
      --contact-gold:#ffd56a;
      --contact-end:#fff6ee;

      --panel:rgba(255,255,255,.72);
      --panel-soft:rgba(255,250,244,.56);
      --field:rgba(255,255,255,.70);
      --focus:rgba(228,35,28,.18);
      --shadow:0 28px 80px -36px rgba(100,45,13,.42);
    }

    html[data-theme="dark"] #contact{
      --ink:#FFF6EE;
      --cream:#120D09;
      --paper:#1E1712;
      --muted:#C5B4A7;
      --line:rgba(255,246,238,.15);

      /* Starts at the current dark Clients endpoint: #633016 */
      --contact-edge:#633016;
      --contact-mid:#4d2815;
      --contact-gold:#30200f;
      --contact-end:#120D09;

      --panel:rgba(30,23,18,.78);
      --panel-soft:rgba(30,23,18,.48);
      --field:rgba(18,13,9,.48);
      --focus:rgba(255,201,60,.16);
      --shadow:0 28px 80px -36px rgba(0,0,0,.72);
    }

    #contact, #contact *{box-sizing:border-box}
    #contact{scroll-behavior:smooth}
    #contact{
      margin:0;
      min-height:100vh;
      font-family:var(--body);
      color:var(--ink);
      background:var(--contact-edge);
    }

    #contact button, #contact input, #contact select, #contact textarea{font:inherit}
    #contact button, #contact a{ -webkit-tap-highlight-color:transparent; }

    #contact{
      position:relative;
      isolation:isolate;
      min-height:100svh;
      overflow:hidden;
      padding:clamp(72px,9vw,128px) max(24px,5vw);
      background:
        radial-gradient(70% 70% at 8% 54%,rgba(228,35,28,.15),transparent 65%),
        radial-gradient(55% 60% at 92% 78%,rgba(255,201,60,.30),transparent 66%),
        linear-gradient(180deg,
          var(--contact-edge) 0%,
          var(--contact-mid) 30%,
          var(--contact-gold) 68%,
          var(--contact-end) 100%);
    }

    /* quiet technical layer: signals arriving at the final node */
    #contact .circuit{
      position:absolute;
      inset:0;
      z-index:-1;
      width:100%;
      height:100%;
      pointer-events:none;
      opacity:.34;
    }
    #contact .circuit path{
      fill:none;
      stroke:currentColor;
      stroke-width:1.2;
      stroke-dasharray:4 8;
    }
    #contact .circuit circle{fill:currentColor}
    #contact .circuit .signal{
      stroke-width:2;
      stroke-dasharray:2 12;
      opacity:.75;
    }

    #contact .shell{
      width:min(1560px,100%);
      margin-inline:auto;
    }

    #contact .topline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      margin-bottom:clamp(34px,4vw,62px);
    }

    #contact .kicker{
      margin:0;
      font:500 .78rem/1 var(--mono);
      letter-spacing:.20em;
      text-transform:uppercase;
    }
    #contact .kicker::before{
      content:"";
      display:inline-block;
      width:28px;
      height:2px;
      margin-right:11px;
      vertical-align:middle;
      background:currentColor;
    }

    #contact .controls{display:flex;gap:8px}
    #contact .control{
      min-width:42px;
      height:42px;
      padding:0 13px;
      border:1px solid var(--line);
      border-radius:999px;
      color:var(--ink);
      background:rgba(255,255,255,.34);
      backdrop-filter:blur(10px);
      cursor:pointer;
      font:600 .72rem/1 var(--mono);
    }
    html[data-theme="dark"] #contact .control{background:rgba(18,13,9,.28)}

    #contact .hero{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(520px,.92fr);
      gap:clamp(48px,6vw,110px);
      align-items:stretch;
    }

    #contact .intro{
      display:flex;
      flex-direction:column;
      min-height:570px;
      padding:clamp(10px,2vw,22px) 0;
    }

    #contact h1{
      max-width:760px;
      margin:0;
      font:800 clamp(3.5rem,5.4vw,6.35rem)/.94 var(--display);
      letter-spacing:-.065em;
    }

    #contact .lead{
      max-width:650px;
      margin:28px 0 0;
      font-size:clamp(1.05rem,1.6vw,1.22rem);
      line-height:1.72;
      color:color-mix(in srgb,var(--ink) 72%,transparent);
    }

    #contact .direct{
      margin-top:auto;
      padding-top:48px;
    }

    #contact .direct-label{
      margin:0 0 11px;
      font:500 .72rem/1 var(--mono);
      letter-spacing:.13em;
      text-transform:uppercase;
      color:color-mix(in srgb,var(--ink) 64%,transparent);
    }

    #contact .email{
      display:inline-flex;
      align-items:center;
      gap:12px;
      color:var(--ink);
      text-decoration:none;
      font:700 clamp(1.15rem,2vw,1.55rem)/1.3 var(--display);
    }

    #contact .email .arrow{
      display:grid;
      place-items:center;
      width:38px;
      height:38px;
      border:1px solid var(--line);
      border-radius:50%;
      transition:transform .18s ease,background .18s ease;
    }
    #contact .email:hover .arrow{transform:translate(4px,-2px);background:rgba(255,255,255,.36)}

    #contact .form-card{
      position:relative;
      padding:clamp(28px,4vw,52px);
      border:1px solid var(--line);
      border-radius:32px;
      background:var(--panel);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
      overflow:hidden;
    }

    #contact .form-card::before{
      content:"";
      position:absolute;
      width:150px;
      height:150px;
      right:-70px;
      top:-70px;
      border:1px solid var(--line);
      border-radius:50%;
      box-shadow:0 0 0 24px rgba(255,255,255,.05),0 0 0 50px rgba(255,255,255,.035);
    }

    #contact .form-head{
      position:relative;
      margin-bottom:30px;
    }

    #contact .form-index{
      margin:0 0 10px;
      font:500 .7rem/1 var(--mono);
      letter-spacing:.15em;
      text-transform:uppercase;
      color:color-mix(in srgb,var(--ink) 60%,transparent);
    }

    #contact h2{
      margin:0;
      font:700 clamp(1.65rem,3vw,2.4rem)/1.12 var(--display);
      letter-spacing:-.04em;
    }

    #contact .grid{
      position:relative;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:20px 18px;
    }

    #contact .field{display:grid;gap:8px}
    #contact .full{grid-column:1/-1}

    #contact label{
      font-size:.82rem;
      font-weight:600;
    }
    #contact .optional{
      color:color-mix(in srgb,var(--ink) 50%,transparent);
      font-weight:400;
    }

    #contact input, #contact select, #contact textarea{
      width:100%;
      border:1px solid var(--line);
      border-radius:13px;
      padding:14px 15px;
      color:var(--ink);
      background:var(--field);
      outline:none;
      transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
    }
    #contact input:focus, #contact select:focus, #contact textarea:focus{
      border-color:color-mix(in srgb,var(--red) 62%,var(--line));
      box-shadow:0 0 0 4px var(--focus);
    }
    #contact textarea{min-height:145px;resize:vertical}
    #contact ::placeholder{color:color-mix(in srgb,var(--ink) 38%,transparent)}

    #contact .submit-row{
      display:flex;
      align-items:center;
      gap:18px;
      margin-top:24px;
    }

    #contact .submit{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      min-height:50px;
      border:0;
      border-radius:999px;
      padding:0 22px;
      color:#fff;
      background:#1C120B;
      cursor:pointer;
      font-weight:700;
      transition:transform .18s ease,box-shadow .18s ease;
    }
    html[data-theme="dark"] #contact .submit{color:#1C120B;background:#FFF6EE}
    #contact .submit:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(0,0,0,.7)}

    #contact .privacy{
      margin:0;
      max-width:330px;
      font-size:.74rem;
      line-height:1.55;
      color:color-mix(in srgb,var(--ink) 56%,transparent);
    }

    #contact .destination{
      position:absolute;
      left:50%;
      bottom:36px;
      translate:-50% 0;
      display:flex;
      align-items:center;
      gap:9px;
      font:500 .68rem/1 var(--mono);
      letter-spacing:.13em;
      text-transform:uppercase;
      opacity:.54;
    }
    #contact .destination::before{
      content:"";
      width:7px;height:7px;border-radius:50%;
      background:currentColor;
      box-shadow:0 0 0 6px color-mix(in srgb,currentColor 12%,transparent);
    }


    #contact .contact-meta{
      display:grid;
      grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
      gap:22px;
      margin-top:28px;
    }

    #contact .meta-card{
      position:relative;
      min-height:210px;
      padding:28px 30px;
      border:1px solid var(--line);
      border-radius:24px;
      background:var(--panel-soft);
      backdrop-filter:blur(14px);
      overflow:hidden;
    }

    #contact .meta-eyebrow{
      margin:0 0 20px;
      font:500 .7rem/1 var(--mono);
      letter-spacing:.15em;
      text-transform:uppercase;
      color:color-mix(in srgb,var(--ink) 58%,transparent);
    }

    #contact .hours-time{
      margin:0 0 8px;
      font:700 clamp(1.55rem,2.4vw,2.25rem)/1.1 var(--display);
      letter-spacing:-.035em;
    }

    #contact .hours-days{
      margin:0 0 24px;
      font-weight:600;
    }

    #contact .timezone{
      display:inline-flex;
      align-items:center;
      gap:9px;
      margin:0;
      padding:8px 11px;
      border:1px solid var(--line);
      border-radius:999px;
      font:500 .7rem/1 var(--mono);
      letter-spacing:.06em;
    }

    #contact .timezone::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--red);
    }

    #contact .location-card{
      display:grid;
      grid-template-columns:minmax(210px,.7fr) minmax(300px,1.3fr);
      padding:0;
    }

    #contact .location-copy{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:28px 30px;
    }

    #contact .address{
      margin:0;
      max-width:340px;
      font:650 1.05rem/1.55 var(--display);
    }

    #contact .map-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width:max-content;
      margin-top:22px;
      color:var(--ink);
      text-decoration:none;
      font-weight:700;
    }

    #contact .map-frame{
      position:relative;
      min-height:210px;
      border-left:1px solid var(--line);
      background:
        linear-gradient(90deg,transparent 49.5%,color-mix(in srgb,var(--ink) 9%,transparent) 50%,transparent 50.5%),
        linear-gradient(0deg,transparent 49.5%,color-mix(in srgb,var(--ink) 9%,transparent) 50%,transparent 50.5%),
        color-mix(in srgb,var(--paper) 58%,transparent);
      background-size:54px 54px;
    }

    #contact .map-frame::before, #contact .map-frame::after{
      content:"";
      position:absolute;
      border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
      border-radius:50%;
      left:50%;
      top:50%;
      translate:-50% -50%;
    }

    #contact .map-frame::before{width:96px;height:96px}
    #contact .map-frame::after{width:42px;height:42px}

    #contact .map-pin{
      position:absolute;
      left:50%;
      top:50%;
      translate:-50% -50%;
      width:14px;
      height:14px;
      border-radius:50% 50% 50% 0;
      rotate:-45deg;
      background:var(--red);
      box-shadow:0 0 0 7px rgba(228,35,28,.10);
    }

    #contact .map-placeholder{
      position:absolute;
      left:18px;
      bottom:16px;
      margin:0;
      padding:7px 9px;
      border:1px solid var(--line);
      border-radius:999px;
      background:var(--panel);
      font:500 .64rem/1 var(--mono);
      letter-spacing:.05em;
    }

    #contact .map-frame iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }

    @media  (min-width:1900px){
      #contact{
        padding-top:100px;
        padding-bottom:84px;
      }
      #contact .shell{width:min(1660px,calc(100% - 180px))}
      #contact .hero{
        grid-template-columns:minmax(0,1.04fr) minmax(600px,.96fr);
        gap:120px;
      }
      #contact h1{font-size:6.45rem}
      #contact .form-card{padding:46px 50px}
    }

    @media  (max-width:900px){
      #contact .hero{grid-template-columns:1fr}
      #contact .intro{min-height:auto}
      #contact .direct{margin-top:46px}
      #contact .contact-meta{grid-template-columns:1fr}
      #contact .destination{display:none}
    }

    @media  (max-width:620px){
      #contact{padding-inline:20px}
      #contact .topline{align-items:flex-start}
      #contact .grid{grid-template-columns:1fr}
      #contact .full{grid-column:auto}
      #contact .submit-row{align-items:flex-start;flex-direction:column}
      #contact .submit{width:100%}
      #contact h1{font-size:clamp(3.1rem,16vw,5rem)}
      #contact .form-card{border-radius:24px}
      #contact .location-card{grid-template-columns:1fr}
      #contact .map-frame{min-height:230px;border-left:0;border-top:1px solid var(--line)}
    }



    /* =========================================================
       CONTACT V5
       Rebuilt from V3's known-good layout.
       Only additive/scoped rules below — no hero/meta grid rewrite.
       ========================================================= */

    /* HTT white-on-colour treatment for the saturated Contact region. */
    #contact .topline, #contact .kicker, #contact .intro h1, #contact .lead, #contact .direct{
      color:#FFF8F0;
    }

    #contact .lead{
      color:rgba(255,248,240,.90);
    }

    #contact .kicker::before{
      background:#FFF8F0;
    }

    #contact .control{
      color:#4A2818;
      border-color:rgba(255,255,255,.38);
      background:rgba(255,255,255,.42);
    }

    #contact .direct{
      padding-top:42px;
    }

    #contact .direct-label{
      color:rgba(255,248,240,.72);
    }

    #contact .direct-channels{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(250px,.95fr);
      gap:28px;
      max-width:720px;
      margin-top:14px;
    }

    #contact .direct-channel{
      padding-top:14px;
      border-top:1px solid rgba(255,255,255,.38);
    }

    #contact .channel-label{
      display:block;
      margin-bottom:10px;
      color:rgba(255,248,240,.68);
      font:600 .66rem/1 var(--mono);
      letter-spacing:.14em;
      text-transform:uppercase;
    }

    #contact .direct-link{
      color:#FFF;
      text-decoration-color:rgba(255,255,255,.58);
      text-underline-offset:3px;
      font-weight:650;
    }

    #contact .direct-link:hover{
      color:#FFF0B5;
      text-decoration-color:currentColor;
    }

    #contact .direct-email{
      overflow-wrap:anywhere;
    }

    #contact .phone-list{
      display:grid;
      gap:7px;
    }

    #contact .phone-row{
      display:grid;
      grid-template-columns:62px minmax(0,1fr);
      gap:10px;
      align-items:baseline;
    }

    #contact .phone-role{
      color:rgba(255,248,240,.68);
      font:600 .64rem/1.4 var(--mono);
      letter-spacing:.04em;
      text-transform:uppercase;
    }

    /* reCAPTCHA is a separate full-width form element, not part of submit flex. */
    #contact .recaptcha-slot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      margin-top:22px;
      min-height:72px;
      padding:15px 17px;
      border:1px dashed color-mix(in srgb,var(--ink) 24%,transparent);
      border-radius:14px;
      background:color-mix(in srgb,var(--field) 72%,transparent);
    }

    #contact .recaptcha-title{
      margin:0 0 5px;
      color:var(--ink);
      font:700 .76rem/1.2 var(--display);
    }

    #contact .recaptcha-note{
      margin:0;
      max-width:500px;
      color:color-mix(in srgb,var(--ink) 58%,transparent);
      font:500 .66rem/1.45 var(--mono);
    }

    #contact .recaptcha-status{
      flex:0 0 auto;
      padding:7px 10px;
      border:1px solid color-mix(in srgb,var(--amber-deep) 25%,transparent);
      border-radius:999px;
      color:color-mix(in srgb,var(--ink) 74%,var(--amber-deep));
      background:color-mix(in srgb,var(--amber) 20%,transparent);
      font:700 .60rem/1 var(--mono);
      letter-spacing:.08em;
      text-transform:uppercase;
      white-space:nowrap;
    }

    /* Opening-hours card sits on the stronger orange area: use warm white.
       Location stays dark-on-light because its card transitions into cream/map. */
    #contact .contact-meta > .meta-card:first-child{
      color:#FFF8F0;
    }

    #contact .contact-meta > .meta-card:first-child .meta-eyebrow{
      color:rgba(255,248,240,.70);
    }

    #contact .contact-meta > .meta-card:first-child .timezone{
      color:#FFF8F0;
      border-color:rgba(255,255,255,.30);
      background:rgba(255,255,255,.08);
    }

    html[data-theme="dark"] #contact .recaptcha-slot{
      border-color:rgba(255,255,255,.18);
      background:rgba(255,255,255,.045);
    }

    html[data-theme="dark"] #contact .recaptcha-title{color:#FFF6EE}
    html[data-theme="dark"] #contact .recaptcha-note{color:rgba(255,246,238,.58)}

    @media  (max-width:760px){
      #contact .direct-channels{grid-template-columns:1fr}
    }

    @media  (max-width:620px){
      #contact .recaptcha-slot{
        align-items:flex-start;
        flex-direction:column;
      }
    }


    /* FINAL LIGHT-THEME CONTRAST FIX
       Direct Contact + Opening Hours sit on pale surfaces in light mode. */
    html[data-theme="light"] #contact .contact .direct, html[data-theme="light"] #contact .contact .direct-label, html[data-theme="light"] #contact .contact .channel-label, html[data-theme="light"] #contact .contact .phone-role, html[data-theme="light"] #contact .contact .direct-link{
      color:var(--ink);
      text-shadow:none;
    }

    html[data-theme="light"] #contact .contact .direct-channel{
      border-top-color:rgba(28,18,11,.24);
    }

    html[data-theme="light"] #contact .contact .direct-link{
      text-decoration-color:rgba(28,18,11,.45);
    }

    html[data-theme="light"] #contact .contact .direct-link:hover{
      color:var(--red-dark);
      text-decoration-color:currentColor;
    }

    html[data-theme="light"] #contact .contact-meta > .meta-card:first-child, html[data-theme="light"] #contact .contact-meta > .meta-card:first-child .meta-eyebrow, html[data-theme="light"] #contact .contact-meta > .meta-card:first-child .meta-value, html[data-theme="light"] #contact .contact-meta > .meta-card:first-child .meta-sub, html[data-theme="light"] #contact .contact-meta > .meta-card:first-child .meta-note, html[data-theme="light"] #contact .contact-meta > .meta-card:first-child .timezone{
      color:var(--ink);
      text-shadow:none;
    }

    html[data-theme="light"] #contact .contact-meta > .meta-card:first-child .timezone{
      border-color:rgba(28,18,11,.18);
      background:rgba(255,255,255,.14);
    }

    /* =========================================================
       HTT FOOTER — deliberately quieter than Contact.
       Contact converts; Footer closes the system.
       ========================================================= */
    .site-footer{
      position:relative;
      overflow:hidden;
      color:#FFF6EE;
      background:
        radial-gradient(55% 110% at 84% 0%,rgba(228,35,28,.22),transparent 64%),
        linear-gradient(145deg,#1C120B 0%,#130D09 58%,#0C0907 100%);
      border-top:1px solid rgba(255,246,238,.10);
    }

    .site-footer .footer-circuit{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      opacity:.16;
    }
    .site-footer .footer-circuit path{
      fill:none;
      stroke:#FFF6EE;
      stroke-width:1;
      stroke-dasharray:4 9;
    }
    .site-footer .footer-circuit circle{fill:#FFC93C}

    .site-footer .footer-shell{
      position:relative;
      width:min(1660px,calc(100% - 180px));
      margin-inline:auto;
      padding:clamp(64px,7vw,100px) 0 30px;
    }

    .site-footer .footer-main{
      display:grid;
      grid-template-columns:minmax(320px,1.25fr) minmax(160px,.55fr) minmax(180px,.65fr);
      gap:clamp(44px,7vw,120px);
      align-items:start;
    }

    .site-footer .footer-brand{
      max-width:650px;
    }

    .site-footer .footer-mark{
      display:inline-flex;
      align-items:center;
      gap:13px;
      margin:0 0 24px;
      color:#FFF6EE;
      text-decoration:none;
      font:800 1.25rem/1 var(--display);
      letter-spacing:-.035em;
    }

    .site-footer .footer-mark-icon{
      display:grid;
      place-items:center;
      width:38px;
      height:38px;
      border:1px solid rgba(255,246,238,.18);
      border-radius:11px;
      background:rgba(255,255,255,.05);
      font:700 .68rem/1 var(--mono);
      letter-spacing:.05em;
    }

    .site-footer .footer-statement{
      margin:0;
      max-width:620px;
      font:700 clamp(2rem,3.4vw,3.6rem)/1.02 var(--display);
      letter-spacing:-.055em;
    }

    .site-footer .footer-statement span:last-child{
      color:#FFC93C;
    }
    .site-footer .footer-statement-main{color:#FFF6EE !important}

    .site-footer .footer-column-title{
      margin:4px 0 22px;
      color:rgba(255,246,238,.52);
      font:500 .68rem/1 var(--mono);
      letter-spacing:.16em;
      text-transform:uppercase;
    }

    .site-footer .footer-links{
      display:grid;
      gap:14px;
      margin:0;
      padding:0;
      list-style:none;
    }

    .site-footer .footer-links a{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width:max-content;
      color:#FFF6EE;
      text-decoration:none;
      font-weight:600;
      line-height:1.35;
      transition:color .16s ease,transform .16s ease;
    }
    .site-footer .footer-links a:hover{
      color:#FFC93C;
      transform:translateX(3px);
    }

    .site-footer .footer-divider{
      height:1px;
      margin:clamp(54px,6vw,82px) 0 24px;
      background:rgba(255,246,238,.12);
    }

    .site-footer .footer-bottom{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:24px;
      color:rgba(255,246,238,.52);
      font:500 .68rem/1.5 var(--mono);
      letter-spacing:.04em;
    }

    .site-footer .footer-bottom-group{
      display:flex;
      align-items:center;
      gap:20px;
      flex-wrap:wrap;
    }

    .site-footer .footer-bottom a{
      color:inherit;
      text-decoration:none;
    }
    .site-footer .footer-bottom a:hover{color:#FFF6EE}

    .site-footer .back-top{
      display:inline-grid;
      place-items:center;
      width:42px;
      height:42px;
      border:1px solid rgba(255,246,238,.15);
      border-radius:50%;
      color:#FFF6EE !important;
      background:rgba(255,255,255,.05);
      font-size:1rem;
      transition:transform .16s ease,background .16s ease;
    }
    .site-footer .back-top:hover{
      transform:translateY(-3px);
      background:rgba(255,255,255,.10);
    }

    @media  (max-width:900px){
      .site-footer .footer-shell{width:min(100% - 48px,1180px)}
      .site-footer .footer-main{grid-template-columns:1fr 1fr}
      .site-footer .footer-brand{grid-column:1/-1}
    }

    @media  (max-width:620px){
      .site-footer .footer-shell{width:calc(100% - 40px);padding-top:58px}
      .site-footer .footer-main{grid-template-columns:1fr;gap:42px}
      .site-footer .footer-brand{grid-column:auto}
      .site-footer .footer-bottom{align-items:flex-start;flex-direction:column}
      .site-footer .footer-statement{font-size:clamp(2rem,10vw,3rem)}
    }

    @media  (prefers-reduced-motion:reduce){
      #contact, #contact *, #contact *::before, #contact *::after{scroll-behavior:auto!important;transition:none!important}
    }
  

/* === HTT V1 FIX PASS === */
/* Footer: desktop-only refinement. Keep responsive <=900px grid rules authoritative. */
@media (min-width:901px){
  .site-footer .footer-main{
    grid-template-columns:minmax(360px,1.35fr) minmax(150px,.45fr) minmax(250px,.70fr);
  }
}
.site-footer .footer-column-title{white-space:nowrap}
.site-footer .footer-logo{
  width:42px;
  height:50px;
  flex:0 0 auto;
  display:block;
}
.site-footer .footer-company-name,
.company-name{font-weight:800}
.site-footer .footer-company-name{line-height:1.25}
@media (max-width:900px){
  .site-footer .footer-column-title{white-space:normal}
}


/* === V3 SHARED SECTION LANGUAGE ===
   Contact is the visual-language reference for Sections 02–06.
   Layouts/components remain section-specific; headers, typography and color flow unify. */
:root{
  --thai:"IBM Plex Sans Thai",sans-serif;
  --section-ink:#fff8f0;
  --section-muted:rgba(255,248,240,.88);
}
html[lang="th"]{
  --display:var(--thai);
  --body:var(--thai);
  --mono:var(--thai);
}
html[lang="th"] body,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea,
html[lang="th"] #contact,
html[lang="th"] .site-footer{font-family:var(--thai)!important}
html[lang="th"] [class*="title"],
html[lang="th"] [class*="label"],
html[lang="th"] .kicker,
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3,
html[lang="th"] p,html[lang="th"] a,html[lang="th"] span{font-family:var(--thai)!important}

/* One header grammar, scaled per section rather than copied pixel-for-pixel. */
#about .kicker,#services .kicker,#workflow .kicker,#clients .kicker,#contact .kicker{
  margin:0 0 clamp(18px,1.7vw,28px);
  color:var(--section-ink);
  font:500 clamp(.72rem,.68vw,.82rem)/1 var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
}
#about .kicker::before,#services .kicker::before,#workflow .kicker::before,#clients .kicker::before,#contact .kicker::before{
  content:"";display:inline-block;width:28px;height:2px;margin-right:11px;
  vertical-align:middle;background:currentColor;
}
#about .section-title,#services .section-title,#workflow .section-title,#clients .section-title{
  margin:0;
  color:var(--section-ink);
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.05em;
  line-height:.98;
}
#about .lead,#services .lead,#workflow .lead,#clients .lead{
  margin:clamp(16px,1.5vw,24px) 0 0;
  max-width:66ch;
  color:var(--section-muted);
  font-family:var(--body);
  font-size:clamp(1rem,1.05vw,1.18rem);
  line-height:1.68;
}
#about .section-title{font-size:clamp(2.7rem,4.1vw,5.1rem)}
#services .section-title{font-size:clamp(3rem,4.4vw,5.45rem)}
#workflow .section-title{font-size:clamp(2.8rem,4vw,5rem)}
#clients .section-title{font-size:clamp(3rem,4.4vw,5.45rem)}

/* Header placement: shared rhythm, with section-specific width only where composition needs it. */
#about>.kicker,#about>.section-title,#about>.lead{width:min(1500px,calc(100% - 72px));margin-left:auto;margin-right:auto}
#about>.lead{margin-top:clamp(16px,1.5vw,24px);margin-bottom:clamp(30px,2.5vw,46px)}
#about .about-grid{margin-top:0}
#services .section-head{max-width:920px;margin-bottom:clamp(38px,3vw,66px)}
#workflow .head{width:min(100%,900px);max-width:900px;margin:0 auto clamp(34px,3vw,54px)}
#clients .client-header{width:min(100%,900px);max-width:900px}
#clients .header-text p{max-width:66ch}

/* Continuous warm journey: Home -> About -> Services -> Workflow -> Clients -> Contact.
   Deliberately no purple. Every boundary shares its neighboring endpoint. */
:root{
  --home-about-edge:#f2623e;
  --about-services-edge:#e4231c;
  --services-workflow-edge:#ffc93c;
  --workflow-clients-edge:#f4715f;
  --clients-contact-edge:#f68a52;
}
#about.about-section{
  background:linear-gradient(180deg,var(--home-about-edge) 0%,#ef5438 48%,var(--about-services-edge) 100%);
}
.services{
  background:
    radial-gradient(110% 82% at 18% 5%,rgba(255,112,70,.72) 0%,transparent 56%),
    linear-gradient(180deg,var(--about-services-edge) 0%,#f0491e 38%,#ff8a00 72%,var(--services-workflow-edge) 100%);
}
.workflow{
  --bg-a:var(--services-workflow-edge);--bg-b:#ffad58;--bg-c:#f68a52;--bg-d:#f4715f;--bg-e:var(--workflow-clients-edge);
  background:linear-gradient(180deg,var(--bg-a) 0%,var(--bg-b) 28%,var(--bg-c) 58%,var(--bg-d) 80%,var(--bg-e) 100%);
}
#clients.clients-section,html[data-theme="light"] #clients.clients-section{
  background:linear-gradient(180deg,var(--workflow-clients-edge) 0%,#f47b59 45%,var(--clients-contact-edge) 100%);
}
#contact{--contact-edge:var(--clients-contact-edge)}

html[data-theme="dark"]{
  --home-about-edge:#4b2318;--about-services-edge:#250909;--services-workflow-edge:#5a3510;
  --workflow-clients-edge:#582926;--clients-contact-edge:#633016;
}
html[data-theme="dark"] #about.about-section{background:linear-gradient(180deg,var(--home-about-edge) 0%,#3b1710 52%,var(--about-services-edge) 100%)}
html[data-theme="dark"] .services{background:linear-gradient(180deg,var(--about-services-edge) 0%,#3b1710 46%,var(--services-workflow-edge) 100%)}
html[data-theme="dark"] .workflow{background:linear-gradient(180deg,var(--services-workflow-edge) 0%,#4d2815 38%,#47202a 72%,var(--workflow-clients-edge) 100%)}
html[data-theme="dark"] #clients.clients-section{background:linear-gradient(180deg,var(--workflow-clients-edge) 0%,#5d2c23 52%,var(--clients-contact-edge) 100%)}
html[data-theme="dark"] #contact{--contact-edge:var(--clients-contact-edge)}

/* Text hierarchy follows Contact without flattening each component's identity. */
#about,#services,#workflow,#clients{font-family:var(--body)}
#about h1,#about h2,#about h3,#services h1,#services h2,#services h3,#workflow h1,#workflow h2,#workflow h3,#clients h1,#clients h2,#clients h3{font-family:var(--display)}
#about p,#services p,#workflow p,#clients p{line-height:1.6}

@media(max-width:760px){
  #about>.kicker,#about>.section-title,#about>.lead{width:100%}
  #about .section-title,#services .section-title,#workflow .section-title,#clients .section-title{font-size:clamp(2.55rem,12vw,4rem)}
  #about .kicker,#services .kicker,#workflow .kicker,#clients .kicker,#contact .kicker{letter-spacing:.13em}
}

/* === V3 HEADER PLACEMENT FIX 01 ===
   Keep the shared Contact-derived header language, but anchor each header
   to the section geometry it introduces instead of letting it float. */

/* One exact kicker scale for Sections 02–06, including Contact. */
#about .kicker,
#services .kicker,
#workflow .kicker,
#clients .kicker,
#contact .kicker{
  font-size:.78rem;
  line-height:1;
}

/* ABOUT — header belongs to the visual/card column. */
@media (min-width:761px){
  #about > .kicker,
  #about > .section-title,
  #about > .lead{
    width:min(92vw,2200px);
    margin-left:auto;
    margin-right:auto;
    padding-right:calc((min(92vw,2200px) + clamp(28px,2.2vw,56px)) / 2);
  }

  #about > .lead{
    margin-top:clamp(16px,1.5vw,24px);
    margin-bottom:clamp(30px,2.5vw,46px);
  }
}

/* WORKFLOW — header starts on, and is constrained to, the stage column. */
@media (min-width:981px){
  #workflow .head{
    width:min(760px, calc((min(1700px,78vw) - clamp(56px,4vw,96px) - min(560px,32vw))));
    max-width:900px;
    margin-left:calc((100% - min(1700px,78vw)) / 2);
    margin-right:0;
  }
}

/* Mobile/tablet return to the natural single-column header flow. */
@media (max-width:980px){
  #about > .kicker,
  #about > .section-title,
  #about > .lead{
    padding-right:0;
  }

  #workflow .head{
    width:min(100%,760px);
    margin-left:auto;
    margin-right:auto;
  }
}

/* === ABOUT HEADER SMASH FIX 02 ===
   The legacy About intro carried both max-width and left-padding rules.
   Combined with the V3 half-column padding, that collapsed the lead into
   a tiny strip on the right. Keep kicker/title/lead in one left column. */
@media (min-width:761px){
  #about > .kicker,
  #about > .section-title,
  #about > .lead{
    box-sizing:border-box;
    width:min(92vw,2200px);
    max-width:none;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:calc((min(92vw,2200px) + clamp(28px,2.2vw,56px)) / 2);
  }

  #about > .lead{
    max-width:none;
    margin-top:clamp(16px,1.5vw,24px);
    margin-bottom:clamp(30px,2.5vw,46px);
  }
}

@media (max-width:760px){
  #about > .kicker,
  #about > .section-title,
  #about > .lead{
    max-width:none;
    padding-left:0;
    padding-right:0;
  }
}

/*===PRIVACY SYSTEM V0.3===*/
/* Reuses the contained cc-* modal shell to avoid disturbing site-wide layout. */
.privacy-panel{
    width:min(760px,100%);
}
.privacy-document h2{
    margin:0 38px 10px 0;
    font-size:clamp(20px,3vw,28px);
}
.privacy-document h3{
    margin:22px 0 7px;
    font-size:15px;
}
.privacy-document p{
    margin:0 0 12px;
    color:var(--cc-muted);
    font-size:14px;
    line-height:1.65;
}
.privacy-document .privacy-status{
    padding:12px 14px;
    border:1px solid var(--cc-border);
    border-radius:10px;
    background:var(--cc-soft);
    color:var(--cc-text);
}
.privacy-storage-list{
    display:grid;
    gap:10px;
    margin:14px 0 20px;
}
.privacy-storage-list>div{
    display:grid;
    gap:5px;
    padding:12px 14px;
    border:1px solid var(--cc-border);
    border-radius:10px;
}
.privacy-storage-list strong{
    font-family:var(--mono);
    font-size:12px;
    overflow-wrap:anywhere;
}
.privacy-storage-list span{
    color:var(--cc-muted);
    font-size:13px;
    line-height:1.55;
}
.privacy-inline-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}
.privacy-close-actions{
    grid-template-columns:1fr;
    position:sticky;
    bottom:-22px;
    margin:20px -22px -22px;
    padding:14px 22px 22px;
    background:var(--cc-bg);
    border-top:1px solid var(--cc-border);
}
@media(max-width:560px){
    .privacy-panel{padding:18px;}
    .privacy-close-actions{margin:18px -18px -18px;padding:12px 18px 18px;}
}

/* === DEBUG #2: LANDSCAPE-PHONE CLASSIFICATION FIX ===
   High-DPI phones can expose >980 CSS px in landscape and accidentally enter
   desktop rules.  Classify touch/coarse-pointer, wide-but-short viewports as
   landscape phones without changing validated portrait/tablet/desktop layouts. */
@media (orientation: landscape)
       and (hover: none)
       and (pointer: coarse)
       and (max-height: 650px)
       and (max-width: 1400px) {
  /* Header: use the compact/mobile navigation instead of squeezing desktop nav. */
  #site-header {
    padding: 12px 0;
  }
  #site-header.scrolled {
    padding: 10px 0;
  }
  #site-header .wrap {
    padding-left: clamp(16px, 3vw, 28px);
    padding-right: clamp(16px, 3vw, 28px);
  }
  #site-header .brand {
    gap: 9px;
    font-size: clamp(17px, 2.2vw, 21px);
  }
  #site-header .brand .hex-mark {
    width: clamp(34px, 5.2vh, 40px);
    height: clamp(34px, 5.2vh, 40px);
  }
  #site-header .navlinks {
    display: none;
    position: fixed;
    top: 58px;
    right: 16px;
    left: 16px;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow);
    gap: 12px;
  }
  #site-header .navlinks.mobile-open {
    display: flex;
  }
  #site-header .navlinks a,
  #site-header .navlinks a.active {
    color: var(--ink);
  }
  #site-header .menu-btn {
    display: block;
  }
  #site-header .nav-cta {
    gap: clamp(8px, 1.8vw, 14px);
  }

  /* Home: preserve the artwork's 16:9 composition, but make the section fit
     the short phone viewport instead of behaving like a tall desktop hero. */
  .home {
    aspect-ratio: auto;
    height: 100svh;
    min-height: 100svh;
  }

  /* Workflow: cancel the desktop two-column classifier for short landscape
     phones.  A vertical flow is much easier to use with limited height. */
  .workflow {
    aspect-ratio: auto;
    min-height: auto;
    overflow: hidden;
    padding: 36px 20px 48px;
  }
  .workflow .head {
    width: min(88vw, 620px);
    max-width: 620px;
    margin: 0 auto 22px;
  }
  .workflow .stage-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    gap: 24px;
    align-items: center;
  }
  .workflow .stage,
  .workflow .panel {
    width: min(78vh, 72vw, 560px);
    max-width: 560px;
  }
  .workflow .stage {
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
  }
  .workflow .panel {
    position: static;
    min-height: 0;
    align-self: center;
  }

  /* About: avoid desktop side-by-side compression in a short phone viewport. */
  #about.about-section {
    padding: 36px 20px 48px;
    min-height: auto;
  }
  #about .about-grid {
    grid-template-columns: 1fr;
    width: min(88vw, 760px);
    gap: 24px;
  }
  #about .about-panel {
    order: 1;
    min-height: 0;
  }
  #about .about-visual {
    order: 2;
    min-height: min(72vw, 430px);
  }
  #about .about-section-title,
  #about .about-section-subtext {
    width: min(88vw, 760px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* === DEBUG #2B: LANDSCAPE-PHONE — ALL SECTIONS ===
   Extends the validated Home landscape-phone classifier across the remaining
   sections. Width alone must not make a short touch viewport behave like a
   desktop. Portrait/tablet/desktop rules remain unchanged. */
@media (orientation: landscape)
       and (hover: none)
       and (pointer: coarse)
       and (max-height: 650px)
       and (max-width: 1400px) {

  /* Services: use the tablet two-card rhythm rather than four compressed
     desktop cards. Allow the section to grow vertically and scroll naturally. */
  .services {
    min-height: auto;
    padding: 40px 0 52px;
  }
  .services > .wrap,
  .services .wrap {
    width: min(100% - 40px, 980px);
  }
  .services .section-head {
    max-width: 680px;
    margin-bottom: 30px;
  }
  .services .section-head h2 {
    font-size: clamp(34px, 5.8vw, 52px);
  }
  .services .section-head p {
    font-size: clamp(15px, 2.1vw, 18px);
  }
  .services .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .services .service-card {
    height: clamp(170px, 30vh, 210px);
  }
  .services .service-face {
    padding: 18px;
  }
  .services .svc-icon {
    width: clamp(54px, 10vh, 76px);
    height: clamp(54px, 10vh, 76px);
  }

  /* Clients: a phone in landscape gets the validated two-card carousel rather
     than the desktop three-card row. */
  #clients .clients-ui {
    padding: 40px 0 52px;
  }
  #clients .wrap {
    width: min(100% - 32px, 920px);
  }
  #clients .client-header {
    margin-bottom: 26px;
  }
  #clients .track {
    gap: 18px;
  }
  #clients .card {
    flex: 0 0 calc((100% - 18px) / 2);
    min-width: 0;
  }
  #clients .arrow {
    width: 40px;
    height: 40px;
  }

  /* Contact: force the tablet/mobile single-column composition. A landscape
     phone has desktop-like width but nowhere near desktop vertical room. */
  #contact {
    min-height: auto;
    overflow: hidden;
    padding: 42px 24px 54px;
  }
  #contact .shell {
    width: min(100%, 920px);
  }
  #contact .topline {
    margin-bottom: 30px;
  }
  #contact .hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  #contact .intro {
    min-height: auto;
    padding: 0;
  }
  #contact h1 {
    max-width: 760px;
    font-size: clamp(3rem, 8vw, 5rem);
  }
  #contact .lead {
    margin-top: 20px;
  }
  #contact .direct {
    margin-top: 30px;
    padding-top: 0;
  }
  #contact .contact-meta {
    grid-template-columns: 1fr;
  }
  #contact .destination {
    display: none;
  }
  #contact .form-card {
    padding: 30px;
    border-radius: 26px;
  }

  /* Footer: use the tablet composition instead of squeezing all desktop
     columns into the short landscape phone viewport. */
  .site-footer .footer-shell {
    width: min(100% - 48px, 920px);
    padding-top: 52px;
  }
  .site-footer .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .site-footer .footer-brand {
    grid-column: 1 / -1;
  }
  .site-footer .footer-statement {
    font-size: clamp(2rem, 5.5vw, 3.25rem);
  }

  /* Privacy/legal modal: keep controls reachable on a short viewport. */
  .cc-modal,
  .privacy-panel {
    max-height: calc(100svh - 24px);
    overflow-y: auto;
  }
}

/* === PP3: RESPONSIVE DEFENSE LAYER ===
   Device-agnostic safeguards. Adapt to available space rather than model names.
   This layer intentionally stays CSS-only and sits after the existing rules. */

/* Modern dynamic viewport units: follow mobile browser chrome without forcing
   older browsers to understand dvh. */
@supports (height: 100dvh) {
  .home {
    height: 100dvh;
    min-height: 100dvh;
  }

  @media (orientation: landscape)
         and (hover: none)
         and (pointer: coarse)
         and (max-height: 650px)
         and (max-width: 1400px) {
    .home {
      height: 100dvh;
      min-height: 100dvh;
    }
    .cc-modal,
    .privacy-panel {
      max-height: calc(100dvh - 24px);
    }
  }
}

/* Global overflow resilience: long translations, URLs and unexpected content
   should wrap instead of widening the document. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

p,
li,
blockquote,
.about-section,
.service-card,
.form-card,
.privacy-panel,
.cc-modal {
  overflow-wrap: anywhere;
}

/* Very narrow phones / accessibility scaling. Keep tap targets and content
   inside the viewport without changing the site's normal layout. */
@media (max-width: 380px) {
  #site-header .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
  #site-header .brand {
    font-size: clamp(15px, 4.6vw, 18px);
  }
  #site-header .nav-cta {
    gap: 6px;
  }
  .services > .wrap,
  .services .wrap,
  #clients .wrap,
  .site-footer .footer-shell {
    width: calc(100% - 24px);
  }
  #contact {
    padding-left: 14px;
    padding-right: 14px;
  }
  #contact .form-card {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Extreme short landscape phones: tighten only spacing/typography. The main
   landscape-phone classifier above remains responsible for structure. */
@media (orientation: landscape)
       and (hover: none)
       and (pointer: coarse)
       and (max-height: 480px) {
  #site-header {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #site-header.scrolled {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  #site-header .navlinks {
    top: 52px;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
  }
  .workflow,
  #about.about-section,
  .services,
  #clients .clients-ui,
  #contact {
    padding-top: 28px;
    padding-bottom: 36px;
  }
  #contact h1 {
    font-size: clamp(2.5rem, 8vw, 4.25rem);
  }
  #contact .form-card {
    padding: 24px;
  }
  .site-footer .footer-shell {
    padding-top: 38px;
  }
}

/* Reduced-motion is part of graceful degradation: preserve the interface when
   the visitor asks the OS/browser to minimize animation. */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === PP8 CENTRALIZED REAL-PHONE RESPONSIVE LAYER ===
   Cleaned from the validated PP7 baseline. Header/footer cascade conflicts are
   fixed at their source, so this layer contains only behavior still required:
   narrow-phone resilience and short-landscape composition. */

/* Let the brand survive narrow phones and enlarged text without escaping. */
.site-footer .footer-mark {
  max-width: 100%;
}
.site-footer .footer-company-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .site-footer .footer-column-title {
    margin-bottom: 14px;
  }
  .site-footer .footer-links {
    gap: 11px;
  }
  .site-footer .footer-mark {
    align-items: center;
    width: 100%;
  }
  .site-footer .footer-company-name {
    font-size: clamp(.98rem, 4.9vw, 1.25rem);
    line-height: 1.15;
  }
  .site-footer .footer-bottom-group {
    row-gap: 10px;
  }
}

/* Short touch landscape: content first. The About animation remains intact,
   but its stage no longer consumes a desktop-sized vertical footprint. */
@media (orientation: landscape)
       and (hover: none)
       and (pointer: coarse)
       and (max-height: 650px)
       and (max-width: 1400px) {
  #about.about-section {
    justify-content: flex-start;
    padding-top: clamp(24px, 5vh, 34px);
    padding-bottom: 42px;
  }
  #about > .kicker,
  #about > .section-title,
  #about > .lead,
  #about .about-section-title,
  #about .about-section-subtext,
  #about .about-grid {
    width: min(92vw, 900px);
  }
  #about > .lead {
    margin-bottom: 22px;
  }
  #about .about-grid {
    gap: 18px;
  }
  #about .about-panel {
    min-height: 0;
  }
  #about .about-description {
    min-height: 0;
  }
  #about .about-visual {
    min-height: clamp(190px, 52vh, 300px);
    max-height: 300px;
  }
  #about .about-visual-card,
  #about .about-stage,
  #about .skeleton-stage,
  #about .mission-stage,
  #about .vision-stage {
    max-height: 300px;
  }

  .site-footer .footer-main {
    align-items: start;
  }
  .site-footer .footer-main > nav {
    align-self: start;
  }
}

/* === PP8 CLEAN BASELINE ===
   Root-cause fixes retained from validated PP7:
   - header navigation is scoped to #site-header nav
   - footer desktop refinement applies only at >=901px
   - responsive footer breakpoints win through the normal cascade
   - no footer !important armor is required
   PP7 remains the rollback/control reference. */