:root{--portfolio-dark:#031326;--portfolio-ink:#09213b;--portfolio-cyan:#39deef;--portfolio-paper:#eef5f7}.portfolio-hero{position:relative;min-height:840px;padding:210px 0 130px;overflow:hidden;color:#fff;background:radial-gradient(circle at 76% 40%,rgba(8,100,144,.72),transparent 38%),repeating-radial-gradient(ellipse at 72% 45%,transparent 0 74px,rgba(85,221,235,.055) 75px 76px),linear-gradient(155deg,#04182d,#020c1c 74%)}.portfolio-hero:before{content:"";position:absolute;inset:0;opacity:.35;background-image:linear-gradient(rgba(88,206,226,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(88,206,226,.045) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(#000,transparent 88%)}.portfolio-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(480px,.95fr);gap:64px;align-items:center}.portfolio-hero-copy h1{margin:22px 0 30px;font-size:clamp(62px,6vw,88px);font-weight:500;line-height:.97;letter-spacing:-.065em}.portfolio-hero-copy h1 em{color:var(--portfolio-cyan);font-style:normal}.portfolio-hero-copy>p:not(.eyebrow){max-width:620px;margin:0 0 34px;color:#bfd3dc;font-size:18px;line-height:1.65}.portfolio-depth{position:absolute;z-index:2;right:24px;top:180px;bottom:80px;width:34px;border-left:1px solid rgba(74,224,240,.58);color:#76adba;font-size:8px}.portfolio-depth span{position:absolute;left:12px}.portfolio-depth span:before{content:"";position:absolute;right:calc(100% + 8px);top:5px;width:14px;height:1px;background:#48dceb}.portfolio-depth span:nth-child(1){top:0}.portfolio-depth span:nth-child(2){top:31%}.portfolio-depth span:nth-child(3){top:62%}.portfolio-depth span:nth-child(4){bottom:0}.portfolio-wave{position:absolute;z-index:4;left:0;bottom:-1px;width:100%;height:54px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 31 C90 17 145 18 225 29 C310 40 380 13 470 24 C560 37 625 42 715 27 C810 11 875 39 965 27 C1055 14 1115 39 1205 26 C1295 12 1355 21 1440 31 L1440 60 L0 60 Z' fill='%23eef5f7'/%3E%3C/svg%3E") center/100% 100% no-repeat}.route-map{position:relative;min-height:500px;padding:22px;overflow:hidden;border:1px solid rgba(87,220,237,.28);border-radius:34px;background:rgba(3,24,43,.8);box-shadow:0 35px 80px rgba(0,0,0,.3),inset 0 0 70px rgba(30,177,210,.08);backdrop-filter:blur(10px)}.route-map-head,.route-map-foot{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;color:#8db9c5;font-size:9px;font-weight:800;letter-spacing:.13em}.route-map-head b{color:#9cebf1;font-size:8px}.route-map-head i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#4de7ef;box-shadow:0 0 12px #4de7ef}.route-radar{position:absolute;left:50%;top:50%;width:360px;height:360px;transform:translate(-50%,-48%);border:1px solid rgba(73,219,237,.23);border-radius:50%;background:conic-gradient(from 210deg,transparent 0 67%,rgba(42,219,235,.12) 77%,transparent 87%)}.route-radar:before,.route-radar:after,.route-radar i{content:"";position:absolute;inset:17%;border:1px solid rgba(73,219,237,.18);border-radius:50%}.route-radar:after{inset:34%}.route-radar i:nth-child(1){inset:0;border-left-color:transparent}.route-radar i:nth-child(2){inset:49%;border-color:#56eaf2;box-shadow:0 0 18px #42dce9}.route-radar span{position:absolute;left:50%;top:4%;bottom:4%;width:1px;background:rgba(73,219,237,.12)}.route-signal{position:absolute;z-index:5;width:210px;padding:17px 18px;border:1px solid rgba(96,220,235,.3);border-radius:18px;color:#dffbfc;background:rgba(5,37,59,.88);text-align:left;box-shadow:0 18px 35px rgba(0,0,0,.22);transition:.25s ease}.route-signal:hover,.route-signal:focus-visible{transform:translateY(-4px);border-color:#53e6ef;box-shadow:0 22px 45px rgba(0,0,0,.3),0 0 24px rgba(65,225,238,.12)}.route-development{left:28px;top:112px}.route-seo{right:28px;bottom:86px}.route-signal small,.route-signal span,.route-signal b{display:block}.route-signal small{color:#55dae6;font-size:7px;letter-spacing:.14em}.route-signal strong{display:block;margin:6px 0 5px;color:#fff;font-size:17px}.route-signal span{color:#9ebac4;font-size:9px;line-height:1.45}.route-signal b{margin-top:10px;color:#5ae2ec;font-size:9px}.route-vessel{position:absolute;z-index:3;left:50%;top:50%;width:86px;height:36px;transform:translate(-50%,-50%);border:2px solid #52e7ef;border-radius:55% 47% 47% 55%;background:#072d47;box-shadow:0 0 28px rgba(61,224,238,.24)}.route-vessel:before{content:"";position:absolute;right:-14px;top:8px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid #52e7ef}.route-vessel:after{content:"";position:absolute;left:18px;top:-10px;width:26px;height:11px;border:2px solid #52e7ef;border-bottom:0;border-radius:8px 8px 0 0}.route-vessel span{position:absolute;left:15px;top:9px;width:14px;height:14px;border:2px solid #58e7ef;border-radius:50%;background:#03192c}.route-vessel i{position:absolute;left:-18px;top:10px;width:18px;height:14px;border-top:2px solid #52e7ef;border-bottom:2px solid #52e7ef}.route-map-foot{position:absolute;left:22px;right:22px;bottom:20px}.route-map-foot i{height:1px;flex:1;margin:0 14px;background:linear-gradient(90deg,#39ddeb,rgba(57,221,235,.1),#39ddeb)}
.portfolio-hero-actions .text-link{border:0;color:#d9edf4;background:transparent;font:inherit;font-size:13px;font-weight:700;line-height:1.35;cursor:pointer}
.portfolio-hero-actions .text-link>.text-link-label{margin-left:0;color:#fff!important;transition:color .22s ease}
.portfolio-hero-actions .text-link:hover>.text-link-label,.portfolio-hero-actions .text-link:focus-visible>.text-link-label{color:#fff!important}
.portfolio-hero-actions .text-link:after{background:var(--portfolio-cyan);box-shadow:0 0 8px rgba(57,222,239,.55);opacity:0;transform:scaleX(0)}
.portfolio-hero-actions .text-link:hover:after,.portfolio-hero-actions .text-link:focus-visible:after{opacity:.82;transform:scaleX(1)}
.portfolio-projects{padding:120px 0 130px;background:var(--portfolio-paper)}.portfolio-heading{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:end;margin-bottom:50px}.portfolio-heading h2,.portfolio-cta h2{margin:10px 0 0;color:#102941;font-size:clamp(52px,5vw,72px);font-weight:550;line-height:1;letter-spacing:-.055em}.portfolio-heading h2 em,.portfolio-cta h2 em{color:#148da7;font-style:normal}.portfolio-heading>p{max-width:530px;margin:0 0 7px;color:#607986;font-size:16px;line-height:1.7}.route-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:42px;padding:9px;border:1px solid #cadce2;border-radius:22px;background:#e4eef1}.route-selector button{display:grid;grid-template-columns:42px 1fr;min-height:78px;padding:14px 18px;border:1px solid transparent;border-radius:16px;color:#54707c;background:transparent;text-align:left;transition:.2s}.route-selector button>span{grid-row:1/3;align-self:center;color:#158aa3;font-size:11px;font-weight:800}.route-selector strong{color:#15314a;font-size:15px}.route-selector small{margin-top:3px;color:#6f8791;font-size:10px}.route-selector button.is-active{border-color:#87cbd6;background:#fff;box-shadow:0 9px 25px rgba(20,66,82,.08)}.expedition-layout{position:relative;padding-left:54px}.depth-indicator{position:absolute;left:0;top:0;bottom:0;width:32px;color:#79a0aa;font-size:8px;font-weight:800;letter-spacing:.12em;writing-mode:vertical-rl}.depth-indicator>div{position:absolute;left:17px;top:70px;bottom:70px;width:1px;background:linear-gradient(#3bcddd,#a8c5cc)}.depth-indicator>div:before,.depth-indicator>div:after{content:"";position:absolute;left:-4px;width:9px;height:1px;background:#42cddd}.depth-indicator>div:before{top:0}.depth-indicator>div:after{bottom:0}.depth-indicator i{position:absolute;left:-7px;top:var(--depth,6%);width:15px;height:8px;border:1px solid #168da5;border-radius:60% 45% 45% 60%;background:var(--portfolio-paper);transition:top .15s linear}.depth-indicator b{position:absolute;left:2px;bottom:0;color:#168ca5;font-size:8px;writing-mode:horizontal-tb}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.project-card{min-width:0;overflow:hidden;border:1px solid #cedde2;border-radius:28px;background:#fff;box-shadow:0 18px 45px rgba(15,51,67,.07);transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease}.project-card:hover{transform:translateY(-5px);box-shadow:0 24px 55px rgba(15,51,67,.12)}.project-card[hidden]{display:none}.project-card-wide{grid-column:1/-1;display:grid;grid-template-columns:1.25fr .75fr}.project-shot{height:330px;overflow:hidden;background:#08243d}.project-card-wide .project-shot{height:100%;min-height:480px}.project-shot img{width:100%;height:100%;object-fit:cover;object-position:top center}.project-info{padding:30px}.project-card-wide .project-info{display:flex;padding:46px;justify-content:center;flex-direction:column}.project-info>p:first-child{margin:0 0 12px;color:#66828d;font-size:8px;font-weight:800;letter-spacing:.11em}.project-info>p:first-child span{color:#138ca5}.project-info h3{margin:0 0 15px;color:#0b2742;font-size:29px;line-height:1.1;letter-spacing:-.035em}.project-info>p:not(:first-child){margin:0;color:#607885;font-size:14px;line-height:1.65}.project-info ul{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 0;padding:0;list-style:none}.project-info li{padding:7px 9px;border:1px solid #d0e1e5;border-radius:999px;color:#526d78;font-size:9px}.seo-case-visual{position:relative;height:310px;overflow:hidden;background:linear-gradient(145deg,#e7f1f4,#f9fbfc)}.seo-case-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 15%,rgba(42,213,230,.17),transparent 32%)}.seo-logo{position:absolute;z-index:2;left:28px;top:28px;width:auto;max-width:145px;height:55px;object-fit:contain;object-position:left center}.seo-proof{position:absolute;right:-16%;bottom:-14%;width:85%;height:82%;object-fit:cover;object-position:top left;border:8px solid #fff;border-radius:22px;box-shadow:0 20px 40px rgba(13,50,67,.18);transform:rotate(-2deg)}.case-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0 14px}.case-metrics>div{padding:14px;border:1px solid #d4e3e7;border-radius:15px;background:#f7fafb}.case-metrics strong,.case-metrics span{display:block}.case-metrics strong{color:#0a2944;font-size:25px}.case-metrics span{margin-top:4px;color:#6f8791;font-size:9px}.case-period{display:inline-flex;padding:7px 10px;border-radius:9px;color:#0c2b46;background:#dff4f6;font-size:10px}.portfolio-cta{padding:115px 0;color:#c5dbe3;background:radial-gradient(circle at 72% 45%,rgba(16,106,145,.6),transparent 33%),linear-gradient(145deg,#04192e,#020d1d)}.portfolio-cta .container{max-width:850px;text-align:center}.portfolio-cta h2{color:#fff}.portfolio-cta>div>p:not(.kicker){max-width:650px;margin:28px auto;color:#afc5ce;font-size:16px;line-height:1.7}.portfolio-cta .button{margin-top:4px}
@media(max-width:1050px){.portfolio-hero{padding-top:165px}.portfolio-hero-grid{grid-template-columns:1fr;gap:45px}.portfolio-hero-copy{max-width:790px}.route-map{width:100%;max-width:720px}.portfolio-depth{display:none}.portfolio-heading{grid-template-columns:1fr;gap:25px}.project-card-wide{grid-template-columns:1fr}.project-card-wide .project-shot{min-height:380px}}
@media(max-width:760px){.portfolio-hero{min-height:auto;padding:120px 0 92px}.portfolio-hero-grid{width:min(100% - 28px,1180px);gap:34px}.portfolio-hero-copy h1{font-size:clamp(43px,12.4vw,57px)}.portfolio-hero-copy>p:not(.eyebrow){font-size:15px}.route-map{min-height:440px;padding:16px;border-radius:24px}.route-map-head{font-size:7px}.route-map-head b{font-size:6px}.route-radar{width:290px;height:290px}.route-signal{width:172px;padding:13px}.route-signal strong{font-size:14px}.route-signal span{font-size:8px}.route-development{left:16px;top:92px}.route-seo{right:16px;bottom:70px}.route-map-foot{left:16px;right:16px;font-size:6px}.portfolio-projects{padding:82px 0}.portfolio-heading h2,.portfolio-cta h2{font-size:43px}.route-selector{display:flex;overflow-x:auto;padding:7px;scroll-snap-type:x mandatory}.route-selector button{flex:0 0 78%;scroll-snap-align:start}.expedition-layout{padding-left:0}.depth-indicator{display:none}.project-grid{grid-template-columns:1fr;gap:16px}.project-card-wide{grid-column:auto}.project-card-wide .project-shot,.project-shot{height:300px;min-height:0}.project-card-wide .project-info,.project-info{padding:25px}.seo-case-visual{height:270px}.portfolio-cta{padding:84px 0}.portfolio-cta .container{width:min(100% - 28px,850px)}}
@media(prefers-reduced-motion:reduce){.project-card,.route-signal,.depth-indicator i{transition:none}}

/* Portfolio modes: development is the default visual route, SEO uses proof-led cards. */
.route-selector{grid-template-columns:repeat(2,minmax(0,1fr))}
.project-grid.is-seo .project-seo{border-color:#b9d4db;background:linear-gradient(180deg,#fff,#f7fbfc)}
.project-grid.is-seo .seo-case-visual{height:340px}
.project-grid.is-development .project-development:not(.project-card-wide) .project-shot{height:360px}
@media(max-width:760px){.route-selector button{flex-basis:86%}.project-grid.is-seo .seo-case-visual,.project-grid.is-development .project-development:not(.project-card-wide) .project-shot{height:285px}}

/* Compact portfolio introduction: the archive starts inside the first viewport. */
@media(min-width:1051px){
  .portfolio-hero{min-height:0;padding:194px 0 84px}
  .portfolio-hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(450px,.92fr);gap:72px}
  .portfolio-hero-copy h1{margin:16px 0 20px;font-size:clamp(54px,5.1vw,72px)}
  .portfolio-hero-copy>p:not(.eyebrow){max-width:590px;margin-bottom:25px;font-size:16px}
  .route-map{min-height:335px;padding:18px 20px;border-radius:29px}
  .route-radar{width:250px;height:250px}
  .route-signal{width:188px;padding:13px 15px;border-radius:15px}
  .route-development{left:22px;top:70px}
  .route-seo{right:22px;bottom:56px}
  .route-signal strong{font-size:15px}
  .route-vessel{width:75px;height:31px}
  .route-map-foot{bottom:15px}
  .portfolio-depth{top:154px;bottom:48px}
  .portfolio-projects{padding-top:84px}
}

/* Development cases use the same large editorial presentation as the development landing, stacked vertically. */
.project-grid.is-development{grid-template-columns:1fr;gap:26px}
.project-grid.is-development .project-development{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(320px,.78fr);min-height:440px}
.project-grid.is-development .project-development .project-shot{height:100%;min-height:440px}
.project-grid.is-development .project-development .project-info{display:flex;padding:44px;justify-content:center;flex-direction:column}
.project-grid.is-development .project-development:nth-child(4n) .project-shot{grid-column:2}.project-grid.is-development .project-development:nth-child(4n) .project-info{grid-row:1;grid-column:1}
@media(max-width:760px){.portfolio-hero{padding-bottom:70px}.project-grid.is-development .project-development{display:block;min-height:0}.project-grid.is-development .project-development .project-shot{height:285px;min-height:0}.project-grid.is-development .project-development .project-info{padding:25px}}

/* Route cards stay above the vessel; project totals are deliberately omitted from the hero. */
@media(min-width:1051px){
  .route-development{left:22px;top:58px}
  .route-seo{right:22px;top:58px;bottom:auto}
  .route-vessel{top:69%}
}

/* Development route: three responsive views are shown without cropping the project description. */
.project-grid.is-development .project-development{grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);min-height:470px}
.project-dev-gallery{position:relative;min-width:0;min-height:470px;overflow:hidden;background:radial-gradient(circle at 70% 20%,rgba(51,214,232,.2),transparent 32%),linear-gradient(145deg,#061b31,#0a4565)}
.project-dev-gallery:before{content:"";position:absolute;inset:0;opacity:.3;background-image:linear-gradient(rgba(115,226,237,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(115,226,237,.055) 1px,transparent 1px);background-size:30px 30px}
.project-screen{position:absolute;margin:0;overflow:hidden;border:6px solid #f9fcfd;border-radius:15px;background:#fff;box-shadow:0 24px 55px rgba(0,10,24,.34)}
.project-screen:before{content:"";position:absolute;z-index:2;left:50%;top:-4px;width:26px;height:3px;border-radius:999px;background:#b9cbd1;transform:translateX(-50%)}
.project-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.project-screen-main{z-index:1;left:5%;top:8%;width:74%;aspect-ratio:16/10}
.project-screen-tablet{z-index:2;right:3%;top:15%;width:38%;aspect-ratio:4/3;border-width:5px;border-radius:13px}
.project-screen-mobile{z-index:3;right:8%;bottom:5%;width:17%;aspect-ratio:9/16;border-width:4px;border-radius:14px}
.project-grid.is-development .project-development .project-info{min-width:0;padding:42px}

/* SEO route: the complete positions report is the primary proof, not a decorative crop. */
.project-grid.is-seo{grid-template-columns:1fr;gap:28px}
.project-grid.is-seo .project-seo{display:grid;grid-template-columns:minmax(430px,1.08fr) minmax(330px,.92fr);min-height:700px;overflow:hidden}
.project-grid.is-seo .seo-case-visual{display:grid;height:auto;min-height:700px;padding:62px 34px 32px;place-items:center;overflow:hidden;background:radial-gradient(circle at 78% 15%,rgba(42,213,230,.18),transparent 32%),linear-gradient(145deg,#e7f1f4,#f9fbfc)}
.project-grid.is-seo .seo-logo{left:30px;top:24px;max-width:150px;height:52px}
.project-grid.is-seo .seo-proof{position:relative;right:auto;bottom:auto;width:auto;max-width:90%;height:610px;object-fit:contain;object-position:center;border:7px solid #fff;border-radius:18px;box-shadow:0 24px 54px rgba(13,50,67,.2);transform:none}
.project-grid.is-seo .project-info{display:flex;padding:48px;justify-content:center;flex-direction:column}
.project-grid.is-seo .case-metrics strong{font-size:30px}

.portfolio-more-actions{display:flex;margin-top:30px;justify-content:center}
.portfolio-more-actions[hidden]{display:none}
.project-grid .project-card[hidden]{display:none!important}
.portfolio-more-button{display:flex;min-width:290px;padding:16px 24px;align-items:center;justify-content:center;flex-direction:column;border:1px solid #77cbd8;border-radius:16px;color:#0a2d47;background:#fff;box-shadow:0 16px 35px rgba(16,70,86,.09);transition:transform .2s,border-color .2s,box-shadow .2s}
.portfolio-more-button:hover{transform:translateY(-3px);border-color:#27cfe1;box-shadow:0 20px 42px rgba(16,70,86,.14)}
.portfolio-more-button span{font-size:15px;font-weight:800}
.portfolio-more-button small{margin-top:4px;color:#6d8791;font-size:10px}

@media(max-width:900px){
  .project-grid.is-development .project-development,.project-grid.is-seo .project-seo{grid-template-columns:1fr}
  .project-dev-gallery{min-height:450px}
  .project-grid.is-seo .seo-case-visual{min-height:610px}
  .project-grid.is-seo .seo-proof{height:535px}
  .project-grid.is-seo .project-info{padding:34px}
}
@media(max-width:760px){
  .route-signal{width:158px;padding:12px}
  .route-development{left:12px;top:78px}
  .route-seo{right:12px;top:78px;bottom:auto}
  .route-vessel{top:68%}
  .project-dev-gallery{min-height:330px}
  .project-screen{border-width:4px;border-radius:10px}
  .project-screen-main{left:4%;top:9%;width:77%}
  .project-screen-tablet{right:2%;top:18%;width:40%;border-width:3px}
  .project-screen-mobile{right:7%;bottom:5%;width:19%;border-width:3px}
  .project-grid.is-development .project-development .project-info,.project-grid.is-seo .project-info{padding:25px}
  .project-grid.is-seo .seo-case-visual{min-height:520px;padding:58px 16px 20px}
  .project-grid.is-seo .seo-proof{max-width:96%;height:445px;border-width:5px}
  .project-grid.is-seo .seo-logo{left:18px;top:16px;max-width:130px;height:42px}
  .portfolio-more-actions{margin-top:22px}
  .portfolio-more-button{width:100%;min-width:0}
}

/* A clean submarine silhouette and a live sweep leave room for future routes. */
.route-map-foot{display:none}
.route-radar{background:radial-gradient(circle at center,rgba(42,219,235,.07),transparent 61%)}
.route-radar span{inset:0;width:auto;height:auto;border-radius:50%;background:conic-gradient(from 0deg,rgba(66,226,239,.3),rgba(66,226,239,.035) 16%,transparent 25%);animation:portfolio-radar-sweep 5.4s linear infinite}
.route-vessel{border-radius:56% 50% 50% 56%}
.route-vessel:before{display:none}
@keyframes portfolio-radar-sweep{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.route-radar span{animation:none}}

/* Equal development cards: screenshots keep their native proportions inside identical device frames. */
@media(min-width:901px){
  .project-grid.is-development .project-development{height:470px;min-height:470px}
  .project-grid.is-development .project-development .project-dev-gallery{height:470px;min-height:470px}
}
.project-dev-gallery{background:radial-gradient(circle at 74% 22%,rgba(45,232,253,.22),transparent 27%),linear-gradient(145deg,#dceef2,#afd5de);isolation:isolate}
.project-dev-gallery:before{opacity:1;background:repeating-radial-gradient(ellipse at 60% 52%,transparent 0 58px,rgba(12,92,115,.08) 59px 60px)}
.project-screen{border-color:#0b2a40;background:#0b2a40;box-shadow:0 26px 55px rgba(6,43,61,.25)}
.project-screen img{object-fit:cover;background:#fff}
.project-development:has(img[src*="otlk.png"]) .project-screen img{object-fit:contain}
.portfolio-dev-logo{display:flex;height:68px;margin-bottom:22px;align-items:center}
.portfolio-dev-logo img{width:auto;max-width:170px;max-height:64px;object-fit:contain;object-position:left center}
.portfolio-dev-logo--square img{max-width:72px;max-height:72px}
.portfolio-dev-wordmark{color:#102941;font-size:27px;font-weight:800;letter-spacing:-.04em}
.portfolio-dev-wordmark b{color:#148da7}
.portfolio-dev-logo--soko{height:76px}.portfolio-dev-wordmark--soko{display:inline-flex;align-items:center;color:#151719;font-size:34px}.portfolio-dev-wordmark--soko b{display:inline-flex;margin-left:2px;padding:4px 6px 8px;color:#151719;background:#f5c63d;font:inherit}
.portfolio-dev-logo--compass{height:82px}.portfolio-dev-wordmark--compass{display:block;color:#0d3334;font-size:28px;line-height:1.02}.portfolio-dev-wordmark--compass b{display:block;color:#54b895;font:inherit}
.portfolio-dev-logo--hudkovpro{width:180px;height:78px;padding:9px 14px;border-radius:12px;background:#26364b}.portfolio-dev-logo--hudkovpro img{width:100%;max-width:154px;max-height:58px}
.portfolio-dev-logo--elizium{height:96px}.portfolio-dev-logo--elizium img{max-width:96px;max-height:96px}
.project-grid.is-development .project-info>p:first-of-type{margin:0 0 12px;color:#66828d;font-size:8px;font-weight:800;letter-spacing:.11em}
.project-grid.is-development .project-info>p:first-of-type span{color:#138ca5}
.project-grid.is-development .project-info>p:not(:first-of-type){margin:0;color:#607885;font-size:14px;line-height:1.65}
.project-development:has(img[src*="compass-"]) .project-screen-main,.project-development:has(img[src*="unoestetico-"]) .project-screen-main,.project-development:has(img[src*="pizzamania-"]) .project-screen-main{left:3%;top:8%;width:77%;height:54%;aspect-ratio:auto;transform:rotate(-1deg)}
.project-development:has(img[src*="compass-"]) .project-screen-tablet,.project-development:has(img[src*="unoestetico-"]) .project-screen-tablet,.project-development:has(img[src*="pizzamania-"]) .project-screen-tablet{right:3%;top:auto;bottom:8%;width:74%;height:54%;aspect-ratio:auto;transform:rotate(1deg)}

/* Compact proof-led SEO cards: positions on the left, logo, metrics and traffic growth on the right. */
.project-grid.is-seo .project-seo{grid-template-columns:minmax(360px,.88fr) minmax(420px,1.12fr);min-height:540px}
.project-grid.is-seo .seo-case-visual{display:flex;height:540px;min-height:540px;padding:36px 28px 24px;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 78% 15%,rgba(42,213,230,.18),transparent 32%),linear-gradient(145deg,#e7f1f4,#f9fbfc)}
.seo-proof-window{position:relative;width:min(72%,330px);height:440px;overflow:hidden;border:6px solid #fff;border-radius:17px;background:#fff;box-shadow:0 22px 48px rgba(13,50,67,.2)}
.seo-proof-window img{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top center}
.seo-proof-caption{margin-top:12px;color:#1590a8;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.project-grid.is-seo .project-info{display:flex;padding:38px 42px;justify-content:center;flex-direction:column}
.seo-card-head{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;margin-bottom:13px}
.seo-card-head .project-info>p,.seo-card-head p{margin:0 0 6px;color:#66828d;font-size:8px;font-weight:800;letter-spacing:.11em}
.seo-card-head p span{color:#138ca5}
.seo-domain{color:#78909a;font-size:10px;font-weight:500}
.seo-card-logo{width:130px;height:52px;flex:0 0 130px;object-fit:contain;object-position:right center}
.project-grid.is-seo .project-info h3{margin-bottom:8px;font-size:28px}
.project-grid.is-seo .case-metrics{margin:14px 0 10px}
.project-grid.is-seo .case-metrics>div{padding:12px 13px}
.project-grid.is-seo .case-metrics strong{font-size:27px}
.project-grid.is-seo .case-metrics small{display:block;margin-top:5px;color:#8499a2;font-size:9px}
.project-grid.is-seo .case-period{align-self:flex-start;margin-bottom:12px}
.seo-growth-chart{padding:15px 17px 11px;border-radius:16px;color:#9fc2cd;background:#08233d}
.seo-growth-chart>div{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.seo-growth-chart strong{color:#3de0ee;font-size:18px}
.seo-growth-chart svg{display:block;width:100%;height:92px;margin-top:5px;overflow:visible}
.seo-growth-chart .chart-grid{fill:none;stroke:#1b5169;stroke-width:1}
.seo-growth-chart .chart-area{fill:#0d405a;opacity:.72}
.seo-growth-chart .chart-line{fill:none;stroke:#42dce9;stroke-width:3;stroke-linecap:round}
@media(max-width:900px){
  .project-grid.is-seo .project-seo{grid-template-columns:1fr;min-height:0}
  .project-grid.is-seo .seo-case-visual{height:480px;min-height:480px;padding:26px}
  .seo-proof-window{height:400px}
}
@media(max-width:760px){
  .project-grid.is-development .project-development{height:auto;min-height:0}
  .project-grid.is-development .project-development .project-dev-gallery{height:330px;min-height:330px}
  .project-grid.is-development .project-development .project-info{min-height:270px}
  .project-grid.is-seo .project-seo{min-height:875px}
  .project-grid.is-seo .seo-case-visual{height:410px;min-height:410px;padding:20px 16px 16px}
  .seo-proof-window{width:min(74%,270px);height:342px;border-width:4px}
  .project-grid.is-seo .project-info{padding:25px}
  .seo-card-head{gap:12px}.seo-card-logo{width:92px;height:44px;flex-basis:92px}
  .project-grid.is-seo .project-info h3{font-size:25px}
  .seo-growth-chart svg{height:76px}
}

/* Mobile route choice: both destinations remain fully visible. */
@media(max-width:760px){.route-selector{display:grid;grid-template-columns:1fr;gap:8px;overflow:visible}.route-selector button{width:100%;min-height:80px;flex:none;scroll-snap-align:none}}

/* Development previews remain clickable while gaining the same quiet motion as the service-page carousel. */
.project-dev-gallery{cursor:zoom-in}.project-dev-gallery:focus-visible{outline:3px solid #24cfe1;outline-offset:-5px}
@media(hover:hover) and (min-width:901px){
  .project-development:hover .device-desktop{transform:translateY(-5px);box-shadow:0 31px 62px rgba(6,43,61,.29)}
  .project-development:hover .device-tablet{transform:translate(4px,-7px)}
  .project-development:hover .device-phone{transform:translate(-3px,-9px)}
  .project-development:hover .device-desktop--site{transform:rotate(-1deg) translateY(-5px)}
  .project-development:hover .device-desktop--cabinet{transform:rotate(1deg) translate(4px,-7px)}
}

.seo-proof-window[role="button"]{cursor:zoom-in}
.seo-proof-window[role="button"]:focus-visible{outline:3px solid #168da5;outline-offset:4px}
.seo-proof-window[role="button"]::after{content:"Открыть отчёт";position:absolute;right:10px;bottom:10px;padding:8px 11px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(4,24,43,.9);color:#fff;font-size:12px;font-weight:700;line-height:1.3;pointer-events:none}
.portfolio-gallery-device.gallery-device-report{border:16px solid #f7fafb;border-radius:22px;background:#f7fafb;box-shadow:0 30px 90px rgba(0,0,0,.48)}
.portfolio-gallery-device.gallery-device-report::before,.portfolio-gallery-device.gallery-device-report::after{display:none}
.portfolio-gallery-device.gallery-device-report img{width:100%;height:100%;border-radius:10px;object-fit:contain;object-position:center;transform:none}
.portfolio-gallery.is-report figure{grid-template-rows:minmax(0,1fr);border:0;background:transparent;box-shadow:none;overflow:visible}
.portfolio-gallery.is-report .portfolio-gallery-stage{padding:0;background:transparent;overflow:visible}
.portfolio-gallery.is-report figcaption{display:none}
@media(max-width:760px){.portfolio-gallery-device.gallery-device-report{border-width:10px;border-radius:17px}}
.seo-data-source{margin:14px 0 0!important;color:#416574!important;font-size:13px!important;font-weight:650;line-height:1.45!important}
.seo-card-head p{font-size:11px}.seo-domain{font-size:13px;line-height:1.45}

.portfolio-gallery[hidden]{display:none}.portfolio-gallery{position:fixed;z-index:10050;inset:0;display:grid;padding:34px 78px;place-items:center;background:rgba(1,12,26,.88);backdrop-filter:blur(12px)}
.portfolio-gallery figure{display:grid;width:min(1180px,92vw);height:min(790px,84vh);margin:0;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;border:1px solid rgba(95,228,240,.36);border-radius:24px;background:#061c31;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.portfolio-gallery figure>img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;background:#eaf3f5}
.portfolio-gallery figcaption{display:flex;min-height:64px;padding:16px 24px;align-items:center;justify-content:space-between;color:#fff;background:#08243d}.portfolio-gallery figcaption strong{font-size:18px}.portfolio-gallery figcaption span{color:#69e4ee;font-size:14px;font-weight:800}
.portfolio-gallery-close,.portfolio-gallery-arrow{position:absolute;display:grid;border:1px solid rgba(104,229,240,.5);place-items:center;color:#fff;background:#092b45;box-shadow:0 12px 30px rgba(0,0,0,.24)}
.portfolio-gallery-close{right:28px;top:24px;width:48px;height:48px;border-radius:50%;padding:0;font-size:0;line-height:0}.portfolio-gallery-arrow{top:50%;width:50px;height:50px;border-radius:50%;font-size:21px;transform:translateY(-50%)}.portfolio-gallery-prev{left:20px}.portfolio-gallery-next{right:20px}.portfolio-gallery.is-single .portfolio-gallery-arrow{display:none}.portfolio-gallery-open{overflow:hidden}
.portfolio-gallery-close::before,.portfolio-gallery-close::after{content:"";position:absolute;left:50%;top:50%;width:19px;height:2.5px;border-radius:999px;background:currentColor;transform-origin:center;pointer-events:none}
.portfolio-gallery-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.portfolio-gallery-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.portfolio-gallery-arrow{padding:0;font-size:0;line-height:0}
.portfolio-gallery-arrow::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m-7-7 7 7-7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m-7-7 7 7-7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:translate(-50%,-50%)}
.portfolio-gallery-prev::before{transform:translate(-50%,-50%) scaleX(-1)}
@media(max-width:760px){.portfolio-gallery{padding:72px 14px 18px}.portfolio-gallery figure{width:100%;height:min(720px,82vh);border-radius:18px}.portfolio-gallery-close{right:14px;top:14px;width:44px;height:44px}.portfolio-gallery-arrow{top:auto;bottom:27px;z-index:2;width:40px;height:40px}.portfolio-gallery-prev{left:24px}.portfolio-gallery-next{right:24px}.portfolio-gallery figcaption{min-height:76px;padding:14px 64px}.portfolio-gallery figcaption strong{font-size:15px}.portfolio-gallery figcaption span{font-size:12px}.seo-data-source{font-size:12px!important}.seo-card-head p{font-size:10px}.seo-domain{font-size:12px}}

/* The Artill mobile screenshot has a narrow safe area; keep its left-hand text intact. */
.device-phone:has(img[src*="artil-mobile"]) img{object-fit:contain!important;object-position:top center!important;background:#fff}

/* The same branded submarine used on the homepage, enlarged for the project map. */
.portfolio-submarine{position:absolute;z-index:4;left:50%;top:69%;width:130px;height:46px;filter:drop-shadow(0 0 16px rgba(45,232,253,.42));transform:translate(-50%,-50%) rotate(-4deg);animation:portfolio-sub-float 4.6s ease-in-out infinite}
.portfolio-submarine .seo-sub-body{position:absolute;left:19px;top:11px;width:78px;height:30px;border:1px solid rgba(92,232,246,.7);border-radius:55% 48% 48% 55%;background:linear-gradient(180deg,#0b5771,#062b47);box-shadow:inset 0 2px 5px rgba(255,255,255,.12),0 5px 16px rgba(0,0,0,.35)}
.portfolio-submarine .seo-sub-body:before{content:"";position:absolute;left:29px;top:-10px;width:22px;height:11px;border:1px solid rgba(92,232,246,.58);border-bottom:0;border-radius:10px 10px 0 0;background:#073951}
.portfolio-submarine .seo-sub-body:after{content:"";position:absolute;left:37px;top:-16px;width:2px;height:8px;background:#67edf9;box-shadow:0 0 8px #45e3f1}
.portfolio-submarine .seo-sub-body i{position:absolute;top:8px;right:11px;width:11px;height:11px;border:1px solid #78f3ff;border-radius:50%;background:#06243b;box-shadow:inset 0 0 6px #36deee,0 0 7px rgba(45,232,253,.38)}
.portfolio-submarine .seo-sub-body b{position:absolute;left:14px;top:7px;color:#b4f9ff;font-size:9px;font-weight:900;text-shadow:0 0 7px rgba(74,235,249,.55)}
.portfolio-submarine .seo-sub-tail{position:absolute;left:93px;top:17px;width:21px;height:21px;border:1px solid rgba(92,232,246,.65);clip-path:polygon(0 20%,100% 0,75% 50%,100% 100%,0 78%);background:#09445f}
.portfolio-submarine .seo-sub-light{position:absolute;z-index:2;left:12px;top:22px;width:6px;height:6px;border-radius:50%;background:#e9ffff;box-shadow:0 0 8px #8ff7ff}
.portfolio-submarine .seo-sub-light:after{content:"";position:absolute;right:4px;top:-15px;width:92px;height:36px;background:linear-gradient(270deg,rgba(128,244,255,.24),transparent);clip-path:polygon(100% 46%,0 0,0 100%,100% 56%)}
.portfolio-submarine .seo-sub-bubbles i{position:absolute;border:1px solid rgba(108,237,249,.55);border-radius:50%}
.portfolio-submarine .seo-sub-bubbles i:nth-child(1){right:3px;top:12px;width:6px;height:6px}.portfolio-submarine .seo-sub-bubbles i:nth-child(2){right:-6px;top:3px;width:4px;height:4px}.portfolio-submarine .seo-sub-bubbles i:nth-child(3){right:-11px;top:21px;width:3px;height:3px}
@keyframes portfolio-sub-float{50%{transform:translate(calc(-50% - 10px),calc(-50% - 7px)) rotate(-2deg)}}

/* These four development cases use the same right-hand visual composition as their source cards. */
@media(min-width:901px){
  .project-grid.is-development .project-development:has(img[src*="compass-"]),
  .project-grid.is-development .project-development:has(img[src*="unoestetico-"]),
  .project-grid.is-development .project-development:has(img[src*="mirtex"]),
  .project-grid.is-development .project-development:has(img[src*="palitrafoods"]){grid-template-columns:minmax(320px,.7fr) minmax(0,1.3fr)}
  .project-grid.is-development .project-development:has(img[src*="compass-"]) .project-info,
  .project-grid.is-development .project-development:has(img[src*="unoestetico-"]) .project-info,
  .project-grid.is-development .project-development:has(img[src*="mirtex"]) .project-info,
  .project-grid.is-development .project-development:has(img[src*="palitrafoods"]) .project-info{grid-column:1;grid-row:1}
  .project-grid.is-development .project-development:has(img[src*="compass-"]) .project-dev-gallery,
  .project-grid.is-development .project-development:has(img[src*="unoestetico-"]) .project-dev-gallery,
  .project-grid.is-development .project-development:has(img[src*="mirtex"]) .project-dev-gallery,
  .project-grid.is-development .project-development:has(img[src*="palitrafoods"]) .project-dev-gallery{grid-column:2;grid-row:1}
}
@media(max-width:760px){.portfolio-submarine{top:69%;transform:translate(-50%,-50%) rotate(-4deg) scale(.88)}}
@media(prefers-reduced-motion:reduce){.portfolio-submarine{animation:none}}

/* Project-map choices must remain readable without zooming. */
.route-map-head{font-size:10px}.route-map-head b{font-size:9px}
.route-signal small{font-size:8.5px}.route-signal strong{font-size:15px}.route-signal span{font-size:11px;line-height:1.5}

/* The two main portfolio tabs carry the primary navigation hierarchy. */
.route-selector strong{font-size:18px}.route-selector small{font-size:12px;line-height:1.4}

/* Development previews inherit the exact two/three-device composition from the development page. */
.project-dev-gallery.dev-case-shot{grid-area:auto}
.project-dev-gallery figure{margin:0}
.project-dev-gallery.dev-case-shot .device-desktop img,.project-dev-gallery.dev-case-shot .device-tablet img,.project-dev-gallery.dev-case-shot .device-phone img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* SEO proof is deliberately larger; redundant caption is removed and metrics are strengthened. */
.project-grid.is-seo .project-seo{grid-template-columns:minmax(430px,1fr) minmax(430px,1fr);min-height:580px}
.project-grid.is-seo .seo-case-visual{height:580px;min-height:580px;padding:28px 24px}
.seo-proof-window{width:min(74%,350px);height:525px}
.seo-proof-caption{display:none}
.seo-card-head p{font-size:10px}.seo-domain{font-size:12px}.seo-card-logo{width:145px;height:58px;flex-basis:145px}
.project-grid.is-seo .project-info{padding:42px 44px}.project-grid.is-seo .project-info h3{font-size:31px}
.project-grid.is-seo .case-metrics strong{font-size:31px}.project-grid.is-seo .case-metrics span{font-size:11px}.project-grid.is-seo .case-metrics small{font-size:12px}
.project-grid.is-seo .case-period{font-size:13px}.seo-growth-chart{padding:17px 18px 13px}.seo-growth-chart>div{font-size:12px}.seo-growth-chart strong{font-size:21px}.seo-growth-chart svg{height:112px}
@media(max-width:900px){.project-grid.is-seo .project-seo{grid-template-columns:1fr;min-height:0}.project-grid.is-seo .seo-case-visual{height:560px;min-height:560px}.seo-proof-window{width:min(76%,350px);height:520px}}
@media(max-width:760px){.route-map-head{font-size:8px}.route-map-head b{font-size:7px}.route-signal small{font-size:7.5px}.route-signal strong{font-size:12px}.route-signal span{font-size:9.5px}.route-selector strong{font-size:17px}.route-selector small{font-size:11px}.project-grid.is-seo .seo-case-visual{height:455px;min-height:455px}.seo-proof-window{width:min(76%,275px);height:415px}.project-grid.is-seo .project-info{padding:27px}.project-grid.is-seo .project-info h3{font-size:27px}.seo-card-logo{width:105px;height:48px;flex-basis:105px}.seo-growth-chart svg{height:92px}}

.route-selector [data-filter]{cursor:pointer!important}

.portfolio-more-button span{font-size:18px}.portfolio-more-button small{margin-top:6px;font-size:12px;line-height:1.45}
@media(max-width:760px){.portfolio-more-button span{font-size:17px}.portfolio-more-button small{font-size:11px}}

/* Development cards use the source page dimensions instead of compressing device screens. */
@media(min-width:1101px){
  .project-grid.is-development .project-development{height:620px;min-height:620px}
  .project-grid.is-development .project-development .project-dev-gallery{height:620px;min-height:620px}
}
@media(min-width:761px) and (max-width:1100px){
  .project-grid.is-development .project-development{grid-template-columns:1fr!important;height:auto!important;min-height:0!important}
  .project-grid.is-development .project-development .project-dev-gallery{grid-column:1!important;grid-row:1!important;height:clamp(400px,48vw,500px)!important;min-height:clamp(400px,48vw,500px)!important}
  .project-grid.is-development .project-development .project-info{grid-column:1!important;grid-row:2!important;min-height:300px;padding:32px 36px}
}
@media(max-width:760px){
  .project-grid.is-development .project-development{display:grid;grid-template-columns:1fr;height:auto;min-height:0;border-radius:24px}
  .project-grid.is-development .project-development .project-dev-gallery{grid-column:1!important;grid-row:1!important;height:335px;min-height:335px}
  .project-grid.is-development .project-development .project-info{grid-column:1!important;grid-row:2!important;min-height:330px;padding:28px 24px}
}

/* Final hierarchy overrides: keep both tabs visible and SEO proof text readable. */
.seo-card-head p{font-size:12px}
.seo-card-head .seo-label-trial>span{display:block}
.seo-card-head .seo-label-trial .seo-label-topic{margin-top:6px;color:#66828d;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.5}
.seo-domain{font-size:14px;line-height:1.45}
@media(max-width:760px){
  .route-selector{display:grid;grid-template-columns:1fr;gap:8px;overflow:visible}
  .route-selector button{width:100%;min-height:80px;flex:none;scroll-snap-align:none}
  .seo-card-head p{font-size:11px}
  .seo-domain{font-size:13px}
}

/* Route signals: compact cards are connected to the radar instead of floating over it. */
.route-signal{
  width:174px;
  min-height:96px;
  padding:12px 14px;
  border-radius:15px;
  box-shadow:0 14px 30px rgba(0,0,0,.2);
}
.route-development{left:calc(50% - 198px);top:64px}
.route-seo{right:calc(50% - 198px);top:64px;bottom:auto}
.route-signal:after{
  content:"";
  position:absolute;
  top:70%;
  width:34px;
  height:1px;
  pointer-events:none;
  opacity:.68;
  background:linear-gradient(90deg,rgba(83,230,239,.78),rgba(83,230,239,.08));
  box-shadow:0 0 8px rgba(83,230,239,.18);
}
.route-map:after{
  content:"";
  position:absolute;
  z-index:4;
  left:50%;
  top:45%;
  width:7px;
  height:7px;
  pointer-events:none;
  border:1px solid rgba(117,241,250,.8);
  border-radius:50%;
  background:#07324d;
  box-shadow:0 0 9px rgba(45,232,253,.5);
  transform:translate(-50%,-50%);
}
.route-development:after{left:100%;width:31.2px;background:linear-gradient(90deg,rgba(83,230,239,.72),rgba(83,230,239,.82));transform:rotate(39.75deg);transform-origin:left center}
.route-seo:after{right:100%;width:31.2px;background:linear-gradient(90deg,rgba(83,230,239,.82),rgba(83,230,239,.72));transform:rotate(-39.75deg);transform-origin:right center}
.route-signal strong{font-size:15px}
.route-signal span{font-size:10px;line-height:1.4}
@media(max-width:1050px) and (min-width:761px){
  .route-development,.route-seo{top:96px}
  .route-map:after{top:36.8%}
}
@media(max-width:760px){
  .route-signal{width:145px;min-height:98px;padding:11px 12px}
  .route-development{left:12px;top:78px}
  .route-seo{right:12px;top:78px}
  .route-map:after{top:38%}
  .route-development:after,.route-seo:after{width:54px}
  .route-development:after{transform:rotate(22.5deg)}
  .route-seo:after{transform:rotate(-22.5deg)}
  .route-signal strong{font-size:12px}
  .route-signal span{font-size:9px}
}

/* Case metadata remains secondary, but is large enough to read without zooming. */
.project-grid.is-development .project-info>p:first-of-type{
  font-size:12px;
  line-height:1.35;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.project-info ul{gap:8px}
.project-info li{
  padding:8px 11px;
  font-size:11.5px;
  line-height:1.25;
}
@media(max-width:760px){
  .project-grid.is-development .project-info>p:first-of-type{font-size:11px;letter-spacing:.075em}
  .project-info li{font-size:11px}
}

/* SEO proof reacts gently without making the report harder to read. */
.project-seo .seo-proof-window{
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
  transform-origin:center;
}
@media(hover:hover) and (pointer:fine){
  .project-seo:hover .seo-proof-window{
    border-color:#e8fdff;
    box-shadow:0 28px 58px rgba(13,50,67,.25),0 0 0 1px rgba(45,207,225,.18);
    transform:translateY(-3px) scale(1.012);
  }
}
@media(prefers-reduced-motion:reduce){
  .project-seo .seo-proof-window{transition:none}
  .project-seo:hover .seo-proof-window{transform:none}
}

/* Separate the closing CTA from the footer without breaking the deep-ocean flow. */
.current-footer{position:relative}
.current-footer:before{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  left:clamp(18px,8vw,150px);
  right:clamp(18px,8vw,150px);
  height:1px;
  pointer-events:none;
  opacity:.62;
  background:linear-gradient(90deg,transparent,rgba(45,232,253,.5) 20%,rgba(45,232,253,.72) 50%,rgba(45,232,253,.5) 80%,transparent);
  box-shadow:0 0 12px rgba(45,232,253,.14);
}
/* Responsive connector geometry is calculated from the real marker position. */
.route-map{--route-target-top:45%}
.route-map:after{top:var(--route-target-top)}
.route-signal:after{width:var(--connector-length,31.2px)}
.route-development{--connector-length:31.2px;--connector-angle:39.75deg}
.route-seo{--connector-length:31.2px;--connector-angle:-39.75deg}
.route-development:after{width:var(--connector-length);transform:rotate(var(--connector-angle))}
.route-seo:after{width:var(--connector-length);transform:rotate(var(--connector-angle))}
@media(max-width:1050px) and (min-width:761px){.route-map{--route-target-top:36.8%}}
@media(max-width:760px){.route-map{--route-target-top:38%}.route-development{--connector-length:54px;--connector-angle:22.5deg}.route-seo{--connector-length:54px;--connector-angle:-22.5deg}}

/* Portrait mobile: keep the route radar rings and clear the page-wide arcs. */
.portfolio-hero:before{display:none}

@media(max-width:760px){
  .portfolio-hero{background:radial-gradient(circle at 76% 40%,rgba(8,100,144,.72),transparent 38%),linear-gradient(155deg,#04182d,#020c1c 74%)}
}

/* External hero rings only; the project-map radar keeps its own rings. */
@media (orientation:landscape) and (min-height:521px) and (max-width:1366px){
  .portfolio-hero{background:radial-gradient(circle at 76% 40%,rgba(8,100,144,.72),transparent 38%),linear-gradient(155deg,#04182d,#020c1c 74%)}
  .portfolio-hero:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:repeating-radial-gradient(ellipse at 85% 50%,transparent 0 74px,rgba(85,221,235,.0275) 75px 76px);-webkit-mask-image:linear-gradient(to right,transparent 0 52%,#000 63%);mask-image:linear-gradient(to right,transparent 0 52%,#000 63%)}
}
@media (orientation:landscape) and (max-height:520px){
  .portfolio-hero{background:radial-gradient(circle at 85% 50%,rgba(8,100,144,.72),transparent 38%),linear-gradient(155deg,#04182d,#020c1c 74%)}
  .portfolio-hero:after{display:none}
}

/* Unified page-wide rings; the project-map radar remains independent. */
.portfolio-hero{background:radial-gradient(circle at 76% 40%,rgba(8,100,144,.72),transparent 38%),linear-gradient(155deg,#04182d,#020c1c 74%)}
.portfolio-hero:after{content:"";position:absolute;z-index:1;inset:0;display:block;pointer-events:none;background:repeating-radial-gradient(ellipse at 72% 45%,transparent 0 74px,rgba(76,193,222,.04) 75px 76px);-webkit-mask-image:none;mask-image:none}
@media (orientation:landscape) and (min-height:521px) and (max-width:1366px){.portfolio-hero:after{background:repeating-radial-gradient(ellipse at 85% 50%,transparent 0 74px,rgba(76,193,222,.02) 75px 76px);-webkit-mask-image:linear-gradient(to right,transparent 0 52%,#000 63%);mask-image:linear-gradient(to right,transparent 0 52%,#000 63%)}}
@media(max-width:760px),(orientation:landscape) and (max-height:520px){.portfolio-hero:after{display:none}}

/* Shared first-screen bubbles: the calm varied motion approved on the homepage. */
.portfolio-hero>.bubble-field{position:absolute;z-index:2;inset:90px 0 45px;display:block;overflow:hidden;pointer-events:none}
.portfolio-hero>.portfolio-hero-grid{z-index:3}
.portfolio-hero>.bubble-field i{position:absolute;bottom:-30px;width:9px;height:9px;border:1px solid rgba(83,238,253,.42);border-radius:50%;box-shadow:0 0 12px rgba(45,232,253,.12);animation:portfolioBubbleRise 12s linear infinite}
.portfolio-hero>.bubble-field i:nth-child(1){left:4%;width:5px;height:5px;animation-delay:-2s}.portfolio-hero>.bubble-field i:nth-child(2){left:18%;width:13px;height:13px;animation-delay:-7s;animation-duration:16s}.portfolio-hero>.bubble-field i:nth-child(3){left:35%;animation-delay:-4s;animation-duration:14s}.portfolio-hero>.bubble-field i:nth-child(4){left:54%;width:6px;height:6px;animation-delay:-10s}.portfolio-hero>.bubble-field i:nth-child(5){left:66%;width:15px;height:15px;animation-delay:-5s;animation-duration:18s}.portfolio-hero>.bubble-field i:nth-child(6){left:75%;width:7px;height:7px;animation-delay:-1s}.portfolio-hero>.bubble-field i:nth-child(7){left:84%;width:11px;height:11px;animation-delay:-8s;animation-duration:15s}.portfolio-hero>.bubble-field i:nth-child(8){left:92%;width:5px;height:5px;animation-delay:-3s}.portfolio-hero>.bubble-field i:nth-child(9){left:48%;width:4px;height:4px;animation-delay:-12s;animation-duration:17s}
@keyframes portfolioBubbleRise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.75}70%{opacity:.42}100%{transform:translateY(-700px) translateX(28px);opacity:0}}
@media(prefers-reduced-motion:reduce){.portfolio-hero>.bubble-field i{animation:none}}

/* Approved editorial rhythm: development cases alternate image/text sides. */
@media(min-width:1101px){
  .project-grid.is-development .project-development.is-layout-media-left{grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr)!important}
  .project-grid.is-development .project-development.is-layout-media-left .project-dev-gallery{grid-column:1!important;grid-row:1!important}
  .project-grid.is-development .project-development.is-layout-media-left .project-info{grid-column:2!important;grid-row:1!important}
  .project-grid.is-development .project-development.is-layout-media-right{grid-template-columns:minmax(320px,.7fr) minmax(0,1.3fr)!important}
  .project-grid.is-development .project-development.is-layout-media-right .project-info{grid-column:1!important;grid-row:1!important}
  .project-grid.is-development .project-development.is-layout-media-right .project-dev-gallery{grid-column:2!important;grid-row:1!important}
}

/* Keep the depth reading and its unit on the same line. */
.depth-indicator{writing-mode:horizontal-tb}
.depth-indicator>span{writing-mode:vertical-rl}
.depth-indicator b{display:inline-flex;align-items:baseline;gap:3px;left:0;width:52px;white-space:nowrap;overflow:visible;writing-mode:horizontal-tb;letter-spacing:.06em;font-variant-numeric:tabular-nums;line-height:1.5}
.depth-indicator [data-depth-value]{display:inline-block;min-width:4ch;text-align:right}

/* Local project-map typography; leave catalogue tabs and case copy unchanged. */
.route-signal{min-height:112px}
.route-signal small{font-size:9.5px}
.route-signal span{font-size:12px}
@media(max-width:760px){
 .route-signal{min-height:104px}
 .route-signal small{font-size:9.5px}
 .route-signal span{font-size:11px}
}
@media(orientation:portrait) and (max-width:760px){
 .route-signal strong{font-size:14px}
}
@media(orientation:landscape) and (min-width:761px) and (max-width:1000px) and (max-height:600px){
 .route-signal small{font-size:10.5px}
}

/* Homepage/SEO model geometry; the outer portfolio float remains unchanged. */
.portfolio-sub-model{position:absolute;left:11px;top:4px;width:108px;height:38px;transform:scale(-1.2,1.2);transform-origin:center}
.portfolio-sub-model .sub-body{position:absolute;z-index:1;left:27px;top:9px;width:65px;height:25px;border:1px solid rgba(92,232,246,.7);border-radius:55% 48% 48% 55%;background:linear-gradient(180deg,#0b5771,#062b47);box-shadow:inset 0 2px 5px rgba(255,255,255,.12),0 5px 16px rgba(0,0,0,.35)}
.portfolio-sub-model .sub-body:before{content:"";position:absolute;left:24px;top:-8px;width:18px;height:9px;border:1px solid rgba(92,232,246,.58);border-bottom:0;border-radius:9px 9px 0 0;background:#073951}
.portfolio-sub-model .sub-body:after{content:"";position:absolute;left:30px;top:-12px;width:6px;height:4px;border:1px solid rgba(92,232,246,.6);border-bottom:0;border-radius:6px 6px 0 0;background:#b4fbff;box-shadow:0 0 7px #5ce8f6,0 0 12px rgba(92,232,246,.7)}
.portfolio-sub-model .sub-body i{position:absolute;top:7px;left:10px;width:9px;height:9px;border:1px solid #78f3ff;border-radius:50%;background:#06243b;box-shadow:inset 0 0 5px #36deee,0 0 6px rgba(45,232,253,.32)}
.portfolio-sub-model .sub-body b{position:absolute;right:12px;top:6px;color:#b4f9ff;font-size:8px;font-weight:900;letter-spacing:.02em;transform:scaleX(-1);text-shadow:0 0 7px rgba(74,235,249,.55)}
.portfolio-sub-model svg.sub-tail{position:absolute;z-index:0;left:10px;top:11px;width:28px;height:22px;border:0;clip-path:none;background:none;overflow:visible}
.portfolio-sub-model svg.sub-tail path{fill:#0a4560;stroke:#5ce8f6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.portfolio-sub-model .sub-light{position:absolute;z-index:2;left:92px;top:18.5px;width:4px;height:6px;border:1px solid rgba(92,232,246,.6);border-left:0;border-radius:0 6px 6px 0;background:#e9ffff;box-shadow:0 0 7.2px #8ff7ff}
.portfolio-sub-model .sub-light:after{content:"";position:absolute;left:3px;top:-11px;width:62px;height:27px;transform-origin:left center;background:linear-gradient(90deg,rgba(128,244,255,.18),transparent);clip-path:polygon(0 46%,100% 0,100% 100%,0 56%)}
.portfolio-sub-model .sub-bubbles i{position:absolute;border:1px solid rgba(108,237,249,.55);border-radius:50%}
.portfolio-sub-model .sub-bubbles i:nth-child(1){left:3px;top:10px;width:5px;height:5px}
.portfolio-sub-model .sub-bubbles i:nth-child(2){left:8px;top:2px;width:3px;height:3px}
.portfolio-sub-model .sub-bubbles i:nth-child(3){left:0;top:0;width:2px;height:2px}

/* Horizontal hull alignment; retain the original vertical position and constant float scale. */
.route-map{--portfolio-sub-scale:1}
.portfolio-submarine{top:69%;transform:translate(calc(-50% + 5px),-50%) rotate(2deg) scale(var(--portfolio-sub-scale))}
.portfolio-sub-model{left:17.6px;top:4px}
@keyframes portfolio-sub-float{
 0%,100%{transform:translate(calc(-50% + 5px),-50%) rotate(2deg) scale(var(--portfolio-sub-scale))}
 50%{transform:translate(calc(-50% - 5px),calc(-50% - 7px)) rotate(4deg) scale(var(--portfolio-sub-scale))}
}
@media(max-width:760px){.route-map{--portfolio-sub-scale:.88}}
@media(prefers-reduced-motion:reduce){.portfolio-submarine{transform:translate(-50%,-50%) rotate(3deg) scale(var(--portfolio-sub-scale))}}

/* Local three-route map: retain the original shell height. */
.route-map{--route-target-top:50%}
.route-map .route-radar{width:340px;height:340px}
.route-map .route-signal{width:156px}
.route-development{left:calc(50% - 78px);top:52px}
.route-context{left:calc(50% - 224px);top:42%;text-decoration:none}
.route-seo{right:calc(50% - 224px);top:42%;bottom:auto}
.route-development::after{left:50%;top:100%;right:auto;transform-origin:left center;transform:rotate(var(--connector-angle,90deg))}
.route-context::after{left:100%;top:70%;width:var(--connector-length,50px);transform-origin:left center;transform:rotate(var(--connector-angle,39.75deg));background:linear-gradient(90deg,rgba(83,230,239,.72),rgba(83,230,239,.82))}
@media(min-width:1051px){
 .route-map .route-radar{width:300px;height:300px}
 .route-map .route-signal{min-height:100px;padding:10px 12px}
 .route-development{top:44px}
 .route-context,.route-seo{top:154px}
}
@media(max-width:760px){
 .route-map{--route-target-top:50%}
 .route-development{left:calc(50% - 78px);top:52px}
 .route-context{left:12px;top:184px}
 .route-seo{right:12px;top:184px}
 .route-map .route-context,.route-map .route-seo{width:min(132px,calc(50% - 20px))}
 .route-map .route-context strong,.route-map .route-seo strong{font-size:13px}
 .route-map .route-context span,.route-map .route-seo span{font-size:10.5px}
 .route-map .route-radar{width:min(330px,calc(100% - 24px));height:auto;aspect-ratio:1}
}
@media(max-width:360px){.route-map .route-context strong,.route-map .route-seo strong{font-size:12px}.route-map .route-context span,.route-map .route-seo span{font-size:10px}}

/* Keep the vessel in the lower sonar ring of the three-route composition. */
.route-map .portfolio-submarine{top:var(--portfolio-vessel-top,80%)}

/* User-approved net minus 1 screen pixel, only inside the three route cards. */
.route-map .route-signal small,.route-map .route-signal span{font-size:11px!important}
.route-map .route-signal strong{font-size:14px!important}
@media(max-width:760px){
 .route-map .route-signal small,.route-map .route-signal span{font-size:10px!important}
 .route-map .route-signal strong{font-size:11px!important}
}
@media(max-width:760px) and (orientation:portrait){
 .route-map .route-development strong{font-size:13px!important}
 .route-map .route-context strong,.route-map .route-seo strong{font-size:12px!important}
}
@media(max-width:360px) and (orientation:portrait){.route-map .route-context strong,.route-map .route-seo strong{font-size:11px!important}}

/* One shared junction marker at the measured sonar centre. */
.route-map .route-radar i:nth-child(2){display:none}

/* Three direction tiles stay in one horizontal row, with native swipe on narrow screens. */
.portfolio-projects .route-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
.route-selector-context{display:grid;grid-template-columns:42px 1fr;min-height:78px;padding:14px 18px;border:1px solid transparent;border-radius:16px;color:#54707c;background:transparent;text-align:left;text-decoration:none;transition:.2s}
.route-selector-context>span{grid-row:1/3;align-self:center;color:#158aa3;font-size:11px;font-weight:800}
.route-selector-context:is(:hover,:focus-visible){border-color:#87cbd6;background:#fff;box-shadow:0 9px 25px rgba(20,66,82,.08)}
@media(max-width:1100px){
 .portfolio-projects .route-selector{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:7px;-webkit-overflow-scrolling:touch}
 .portfolio-projects .route-selector>:is(button,a){flex:0 0 45%;width:auto;min-width:0;scroll-snap-align:start}
}
@media(max-width:760px){.portfolio-projects .route-selector>:is(button,a){flex-basis:86%;min-height:80px}}
@media(max-width:760px) and (orientation:portrait){
 .portfolio-projects .route-selector{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;overflow:visible;scroll-snap-type:none}
 .portfolio-projects .route-selector>:is(button,a){width:100%;min-width:0;min-height:80px;flex:none;scroll-snap-align:none}
 .portfolio-projects .route-selector small{font-size:12px}
}
.route-selector .route-label-mobile{display:none}

/* Compact labels belong to the hero expedition map, not the case filters. */
.route-map .route-signal .route-name-mobile{display:none}
@media(max-width:760px),(max-width:1000px) and (max-height:600px) and (orientation:landscape){
 .route-map .route-signal>span{display:none}
 .route-map .route-signal .route-name-desktop{display:none}
 .route-map .route-signal .route-name-mobile{display:block}
 .route-map .route-signal small{font-size:13px!important}
 .route-map .route-signal strong{font-size:16px!important}
}
@media(max-width:760px){
 .route-map .route-signal small{font-size:12px!important}
 .route-map .route-signal strong{font-size:13px!important}
}
@media(max-width:760px) and (orientation:portrait){
 .route-map .route-development strong{font-size:15px!important}
 .route-map .route-context strong,.route-map .route-seo strong{font-size:14px!important}
}
@media(max-width:360px) and (orientation:portrait){.route-map .route-context strong,.route-map .route-seo strong{font-size:13px!important}}

/* Local order: SEO left, contextual advertising right; same connector junction. */
.route-map .route-seo{left:calc(50% - 224px);right:auto}
.route-map .route-context{left:auto;right:calc(50% - 224px)}
.route-map .route-seo::after{left:100%;right:auto;transform-origin:left center;transform:rotate(var(--connector-angle));background:linear-gradient(90deg,rgba(83,230,239,.72),rgba(83,230,239,.82))}
.route-map .route-context::after{left:auto;right:100%;transform-origin:right center;transform:rotate(var(--connector-angle));background:linear-gradient(90deg,rgba(83,230,239,.82),rgba(83,230,239,.72))}
@media(max-width:760px){.route-map .route-seo{left:12px;right:auto}.route-map .route-context{left:auto;right:12px}}

/* Match the contextual route tile hover for both portfolio filters. */
.route-selector button:is(:hover,:focus-visible){border-color:#87cbd6;background:#fff;box-shadow:0 9px 25px rgba(20,66,82,.08)}
@media(min-width:761px) and (max-width:1100px){
 .portfolio-projects .route-selector{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;overflow:visible;scroll-snap-type:none}
 .portfolio-projects .route-selector>button{width:100%;min-width:0;min-height:80px;flex:none;scroll-snap-align:none}
 .portfolio-projects .route-selector>button:not(.is-active):hover{border-color:transparent;background:transparent;box-shadow:none;transform:none}
}
@media(max-width:760px),(max-width:1000px) and (max-height:600px) and (orientation:landscape){
 .portfolio-projects .route-selector>button:not(.is-active):hover{border-color:transparent;background:transparent;box-shadow:none;transform:none}
}

/* SEO portfolio cases: approved local SEO hierarchy and report space. */
.portfolio-context-panel[hidden],[data-project-grid][hidden]{display:none!important}
.concept-deep .portfolio-context-panel.direct-cases{background:transparent}
.portfolio-context-list{display:grid;gap:28px;min-width:0}
.portfolio-context-panel.direct-cases .direct-result-card{width:100%;max-width:none;padding:20px 24px;box-sizing:border-box;cursor:auto}
.portfolio-context-panel.direct-cases .direct-result-card:active{cursor:auto}
@media(max-width:833px),(max-width:1000px) and (max-height:600px){
 .portfolio-context-panel.direct-cases .direct-result-card{padding:10px 4px}
}
.portfolio-context-panel .direct-data-dialog .direct-month-prices{display:block;margin:0;padding:0;border:0}
.portfolio-context-panel .direct-data-close{font-size:28px;line-height:1}
.portfolio-context-panel .direct-data-dialog .direct-month-prices>p{margin:0 0 12px}
.portfolio-context-panel .direct-price-details>summary>span{display:flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;transform:none}
.portfolio-context-panel .direct-price-details>summary svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.portfolio-context-panel .direct-data-dialog-head{position:relative;padding:20px 76px 18px 20px;min-height:84px;box-sizing:border-box}
.portfolio-context-panel .direct-data-dialog-head h3{margin:0;font-size:20px;line-height:1.3;letter-spacing:-.03em}
.portfolio-context-panel .direct-data-dialog-client{font-size:13px;line-height:1.4}
.portfolio-context-panel .direct-data-close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;padding:11px;box-sizing:border-box}
.portfolio-context-panel .direct-data-close:focus:not(:focus-visible){outline:none}
.portfolio-context-panel .direct-data-dialog .direct-month-prices>p{font-size:14px;color:#5f7482}
.portfolio-context-panel .direct-data-dialog .direct-month-prices dl>div{font-size:15px;padding-block:12px}
@media(max-width:833px),(max-width:1000px) and (max-height:600px){
 .portfolio-context-panel.direct-cases .direct-report-summary span,.portfolio-context-panel.direct-cases .direct-report-chart>div:first-child{font-size:12px}
 .portfolio-context-panel .week-dates{font-size:12px;fill:#536f7d}
 .portfolio-context-panel .week-ticks{font-size:11px;fill:#607986}
 .portfolio-context-panel.direct-cases .direct-ad-screenshot .direct-ad-format{font-size:11px}
 .portfolio-context-panel.direct-cases .direct-price-details>summary{font-size:14px;min-height:48px}
}
@media(min-width:901px){
 .project-grid.is-seo .portfolio-seo-trial .seo-case-visual{position:relative;height:auto;align-self:stretch}
 .portfolio-seo-trial .seo-proof-window{position:absolute;top:24px;bottom:24px;height:auto}
 .portfolio-seo-trial .seo-proof-window img{min-height:0;height:auto;object-fit:contain}
}
.project-grid.is-seo .portfolio-seo-trial .project-info{justify-content:flex-start;min-width:0;width:100%;box-sizing:border-box;background:linear-gradient(135deg,#f8fbfd,#edf5f8)}
.portfolio-seo-trial .portfolio-seo-logo{display:flex;align-items:center;min-height:82px}
.portfolio-seo-trial .portfolio-seo-logo img{width:auto;max-width:220px;height:auto;max-height:82px;object-fit:contain;object-position:left center}
.portfolio-seo-trial .portfolio-seo-title-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:0}
.portfolio-seo-trial .portfolio-seo-title-row>div:first-child{flex:1;min-width:0}
.portfolio-seo-trial .portfolio-seo-title-row .seo-domain{overflow-wrap:anywhere}
@media(max-width:360px){
 .project-grid.is-seo .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo{flex-basis:88px}
 .project-grid.is-seo .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo img{width:88px}
}
.project-grid.is-seo .portfolio-seo-trial .portfolio-seo-title-row h3{margin:0;min-width:0}
.portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo{flex:0 0 145px;min-height:58px}
.portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo img{width:145px;max-width:100%;max-height:58px;object-position:right center}
.portfolio-seo-trial .portfolio-seo-divider{height:1px;flex:none;background:#d4e3e9;margin:12px 0 16px}
.portfolio-seo-trial .seo-label-trial{margin:0 0 9px;color:#138ca5;font-size:12px;font-weight:800;line-height:1.5;letter-spacing:.11em}
.portfolio-seo-trial .seo-label-trial>span{display:block}
.portfolio-seo-trial .seo-label-trial .seo-label-topic{margin-top:6px;color:#66828d;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.portfolio-seo-trial .seo-domain{display:block;margin:0;color:#718591;font-size:14px;line-height:1.5}
.project-grid.is-seo .portfolio-seo-trial .case-period{margin:14px 0 0;padding:6px 10px;border:1px solid #cfe1e8;border-radius:999px;background:#edf8fb;color:#071e33;font-size:11px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase}
.project-grid.is-seo .portfolio-seo-trial .case-metrics{margin:20px 0 0}
.project-grid.is-seo .portfolio-seo-trial .case-metrics strong{font-size:26px}
.portfolio-seo-trial .case-metrics>div:first-child strong{color:#168da3}
.portfolio-seo-trial .case-metrics span,.portfolio-seo-trial .case-metrics small{color:#5f7482;font-size:12px}
.portfolio-seo-trial .case-metrics+.portfolio-seo-divider{margin:16px 0 20px}
.portfolio-seo-trial .seo-growth-chart{padding:18px;border:1.5px solid transparent;border-radius:18px;background:#07172f}
.portfolio-seo-trial .seo-growth-chart>div{gap:12px;color:#8fcbd6;font-size:12px;font-weight:400;letter-spacing:.1em}
.portfolio-seo-trial .seo-growth-chart strong{color:#2de8fd;font-size:21px;white-space:nowrap}
.portfolio-seo-trial .seo-growth-chart svg{height:105px;margin-top:8px}
@media(max-width:760px){
 .portfolio-seo-trial .portfolio-seo-title-row{gap:12px}
 .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo{flex-basis:105px;min-height:48px}
 .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo img{width:105px;max-height:48px}
 .portfolio-seo-trial .portfolio-seo-logo{min-height:67px}
 .portfolio-seo-trial .portfolio-seo-logo img{max-width:224px;max-height:67px}
 .portfolio-seo-trial .seo-label-trial{font-size:11px}
 .portfolio-seo-trial .seo-growth-chart>div{font-size:10px}
 .portfolio-seo-trial .seo-growth-chart strong{font-size:17px}
}

/* Portfolio Direct cases: slightly larger result statements. */
.portfolio-context-panel .direct-conclusion-panel .direct-conclusions-list li{font-size:15px}

/* The wide DO-24 wordmark needs more space than compact client symbols. */
.portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo:has(img[src*="do24-official"]){flex-basis:210px}
.portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo img[src*="do24-official"]{width:210px;height:auto;max-height:58px}
@media(max-width:1100px){
 .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo:has(img[src*="do24-official"]){flex-basis:170px}
 .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo img[src*="do24-official"]{width:170px}
}
@media(max-width:760px){
 .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo:has(img[src*="do24-official"]){flex-basis:130px}
 .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo img[src*="do24-official"]{width:130px}
}
@media(max-width:360px){
 .project-grid.is-seo .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo:has(img[src*="do24-official"]){flex-basis:110px}
 .project-grid.is-seo .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo img[src*="do24-official"]{width:110px}
}

/* Local Raketa trial: larger brand and a divider, without changing card/text geometry. */
/* Portfolio SEO/Direct: spacing follows the visible logo row, not a centred slot. */
.project-grid.is-seo .portfolio-seo-trial .portfolio-seo-title-row{align-items:flex-end}
.project-grid.is-seo .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo{align-items:flex-end}
.project-grid.is-seo .portfolio-seo-trial .portfolio-seo-title-row+.portfolio-seo-divider{margin:16px 0 20px}
.portfolio-context-panel.direct-cases .direct-case-intro .direct-client-brand{height:auto;min-height:0;align-items:flex-end;padding:0 0 16px;margin:0;border-bottom:1px solid #d4e3e9}
.portfolio-context-panel.direct-cases .direct-case-intro .direct-case-identity{padding-top:20px}
.portfolio-context-panel.direct-cases .direct-case-intro .direct-case-identity .case-type{margin-top:0}
/* Optical logo sizing stays independent from service-case styling. */
.project-grid.is-development .portfolio-dev-logo img{width:var(--portfolio-brand-width,190px);height:auto;max-width:min(100%,var(--portfolio-brand-width,190px));max-height:var(--portfolio-brand-height,76px);object-fit:contain}
.project-grid.is-development .portfolio-dev-logo img[src*="skanerlidov"]{--portfolio-brand-width:84px;--portfolio-brand-height:84px}
.project-grid.is-development .portfolio-dev-logo img[src*="cnc-"]{--portfolio-brand-width:104px;--portfolio-brand-height:90px}
.project-grid.is-development .portfolio-dev-logo img[src*="bestinfitness"]{--portfolio-brand-width:106px;--portfolio-brand-height:90px}
.project-grid.is-development .portfolio-dev-logo img[src*="unoestetico"]{--portfolio-brand-width:86px;--portfolio-brand-height:86px}
.project-grid.is-development .portfolio-dev-logo img[src*="hudkov-logo"]{--portfolio-brand-width:86px;--portfolio-brand-height:86px}
.project-grid.is-development .portfolio-dev-logo img[src*="hudkovpro"]{--portfolio-brand-width:152px;--portfolio-brand-height:58px}
.project-grid.is-development .portfolio-dev-logo img[src*="mirtex"]{--portfolio-brand-width:210px}
.project-grid.is-development .portfolio-dev-logo img[src*="borisovka"]{--portfolio-brand-width:100px;--portfolio-brand-height:97px}
.project-grid.is-development .portfolio-dev-logo img[src*="artil"]{--portfolio-brand-width:128px;--portfolio-brand-height:84px}
.project-grid.is-development .portfolio-dev-logo img[src*="elizium"]{--portfolio-brand-width:113px;--portfolio-brand-height:113px}
.project-grid.is-development .portfolio-dev-logo img[src*="palitrafoods"]{--portfolio-brand-width:210px}
.project-grid.is-development .portfolio-dev-logo img[src*="valetek"]{--portfolio-brand-width:210px}
.project-grid.is-development .portfolio-dev-logo img:is([src*="otlk"],[src*="logo_ru-1-f824f41ae9e6"]){--portfolio-brand-width:200px}
.portfolio-dev-logo--orbital .portfolio-orbital-logo{display:block;width:220px;max-width:100%;height:auto;max-height:72px}
.project-grid.is-development .portfolio-dev-logo{height:auto;flex:0 0 auto;align-items:flex-end;margin-bottom:16px}
.project-grid.is-development .project-info>p:first-of-type{position:relative;border-top:1px solid #d4e3e9;padding-top:20px}
.project-grid.is-development .project-info>p:first-of-type::before{content:none}
.project-grid.is-development .project-development:has(.portfolio-dev-logo img[alt="Ракета"]) .portfolio-dev-logo img{width:auto;height:76.8px;max-width:204px;max-height:76.8px}
@media(min-width:1101px){
 .project-grid.is-development .project-development:has(.portfolio-dev-logo img[alt="Ракета"]) .project-info>*{position:relative;top:-16px}
}

.portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo:has(img[data-case-logo="medborisovka"]){flex-basis:90px;min-height:90px}
.portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo img[data-case-logo="medborisovka"]{width:90px;height:90px;max-width:90px;max-height:90px;object-fit:contain}
@media(max-width:760px){.project-grid.is-seo .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo:has(img[data-case-logo="medborisovka"]){flex-basis:76px;min-height:76px}.project-grid.is-seo .portfolio-seo-trial .portfolio-seo-title-row .portfolio-seo-logo img[data-case-logo="medborisovka"]{width:76px;height:76px;max-width:76px;max-height:76px}}

.project-grid.is-development .portfolio-dev-logo--orbital img{--portfolio-brand-width:220px;--portfolio-brand-height:72px}