/* FLOW identity layer: muted corporate blue and technical grey on white (about 70% white/grey, 30% blue),
   flowing brand ribbons as structure, Montserrat for headings. A muted touch of the Flow Aqua logo red marks labels. */
:root{
  --bg:#FFFFFF; --paper:#F3F4F6; --foot:#EDEFF2;
  --ink:#1F2731; --ink-2:#5B6370; --line:#E1E4E9;
  --blue:#2F5F92; --blue-deep:#22466C; --blue-soft:#E4EAF1; --blue-mid:#8FA6BF;
  --grey:#A6A6A6; --grey-soft:#D6D8DB; --grey-ink:#767B83;
  --accent:#A24A50; --accent-soft:#EFE2E3;
  --shadow:rgba(31,39,49,.26);
  /* legacy names used by the base styles */
  --red:var(--blue); --red-2:var(--blue-mid); --red-pale:#D3DCE6;
  --blush:var(--paper); --blush-2:#E7EAEE; --sky:#EEF1F5; --sky-2:#DCE3EB; --sky-3:#A9B8C9;
  --mint:var(--paper); --mint-2:var(--grey-soft); --mint-ink:var(--blue); --butter:var(--paper); --lilac:var(--paper);
  --f-display:'Montserrat','Segoe UI',system-ui,sans-serif;
  --f-body:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --r:18px;
}
body{background:var(--bg);color:var(--ink);font-size:17px}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:700;line-height:1.04}
h2{font-size:clamp(1.9rem,3.8vw,3rem);font-weight:700;line-height:1.08}
h3{font-weight:600}
h1 em,h2 em{font-style:italic;font-weight:300;color:var(--blue)}
.kicker{font:500 .74rem var(--f-mono);letter-spacing:.16em;color:var(--grey-ink)}
.kicker::before{width:26px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'%3E%3Cpath d='M0 5q3.5-5 7 0t7 0 7 0 7 0' fill='none' stroke='%23A24A50' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/contain}
.lede{color:var(--ink-2)}
:focus-visible{outline-color:var(--blue)}
.link-arrow{font:600 .95rem var(--f-display);color:var(--blue);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.link-arrow span{transition:transform .2s}.link-arrow:hover span{transform:translateX(4px)}

/* Buttons: blue is the call to action */
.btn{font:600 .92rem/1 var(--f-display);border-radius:999px}
.btn-red{background:var(--blue);color:#FFFFFF;box-shadow:0 14px 26px -18px var(--blue-deep)}
.btn-red:hover{background:var(--blue-deep)}
.btn-line{background:#FFFFFF;border-color:var(--grey-soft);color:var(--ink)}
.btn-line:hover{border-color:var(--blue)}
.btn-wa{background:#2E8B57;color:#FFFFFF}

/* Notice */
.notice{background:var(--blue-deep);background-image:none;animation:none;color:#FFFFFF}
.notice .pulse{background:#FFFFFF}
.notice a{color:#FFFFFF}
.notice .nx{border-color:rgba(255,255,255,.4);color:#FFFFFF}

/* Header */
header.top{background:rgba(255,255,255,.92)}
header.top.scrolled{box-shadow:0 10px 30px -24px var(--shadow)}
.progress{background:linear-gradient(90deg,var(--grey),var(--blue))}
.brand span{border-left-color:var(--grey-soft);color:var(--grey-ink)}
nav.main a{color:var(--ink-2)}
nav.main a:hover,nav.main a.on{color:var(--blue);background:var(--blue-soft)}
.menu-btn{border-color:var(--grey-soft)}.menu-btn span{background:var(--blue)}
.mobile-nav a:hover,.mobile-nav a.on{color:var(--blue)}

/* Page opener, same on every page */
.ihero{background:linear-gradient(180deg,#FFFFFF 0%,#F8F9FA 100%);padding-block:44px 0}
.ihero-grid{padding-bottom:8px}
.ihero h1{font-size:clamp(2.3rem,5vw,4.2rem)}
.ihero.is-home h1{font-size:clamp(2.6rem,6vw,4.8rem)}
.ihero-media{position:relative}
.ihero-media .frame{border-radius:28px;background:radial-gradient(80% 80% at 30% 25%,#FFFFFF,var(--paper));box-shadow:0 40px 70px -46px var(--shadow);border:1px solid var(--line);animation:pop .8s .1s cubic-bezier(.2,.8,.2,1.1) both}
.ihero-media .frame svg{background:none}
.ihero-code{color:var(--grey-soft);z-index:0}
.swoosh{position:absolute;left:-12%;right:-10%;bottom:-16%;width:122%;height:auto;z-index:0;overflow:visible;pointer-events:none}
.swoosh path{fill:none;stroke-width:16;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.8s .3s cubic-bezier(.3,.7,.2,1) forwards}
.sw-grey{stroke:var(--grey);opacity:.55}
.sw-blue{stroke:var(--blue);animation-delay:.5s!important}
@keyframes draw{to{stroke-dashoffset:0}}
.ihero-media .frame{position:relative;z-index:1}
.is-home .frame{aspect-ratio:5/4}
.is-home .frame .render{position:absolute;inset:10% 4% 12% 4%;width:92%;height:78%}
.is-home .frame .float{position:absolute;filter:drop-shadow(0 14px 14px rgba(31,39,49,.12))}
.is-home .frame .f1{width:38%;right:-2%;top:2%;animation:bob 7s ease-in-out infinite}
.is-home .frame .f2{width:26%;left:2%;bottom:4%;animation:bob 8s ease-in-out -3s infinite}
.is-home .badge{position:absolute;right:16px;bottom:16px;background:#FFFFFF;border-radius:14px;padding:10px 14px;display:grid;gap:2px;box-shadow:0 16px 34px -24px var(--shadow)}
.is-home .badge b{font:700 1.2rem var(--f-display);color:var(--blue)}
.is-home .badge span{font:500 .7rem var(--f-mono);color:var(--grey-ink)}
.crumbs [aria-current],.crumbs a:hover{color:var(--blue)}

/* Brand ribbon */
.ribbon{display:block;width:100%;height:clamp(56px,8vw,120px);margin-top:-2px;overflow:hidden}
.ribbon .rb-next{fill:var(--next)}
.ribbon .rb-grey{fill:var(--grey);opacity:.5}
.ribbon .rb-blue{fill:var(--blue)}
@media (prefers-reduced-motion:no-preference){.ribbon .rb-drift{animation:rbDrift 12s ease-in-out infinite alternate}}
@keyframes rbDrift{to{transform:translateX(-30px)}}

/* Chapters */
.chapter{padding-block:96px;position:relative}
.tone-paper{background:var(--paper)}
.stats{background:var(--paper);padding-block:8px 0}
.stat-row{gap:14px}
.stat{background:#FFFFFF;border:1px solid var(--line);box-shadow:none}
.stat b{color:var(--blue);font-family:var(--f-display);font-weight:700}
.stat span{color:var(--ink-2)}
.stats + .chapter{padding-top:72px}
.head-link{justify-self:end;align-self:end}
@media (max-width:820px){.head-link{justify-self:start}}

/* Chapter rail (desktop) */
.chapter-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:12px}
.chapter-rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;text-decoration:none}
.chapter-rail a i{width:10px;height:10px;border-radius:50%;border:2px solid var(--grey);background:#FFFFFF;transition:all .25s}
.chapter-rail a span{font:500 .7rem var(--f-mono);letter-spacing:.06em;color:var(--ink-2);background:#FFFFFF;border-radius:999px;padding:4px 10px;box-shadow:0 8px 20px -14px var(--shadow);opacity:0;transform:translateX(6px);transition:all .25s}
.chapter-rail a:hover span,.chapter-rail a.on span{opacity:1;transform:none}
.chapter-rail a.on i{background:var(--blue);border-color:var(--blue);transform:scale(1.25)}
@media (max-width:1279px){.chapter-rail{display:none}}

/* Who we are */
.about{align-items:center}
.collage figure{box-shadow:0 30px 60px -40px var(--shadow);border-color:#FFFFFF}
.about-copy{gap:18px}
.mission{background:#FFFFFF;border:1px solid var(--line);border-left:3px solid var(--blue);font-family:var(--f-display);font-weight:500}
.mission::after{border-color:var(--blue-soft)}

/* How we work */
.process{background:var(--bg)}
.flowline .bg{stroke:var(--grey-soft)}
.flowline .fg{stroke:var(--blue)}
.dot{border-color:var(--blue);color:var(--blue);box-shadow:none}
.step.lit .dot{background:var(--blue);color:#FFFFFF}
.step{padding-top:92px}
.step h3{font-size:1.02rem}

/* What we treat */
.sol-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sol-tile{position:relative;display:grid;gap:8px;align-content:start;min-height:170px;padding:22px 22px 52px;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.sol-tile:hover{transform:translateY(-4px);border-color:var(--blue-mid);box-shadow:0 24px 40px -32px var(--shadow)}
.sol-tile .code{font:700 2.4rem/1 var(--f-display);color:var(--grey-soft);letter-spacing:-.03em;transition:color .3s}
.sol-tile:hover .code{color:var(--blue-mid)}
.sol-tile h3{font-size:1.12rem}
.sol-tile .techs{font:500 .74rem var(--f-mono);color:var(--grey-ink)}
.sol-tile .more{position:absolute;left:22px;bottom:18px;color:var(--blue);font-weight:700;transition:transform .2s}
.sol-tile:hover .more{transform:translateX(5px)}
.sol-tile:first-child{grid-column:span 2;background:var(--blue);border-color:var(--blue);color:#FFFFFF}
.sol-tile:first-child .code{color:rgba(255,255,255,.35)}
.sol-tile:first-child .techs{color:#D6E0EC}
.sol-tile:first-child .more{color:#FFFFFF}
@media (max-width:1000px){.sol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.sol-grid{grid-template-columns:1fr}.sol-tile:first-child{grid-column:auto}}

/* What we supply */
#products{background:var(--paper)}
.fbtn{border-color:var(--line);color:var(--ink-2)}
.fbtn[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#FFFFFF}
.arrow{border-color:var(--grey-soft);color:var(--blue)}
.arrow:hover{background:var(--blue);border-color:var(--blue);color:#FFFFFF}
.pcard{border-color:var(--line)}
.pcard:hover{box-shadow:0 28px 46px -34px var(--shadow)}
.pimg{background:var(--paper)}
.pimg .cat{color:var(--blue)}
.pbody .more,.link-card .more{color:var(--blue)}
.rail{scrollbar-color:var(--grey-soft) transparent}
.link-card{color:inherit}

/* Where we have built */
.proj-story{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.ps-copy{display:grid;gap:20px;justify-items:start}
.chart{border:1px solid var(--line);box-shadow:0 30px 60px -56px var(--shadow)}
.track2{background:var(--paper)}
.fill.ww{background:linear-gradient(90deg,#C9A2A5,var(--accent))}
.fill.wt{background:linear-gradient(90deg,var(--blue-mid),var(--blue))}
.legend i.lg-ww{background:var(--accent)}.legend i.lg-wt{background:var(--blue)}
@media (max-width:960px){.proj-story{grid-template-columns:1fr}}

/* Follow the flow: connected social grid */
.social-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.social-copy{display:grid;gap:20px;align-content:start;min-width:0}
.wall{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:620px;width:100%;justify-self:end}
.tile{position:relative;aspect-ratio:1/1;max-width:100%;border-radius:12px;overflow:hidden;display:grid;place-content:center;text-decoration:none}
.t-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.03);transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s}
.t-photo span{position:absolute;left:8px;right:8px;bottom:8px;font:600 .72rem/1.3 var(--f-display);color:#FFFFFF;background:rgba(31,39,49,.62);padding:6px 8px;border-radius:8px;opacity:0;transform:translateY(6px);transition:all .3s}
.t-photo:hover img{transform:scale(1.06);filter:saturate(1)}
.t-photo:hover span,.t-photo:focus-visible span{opacity:1;transform:none}
.t-text{background:var(--blue);color:#FFFFFF;text-align:center;padding:12px;gap:4px}
.t-text b{font:700 clamp(1.8rem,3.6vw,2.6rem)/1 var(--f-display)}
.t-text span{font:500 .72rem/1.3 var(--f-mono);color:#D6E0EC}
.t-brand{background:#FFFFFF;border:1px solid var(--line)}
.t-brand img{height:auto!important;width:76%!important;margin:auto}
.wall-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wall-wave path{fill:none;stroke-width:12px;vector-effect:non-scaling-stroke;stroke-linecap:round;mix-blend-mode:multiply}
.ww-grey{stroke:var(--grey);opacity:.75}
.ww-blue{stroke:var(--blue);opacity:.85}
@media (max-width:900px){.social-in{grid-template-columns:1fr;gap:32px}.wall{justify-self:stretch;max-width:none}}
.follow{display:flex;flex-wrap:wrap;gap:8px}
.follow a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--blue);color:#FFFFFF;text-decoration:none;font:600 .85rem var(--f-display)}
.follow a:hover{background:var(--blue-deep)}
.site-foot .follow a{background:#FFFFFF;color:var(--blue);border:1px solid var(--line)}
.site-foot .follow span{display:none}
.site-foot .follow a{padding:9px}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.share-label{font:500 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-ink);margin-right:4px}
.share a,.share button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:#FFFFFF;color:var(--blue);cursor:pointer;transition:all .2s;padding:0}
.share a:hover,.share button:hover{background:var(--blue);color:#FFFFFF;border-color:var(--blue)}
.share button.done{background:#2E8B57;color:#FFFFFF;border-color:#2E8B57}

/* Start a project and every page's closing band */
.start{padding-top:24px}
.start-in,.cta-in{background:var(--blue-deep);color:#FFFFFF;border-radius:28px;padding:48px clamp(24px,5vw,56px);display:grid;grid-template-columns:1.3fr auto;gap:28px;align-items:center;position:relative;overflow:hidden;isolation:isolate}
.start-in::after,.cta-in::after{content:"";position:absolute;inset:auto -10% -60% -10%;height:140%;z-index:-1;border:0;border-radius:0;animation:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 200 C 300 80 600 80 900 170 S 1200 220 1260 150' fill='none' stroke='%23A6A6A6' stroke-opacity='.45' stroke-width='22'/%3E%3Cpath d='M0 236 C 300 116 600 116 900 206 S 1200 256 1260 186' fill='none' stroke='%234C7AAE' stroke-width='22'/%3E%3C/svg%3E") no-repeat bottom/100% 60%}
.start-in h2,.cta-in h2{color:#FFFFFF}
.start-in h2 em,.cta-in h2 em{color:#C7D5E5}
.start-in p,.cta-in p{color:#D6E0EC;margin-top:12px;max-width:56ch}
.start-in .kicker,.cta-in .kicker{color:#C7D5E5;margin-bottom:12px}
.start-in .btn-red,.cta-white{background:#FFFFFF;color:var(--blue-deep)}
.start-in .btn-red:hover,.cta-white:hover{background:var(--blue-soft)}
.cta-band{padding-block:24px 96px}
@media (max-width:820px){.start-in,.cta-in{grid-template-columns:1fr}}

/* Footer */
.site-foot,footer{background:var(--foot)}
.fgrid h4{color:var(--grey-ink)}
.fgrid a:hover{color:var(--blue)}
.foot-nav li{display:grid;gap:7px}
.fbase{border-top-color:var(--grey-soft)}

/* Inner pages */
.range-list li{border-color:var(--line)}
.range-list li:hover{border-color:var(--blue-mid)}
.range-list .mono{color:var(--blue)}
.gallery-sec{background:var(--paper)}
.gal-group{color:var(--grey-ink)}
.gal-group::after{background:var(--grey-soft)}
.gal-item{border-color:var(--line)}
.gal-item:hover,.sol-card:hover,.proj-card:hover,.svc:hover,.card:hover{box-shadow:0 26px 46px -38px var(--shadow)}
.fact{background:var(--blue);color:#FFFFFF}
.fact b{color:#FFFFFF}
.fact span{color:#D6E0EC}
.sd-tech{border-color:var(--line)}
.sd-nav{background:var(--paper)}
.sd-nav a i{color:var(--blue)}
.sd-nav a.on{color:var(--blue)}
.sd-card{border-color:var(--line)}
.sd-card .num{color:var(--grey-ink)}
.ticks li{background:var(--paper)}
.ticks li::before{background:var(--blue)}
.chip{border-color:var(--grey-soft);color:var(--blue);background:#FFFFFF}
.svc{background:#FFFFFF;border-color:var(--line)}
.svc .dot{border-color:var(--blue);color:var(--blue)}
.svc:hover .dot{background:var(--blue);color:#FFFFFF}
.related-sec{background:var(--bg)}
.pc-img{background:var(--paper)}
.pc-img .cat{color:var(--blue)}
.pc-body .cap{color:var(--blue)}
.proj-card:target{outline-color:var(--blue)}
.card .role{color:var(--grey-ink)}
.copy{background:var(--paper);color:var(--blue)}
.formcard{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.formcard .role{color:var(--accent)}
.formcard p.sub,.formcard form label{color:var(--ink-2)}
.formcard form input,.formcard form select,.formcard form textarea{border:1px solid var(--line)}
.formcard form .btn{background:var(--blue);color:#FFFFFF}
.formcard .err{background:var(--accent-soft);color:var(--accent)}
.lb-nav,.skip{color:var(--blue)}
.entry-content a{color:var(--blue)}
.pagination .current{background:var(--blue);border-color:var(--blue)}

/* Milestones */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.timeline::before{content:"";position:absolute;left:84px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--grey-soft),var(--blue))}
.timeline li{display:grid;grid-template-columns:84px 1fr;gap:34px;padding:18px 0;position:relative}
.timeline li::before{content:"";position:absolute;left:78px;top:26px;width:14px;height:14px;border-radius:50%;background:#FFFFFF;border:3px solid var(--blue)}
.timeline .yr{font:700 1.15rem var(--f-display);color:var(--blue);padding-top:2px}
.timeline h3{font-size:1.2rem;margin-bottom:4px}
.timeline p{color:var(--ink-2);max-width:62ch}
@media (max-width:520px){.timeline::before{left:60px}.timeline li{grid-template-columns:60px 1fr;gap:26px}.timeline li::before{left:54px}}

/* Reference list */
.ref-summary{padding-bottom:40px}
.ref-cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ref-cat{display:grid;gap:4px;padding:18px 18px 20px;border-radius:16px;text-decoration:none;color:var(--ink);background:#FFFFFF;border:1px solid var(--line);transition:transform .25s,box-shadow .25s,border-color .25s}
.ref-cat:hover{transform:translateY(-4px);border-color:var(--blue-mid);box-shadow:0 20px 36px -30px var(--shadow)}
.ref-cat b{font:700 2.1rem/1 var(--f-display);color:var(--blue)}
.ref-cat span{font-size:.88rem;color:var(--ink-2);line-height:1.3}
@media (max-width:1000px){.ref-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.ref-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ref-sec{background:var(--paper)}
.ref-filters{margin-bottom:18px}
.ref-table-wrap{background:#FFFFFF;border:1px solid var(--line);border-radius:20px;overflow-x:auto}
.ref-table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:820px}
.ref-table th{font:500 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-ink);text-align:left;padding:14px 16px;background:#F8F9FA}
.ref-table td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:top}
.ref-table tbody tr:hover{background:#FAFBFC}
.ref-table .num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ref-table .scope{color:var(--ink-2);font-size:.88rem}
.ref-table b{font-weight:600}
.dot-cat{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:10px;vertical-align:1px;background:var(--blue)}
.dot-cat.c-ww,.dot-cat.c-stp{background:var(--accent)}
.dot-cat.c-dis,.dot-cat.c-eq{background:var(--grey)}
.ongoing{font:500 .72rem var(--f-mono);background:var(--blue-soft);color:var(--blue);padding:4px 9px;border-radius:999px;white-space:nowrap}
.show-all{margin:18px auto 0;display:flex}
@media (max-width:720px){
  .ref-table-wrap{background:transparent;border:0;overflow:visible}
  .ref-table{min-width:0}
  .ref-table thead{display:none}
  .ref-table,.ref-table tbody,.ref-table tr,.ref-table td{display:block;width:100%}
  .ref-table tr{background:#FFFFFF;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
  .ref-table td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .ref-table td::before{content:attr(data-label);font:500 .68rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-ink);text-align:left;flex:none}
  .ref-table td:first-child{display:block;text-align:left;font-size:1rem;padding-bottom:6px}
  .ref-table td:first-child::before{content:none}
}
@media (max-width:600px){.chapter{padding-block:72px}}
.proj-story{align-items:start}
.ps-copy{position:sticky;top:120px}
@media (max-width:960px){.ps-copy{position:static}}
@media (max-width:600px){
  .sol-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sol-tile{min-height:0;padding:16px 16px 40px}
  .sol-tile:first-child{grid-column:span 2}
  .sol-tile .code{font-size:1.6rem}
  .sol-tile h3{font-size:1rem}
  .sol-tile .techs{display:none}
  .sol-tile:first-child .techs{display:block}
  .sol-tile .more{left:16px;bottom:12px}
}
/* Product cards list the full range (no separate product pages) */
div.pcard{cursor:default}
div.pcard:hover{transform:none}
.range-chips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.range-chips li{font:500 .74rem/1.3 var(--f-mono);color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 9px}
.rail{grid-auto-columns:clamp(270px,30vw,360px)}
.wall-wave{overflow:hidden;border-radius:12px}
/* Header: keep everything on one line with the site's own WordPress menu */
.head{gap:18px}
.brand span{white-space:nowrap}
nav.main{gap:2px}
nav.main a{white-space:nowrap;padding:9px 11px;font-size:.9rem}
.head .btn{white-space:nowrap;padding:11px 16px}
@media (max-width:1440px){.brand span{display:none}}
@media (max-width:1280px){.head .btn-wa{display:none}}
@media (max-width:1180px){nav.main{display:none}.menu-btn{display:inline-flex;margin-left:12px}.head .btn-red{margin-left:auto}}
@media (min-width:1181px){.mobile-nav{display:none!important}}

/* Home opener photo */
.is-home .frame{background:var(--paper)}
.is-home .frame .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.is-home .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(31,39,49,.28));pointer-events:none}
.is-home .badge{z-index:2}
/* How we work: stage names sit below the wave so the circles never cover them */
@media (min-width:1001px){
  .flowline .steps .step{padding-top:156px}
  .flowline .steps .step h3{position:relative;z-index:2;font-size:1.05rem;line-height:1.3;padding-top:12px;border-top:2px solid var(--blue-soft);max-width:16ch}
  .flowline .steps .step.lit h3{border-top-color:var(--blue)}
}
.flowline .step h3{color:var(--ink);font-weight:600}

/* ===== Simple edition ===== */
.sec-title{display:grid;gap:14px;justify-items:center;text-align:center;max-width:720px;margin:0 auto 44px}
.sec-title .lede{margin:0 auto}
.rv.in{animation:rise .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{transform:translateY(26px);opacity:.2}}

/* Opening photo: slow zoom */
.is-home .frame .hero-photo{animation:kenburns 22s ease-in-out infinite alternate;transform-origin:60% 55%}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}

/* Solutions as photo tiles */
.sol-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sol-photo{position:relative;display:block;aspect-ratio:4/5;max-width:100%;border-radius:20px;overflow:hidden;text-decoration:none;color:#FFFFFF;background:var(--blue-deep);isolation:isolate;box-shadow:0 24px 44px -34px var(--shadow)}
.sol-photo:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.sol-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s;filter:saturate(.95)}
.sol-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,32,48,0) 35%,rgba(20,32,48,.82) 100%);transition:background .4s}
.sol-photo:hover img,.sol-photo:focus-visible img{transform:scale(1.08);filter:saturate(1.1)}
.sol-photo:hover::after{background:linear-gradient(180deg,rgba(34,70,108,.15) 0%,rgba(34,70,108,.9) 100%)}
.sp-body{position:absolute;left:0;right:0;bottom:0;padding:20px;display:grid;gap:6px}
.sp-code{font:600 .72rem var(--f-mono);letter-spacing:.14em;color:#C7D5E5}
.sp-body b{font:700 1.25rem/1.2 var(--f-display)}
.sol-photo:first-child .sp-body b{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.sp-more{font:600 .85rem var(--f-display);display:inline-flex;gap:6px;align-items:center;opacity:.85;transform:translateY(4px);transition:all .3s}
.sol-photo:hover .sp-more{opacity:1;transform:none}
.sp-more span{transition:transform .25s}.sol-photo:hover .sp-more span{transform:translateX(4px)}
@media (max-width:1000px){.sol-photos{grid-template-columns:repeat(2,minmax(0,1fr))}.sol-photo:first-child{grid-row:auto;aspect-ratio:16/10}}
@media (max-width:520px){.sol-photos{grid-template-columns:1fr}.sol-photo,.sol-photo:first-child{grid-column:auto;aspect-ratio:16/11}}

/* How we work: short description under each stage */
.step p{font-size:.9rem;color:var(--ink-2);margin-top:6px;max-width:22ch;line-height:1.45}
@media (max-width:1000px){.step p{max-width:none}}

/* Project mosaic */
.proj-mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:220px;gap:14px}
.pm-item{position:relative;border:0;padding:0;margin:0;border-radius:18px;overflow:hidden;cursor:zoom-in;background:var(--blue-soft);box-shadow:0 22px 40px -34px var(--shadow)}
.pm-item:nth-child(1){grid-column:span 2;grid-row:span 2}
.pm-item:nth-child(4){grid-row:span 2}
.pm-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pm-item:hover img,.pm-item:focus-visible img{transform:scale(1.07)}
.pm-cap{position:absolute;left:12px;right:12px;bottom:12px;display:grid;gap:2px;text-align:left;background:rgba(255,255,255,.94);border-radius:12px;padding:10px 12px;transform:translateY(8px);opacity:.92;transition:all .35s}
.pm-item:hover .pm-cap{transform:none;opacity:1}
.pm-cap b{font:700 1rem var(--f-display);color:var(--blue)}
.pm-cap span{font-size:.82rem;color:var(--ink-2);line-height:1.3}
.center-cta{display:flex;justify-content:center;margin-top:34px}
@media (max-width:900px){.proj-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:190px}.pm-item:nth-child(1){grid-column:span 2;grid-row:span 1}.pm-item:nth-child(4){grid-row:span 1}}
@media (max-width:520px){.proj-mosaic{grid-template-columns:1fr;grid-auto-rows:220px}.pm-item:nth-child(1){grid-column:auto}}

/* Projects page cards: enhanced photos fill the card */
.proj-card .pc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.proj-card:hover .pc-img img{transform:scale(1.06)}

/* Solution page: equipment as a simple list */
.equip-sec{padding-block:24px 64px}
.equip-in{display:grid;gap:14px;justify-items:start;background:var(--paper);border-radius:22px;padding:28px 30px}
.equip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.equip li{font:600 .9rem var(--f-display);background:#FFFFFF;border:1px solid var(--line);border-radius:999px;padding:9px 14px}
/* Fill every row: 7 solution tiles and 6 project photos */
@media (min-width:1001px){
  .sol-photos{grid-auto-rows:minmax(220px,auto)}
  .sol-photo{aspect-ratio:auto}
  .sol-photo:nth-child(6),.sol-photo:nth-child(7){grid-column:span 2}
}
.pm-item:nth-child(4){grid-row:auto}

/* ===== Vibrant edition: portrait, soft light, two distinct showcases ===== */
:root{--vivid:#1F6FD6;--vivid-2:#3FA0F0;--deepest:#0F2744;--logo-red:#D33A45}

/* Opening: portrait photo, soft light that follows the pointer */
@media (min-width:901px){.is-home .ihero-grid{grid-template-columns:1.15fr .85fr}}
.is-home .ihero-media{max-width:460px;justify-self:end;width:100%}
.is-home .frame{aspect-ratio:4/5;border:0;box-shadow:0 50px 90px -50px rgba(15,39,68,.65)}
.is-home .ihero-media::before{content:"";position:absolute;inset:-12% -14% -8% -10%;z-index:0;border-radius:50%;background:radial-gradient(closest-side,rgba(63,160,240,.35),rgba(63,160,240,0));filter:blur(10px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);opacity:.75}}
.spot{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(260px circle at var(--mx,30%) var(--my,25%),rgba(255,248,235,.9),rgba(255,248,235,0) 70%);transition:background .1s}
.ihero h1 em{background:linear-gradient(90deg,var(--blue),var(--vivid-2),var(--blue));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@media (max-width:900px){.is-home .ihero-media{justify-self:center;max-width:380px}}

/* Figures: vivid numbers */
.stat b{background:linear-gradient(120deg,var(--blue-deep),var(--vivid));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Solutions: dark stage, list + portrait panel */
.sol-stage{background:radial-gradient(900px 600px at 85% 20%,rgba(63,160,240,.28),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(31,111,214,.35),transparent 60%),var(--deepest);color:#FFFFFF;overflow:hidden}
.sol-stage .kicker{color:#9CC4EC}
.sol-stage h2{color:#FFFFFF}
.sol-stage h2 em{color:var(--vivid-2)}
.sol-split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.sol-left{display:grid;gap:18px;min-width:0}
.sol-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px;counter-reset:none}
.sol-list a{position:relative;display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:4px 14px;padding:14px 16px;border-radius:14px;text-decoration:none;color:rgba(255,255,255,.6);transition:background .35s,color .35s}
.sl-num{font:500 .78rem var(--f-mono);color:#7FA9D6}
.sl-name{font:600 clamp(1.15rem,2vw,1.55rem)/1.2 var(--f-display);letter-spacing:-.01em;transition:transform .35s}
.sl-tech{grid-column:2;font:500 .75rem var(--f-mono);color:#9CC4EC;max-height:0;opacity:0;overflow:hidden;transition:all .35s}
.sl-go{grid-row:1;grid-column:3;font-size:1.2rem;color:var(--vivid-2);opacity:0;transform:translateX(-8px);transition:all .3s}
.sl-thumb{display:none}
.sol-list a.on,.sol-list a:hover,.sol-list a:focus-visible{background:rgba(255,255,255,.07);color:#FFFFFF}
.sol-list a.on .sl-name{transform:translateX(4px)}
.sol-list a.on .sl-tech{max-height:2em;opacity:1;margin-top:4px}
.sol-list a.on .sl-go{opacity:1;transform:none}
.sol-list a.on::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:linear-gradient(var(--vivid-2),var(--logo-red))}
.sol-portrait{position:relative;aspect-ratio:3/4;max-width:100%;border-radius:28px;overflow:hidden;box-shadow:0 60px 100px -60px rgba(0,0,0,.8);background:#163357}
.sol-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .8s ease,transform 5s ease}
.sol-portrait img.on{opacity:1;transform:scale(1)}
.sp-glow{position:absolute;inset:0;mix-blend-mode:soft-light;background:linear-gradient(160deg,rgba(255,240,220,.55),rgba(255,240,220,0) 45%,rgba(31,111,214,.45));pointer-events:none}
.sol-portrait .sp-code{position:absolute;right:18px;bottom:6px;font:800 clamp(4rem,9vw,7rem)/1 var(--f-display);color:rgba(255,255,255,.85);letter-spacing:-.04em;text-shadow:0 10px 40px rgba(0,0,0,.35);transition:opacity .3s}
@media (max-width:900px){
  .sol-split{grid-template-columns:1fr;gap:28px}
  .sol-portrait{display:none}
  .sol-list a{grid-template-columns:64px 1fr auto;align-items:center;padding:10px;background:rgba(255,255,255,.05);margin-bottom:8px}
  .sl-num{display:none}
  .sl-thumb{display:block;grid-row:1/3;grid-column:1;width:64px;height:80px;object-fit:cover;border-radius:10px}
  .sl-tech{max-height:none;opacity:1;grid-column:2}
  .sl-go{opacity:1;transform:none;grid-row:1/3;align-self:center}
  .sol-list a.on::before{content:none}
}

/* How we work stays on white */
.process{background:#FFFFFF}

/* Projects: horizontal strip of portrait cards */
.proj-sec{background:linear-gradient(180deg,var(--paper),#FFFFFF);overflow:hidden}
.proj-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:32px}
.proj-head > div:first-child{display:grid;gap:14px}
.ph-actions{display:flex;gap:10px;align-items:center}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,24vw,320px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px max(16px,calc((100vw - 1240px)/2 + 32px)) 40px;scroll-padding-inline:max(16px,calc((100vw - 1240px)/2 + 32px));scrollbar-width:none;cursor:grab}
.strip::-webkit-scrollbar{display:none}
.pcard-p{position:relative;scroll-snap-align:start;aspect-ratio:3/4;max-width:100%;border:0;padding:0;border-radius:24px;overflow:hidden;cursor:zoom-in;background:#163357;box-shadow:0 30px 50px -36px rgba(15,39,68,.6);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.pcard-p:nth-child(even){transform:translateY(28px)}
.pcard-p:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 44px 70px -40px rgba(15,39,68,.7)}
.pcard-p:nth-child(even):hover{transform:translateY(18px) rotate(.6deg)}
.pcard-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pcard-p:hover img{transform:scale(1.08)}
.pcard-p::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,39,68,0) 40%,rgba(15,39,68,.88));mix-blend-mode:multiply}
.pcard-p::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:soft-light;background:linear-gradient(160deg,rgba(255,245,230,.6),transparent 50%)}
.pp-meta{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;display:grid;gap:2px;text-align:left;color:#FFFFFF}
.pp-place{font:500 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#BFD8F2}
.pp-meta b{font:800 clamp(2rem,3vw,2.6rem)/1 var(--f-display);letter-spacing:-.03em}
.pp-unit{font:600 .8rem var(--f-display);color:#BFD8F2;margin-top:-2px}
.pp-name{font:600 1rem/1.3 var(--f-display);margin-top:6px}
@media (max-width:600px){.strip{grid-auto-columns:72vw}.pcard-p:nth-child(even){transform:none}.ph-actions .arrow{display:none}}

/* Closing band: vivid */
.start-in{background:linear-gradient(120deg,var(--deepest),var(--blue-deep) 50%,var(--vivid))}
@media (max-width:640px){.head .menu-btn{margin-left:auto}}