/* A quieter first screen; the existing story and service animations stay intact. */
.hero{padding-top:36px}
.hero-grid{grid-template-columns:1.2fr 1fr;padding:44px 0 70px;gap:24px}
.hero h1{font-size:clamp(70px,7.15vw,116px);line-height:1.06}
.hero-copy>p{max-width:470px;margin-top:30px;font-size:18px;line-height:1.65}
.hero h1>span::after{background:#b6e0df;height:.065em}
.hero-actions{margin-top:30px;gap:26px}
.hero-work-link{color:var(--muted);font-size:16px}
.hero-art-calm{width:100%;max-width:580px;margin:0;justify-self:center;max-height:none}
.hero-art-calm::before{inset:8%;border-radius:50%;background:radial-gradient(circle,#dcefed 0,transparent 72%);mask-image:none;opacity:.7}
.hero-art-calm .brand-object{inset:6% 4% auto;width:92%;height:88%;filter:drop-shadow(0 18px 22px #17465210)}
body[data-page=home]:not(.hero-passed) .contact-dock{visibility:hidden;pointer-events:none}
.story-heading .journey-motion-toggle{margin-top:14px}

/* Supplied app screens, laid out in CSS without recreating product interfaces. */
.theme-shift-services{--app-paper:#f3ebce;--app-ink:#4d4b27;--app-glow:#e4d788}
.theme-sports-club{--app-paper:#e6eaf6;--app-ink:#1b3366;--app-glow:#c7d4ee}
.theme-water-delivery{--app-paper:#dff0f1;--app-ink:#11516b;--app-glow:#b4dce2}
.mobile-preview{position:relative;isolation:isolate;overflow:hidden;background:var(--app-paper);color:var(--app-ink);aspect-ratio:1.44}
.mobile-preview::before{content:'';position:absolute;inset:12% -12% -40% 20%;border-radius:50%;background:radial-gradient(ellipse,var(--app-glow),transparent 66%);z-index:-1}
.mobile-cover-copy{position:absolute;inset:9% auto 9% 7%;width:40%;display:flex;flex-direction:column;align-items:flex-start;z-index:2}
.mobile-cover-kind{font-size:14px;line-height:1.45;max-width:14ch;color:var(--app-ink);opacity:.8}
.mobile-cover-copy>strong{font-size:clamp(24px,3.15vw,45px);line-height:1.07;letter-spacing:-.045em;font-weight:500;margin:auto 0}
.mobile-cover-platforms{font-size:14px;line-height:1.6;max-width:20ch}
.mobile-cover-screens{position:absolute;inset:11% -4% -9% 48%;display:flex;align-items:flex-start;gap:5%;transform:rotate(-8deg)}
.mobile-cover-screens img{display:block;flex:0 0 48%;width:48%;height:auto;border:4px solid #fff;border-radius:19px;box-shadow:0 14px 28px #18343b20}
.mobile-cover-screens img:nth-child(2){margin-top:14%}
.preview-large.mobile-preview{aspect-ratio:2.1;min-height:0;border-radius:16px}
.preview-large .mobile-cover-copy{left:7%;width:40%}
.preview-large .mobile-cover-copy>strong{font-size:clamp(36px,5.2vw,76px)}
.preview-large .mobile-cover-kind,.preview-large .mobile-cover-platforms{font-size:16px;max-width:none}
.preview-large .mobile-cover-screens{inset:9% 3% -24% 50%;gap:9%}
.preview-large .mobile-cover-screens img{width:43%;flex-basis:43%;border-width:6px;border-radius:25px}
.case-gallery{padding-top:80px;padding-bottom:0}
.case-gallery .section-heading{align-items:end;gap:28px}
.case-gallery .section-heading :is(h2,:where([data-heading-style="h2"])){font-size:clamp(30px,3.8vw,52px)}
.app-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding:38px;border:1px solid #d5e2e2;background:linear-gradient(145deg,var(--app-paper),#f7faf9);border-radius:18px}
.app-screen{margin:0;min-width:0}
.app-screen-image{display:block;max-width:270px;margin:0 auto}
.app-screen-image img{display:block;width:100%;height:auto;border:5px solid #fff;border-radius:23px;box-shadow:0 14px 32px #18343b17}
.app-screen figcaption{position:relative;margin:26px auto 0;max-width:290px;padding-left:31px}
.app-screen figcaption>span{position:absolute;left:0;top:2px;font-size:14px;color:var(--muted)}
.app-screen h3{font-size:18px;line-height:1.4;letter-spacing:-.02em;font-weight:500}
.app-screen p{font-size:14px;line-height:1.65;color:var(--muted);margin-top:10px}
.case-source-note{font-size:14px;color:var(--muted);line-height:1.65;margin-top:22px;max-width:800px}
.scope-panel .stack-title{margin-top:30px;font-size:18px}

/* New client projects keep their own colours inside the existing portfolio. */
/* Keep cover labels inside the narrowest part of the angled paper panel. */
.project-cover-bottom>span:first-child{flex:0 1 48%;max-width:48%;padding:0;margin:0;background:none;border-radius:0;line-height:1.5;text-wrap:pretty}
.project-cover-bottom>span:last-child{flex-shrink:0}
@container(max-width:500px){
  .project-cover-top>span:first-child{max-width:54%;flex-shrink:0}
  .project-cover-top>span:last-child{display:none}
}
.theme-prosport{--cover:#e9f0d6;--cover-ink:#283b20;--cover-accent:#566c33}
.theme-prosport .project-image{object-position:78% center}
.theme-prosport .project-cover-content strong{font-weight:600}
.theme-absolut{--cover:#e3eef2;--cover-ink:#254f61;--cover-accent:#407c92}
.theme-absolut .project-image{object-position:45% center}
.theme-voicecom{--cover:#e6e9f6;--cover-ink:#2e3969;--cover-accent:#5365a5}
.theme-voicecom .project-image{object-position:50% center}
.theme-sputnik{--cover:#e8e3f5;--cover-ink:#3d326b;--cover-accent:#655292}
.theme-sputnik .project-image{object-position:68% center}
.theme-presentmenu{--cover:#eee5d3;--cover-ink:#4f412b;--cover-accent:#8a7044}
.theme-presentmenu .project-image{object-position:58% center}
.theme-presentmenu .project-cover-content strong{font-family:Georgia,serif;letter-spacing:-.04em;font-size:max(14px,5.8cqw)}
/* Whole website screens retain their own proportions inside a quiet frame. */
.website-preview{display:flex;flex-direction:column;gap:6%;padding:6%;background:radial-gradient(ellipse at 90% 10%,#ffffffb3,transparent 70%),var(--cover);color:var(--cover-ink)}
.website-cover-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0}
.website-cover-heading strong{font-size:max(17px,3.7cqw);letter-spacing:-.035em;line-height:1.2}
.website-cover-heading>span{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.website-cover-frame{flex:1;min-height:0;display:grid;grid-template-rows:18px minmax(0,1fr);overflow:hidden;border:1px solid #18343b18;border-radius:7px;background:#fff;box-shadow:0 10px 28px #18343b14}
.website-cover-toolbar{display:flex;align-items:center;gap:4px;padding:0 8px;background:#f6f8f8;border-bottom:1px solid #18343b0d}
.website-cover-toolbar i,.screen-chrome i{display:block;width:5px;height:5px;border-radius:50%;background:#c6d0d1}
.website-cover-frame>img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
.preview-large.website-preview{aspect-ratio:1.3;min-height:0;gap:24px;padding:clamp(18px,4vw,48px);border-radius:16px}
.preview-large.website-preview.theme-voicecom{aspect-ratio:1.9}
.preview-large .website-cover-frame{border-radius:12px;grid-template-rows:28px minmax(0,1fr)}
.preview-large .website-cover-toolbar{padding-inline:15px;gap:6px}
.preview-large .website-cover-toolbar i{width:7px;height:7px}
.case-highlights{padding-top:76px;padding-bottom:0}
.case-highlights .section-heading{align-items:end;gap:32px}
.case-highlights .section-heading :is(h2,:where([data-heading-style="h2"])){font-size:clamp(30px,3.8vw,52px);max-width:16ch}
.case-highlights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.case-highlight{min-width:0;overflow:hidden;border:1px solid #d7e1e2;border-radius:14px;background:var(--cover)}
.case-highlight>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.case-highlight-copy{padding:28px;color:var(--cover-ink)}
.case-highlight-number{display:block;font-size:14px;line-height:1.5;color:var(--cover-accent);margin-bottom:28px}
.case-highlight :is(h3,:where([data-heading-style="h3"])){font-size:clamp(22px,2vw,28px);font-weight:500;line-height:1.25;letter-spacing:-.03em}
.case-highlight p{font-size:16px;line-height:1.7;margin-top:16px}
.website-gallery{padding-top:76px;padding-bottom:0}
.website-gallery .section-heading :is(h2,:where([data-heading-style="h2"])){font-size:clamp(30px,3.8vw,52px)}
.website-gallery .section-heading :is(h2,:where([data-heading-style="h2"])){max-width:18ch}
.website-showcase{padding:clamp(16px,3.2vw,40px);border:1px solid #18343b14;border-radius:18px;background:linear-gradient(145deg,#ffffff70,transparent),var(--cover)}
.website-gallery-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.website-gallery-tabs button{min-width:0;min-height:44px;padding:10px 18px;border:1px solid #18343b24;border-radius:50px;background:transparent;color:var(--cover-ink);font:inherit;font-size:14px;line-height:1.5;cursor:pointer;transition:background .2s,color .2s}
.website-gallery-tabs button[aria-selected=true]{background:var(--cover-ink);color:white;border-color:var(--cover-ink)}
.website-gallery-tabs button:focus-visible,.website-screen-link:focus-visible{outline:3px solid var(--cover-accent);outline-offset:4px}
.website-screen{min-width:0;margin:0}
.website-screen[hidden]{display:none}
.website-screen-link{display:block;overflow:hidden;border:1px solid #18343b18;border-radius:12px;background:white;box-shadow:0 14px 40px #18343b10}
.screen-chrome{display:flex;align-items:center;gap:6px;padding:10px 16px;background:#f8faf8;border-bottom:1px solid #18343b14}
.screen-chrome i{width:7px;height:7px}
.screen-chrome>span{margin-left:auto;font-size:14px;line-height:1.4;color:#657574}
.website-screen img{display:block;width:100%;height:auto}
.website-screen figcaption{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:28px}
.website-screen figcaption>div{max-width:720px;min-width:0}
.screen-number{display:block;font-size:14px;line-height:1.5;color:var(--cover-accent);margin-bottom:12px}
.website-screen h3{font-size:clamp(23px,2.5vw,32px);line-height:1.3;color:var(--cover-ink);letter-spacing:-.035em}
.website-screen p{font-size:16px;line-height:1.7;margin-top:12px;color:var(--cover-ink)}
.website-screen figcaption>.text-link{flex-shrink:0;font-size:14px;min-height:44px}
@media(max-width:1050px){
  .case-highlight-copy{padding:22px}
  .case-highlights-grid{gap:14px}
}
@media(max-width:700px){
  .case-highlights{padding-top:48px}
  .case-highlights-grid{grid-template-columns:1fr;gap:18px}
  .case-highlight-copy{padding:26px}
  .case-highlight-number{margin-bottom:18px}
  .case-highlight :is(h3,:where([data-heading-style="h3"])){font-size:25px}
  .case-highlight p{font-size:16px}
  .website-gallery{padding-top:48px}
  .website-showcase{padding:16px;border-radius:12px}
  .website-gallery-tabs{gap:8px;margin-bottom:18px}
  .website-gallery-tabs button{padding:9px 12px}
  .website-screen-link{border-radius:7px}
  .screen-chrome{padding:8px 10px}
  .website-screen figcaption{align-items:flex-start;flex-direction:column;gap:12px;margin-top:22px}
  .website-screen h3{font-size:22px}
  .preview-large.website-preview{gap:16px;border-radius:12px;aspect-ratio:1.14}
  .preview-large.website-preview.theme-voicecom{aspect-ratio:1.45}
  .preview-large .website-cover-heading strong{font-size:22px}
  .preview-large .website-cover-frame{border-radius:7px;grid-template-rows:18px minmax(0,1fr)}
}
@media(min-width:1800px){
  .hero-grid{padding-block:60px 88px}
  .mobile-cover-copy>strong{font-size:50px}
}
@media(max-width:1050px){
  .hero h1{font-size:clamp(60px,7.5vw,80px)}
  .hero-copy>p{font-size:17px;max-width:420px}
  .hero-grid{gap:0;padding-block:42px 60px}
  .mobile-cover-copy>strong{font-size:clamp(24px,3.2vw,34px)}
  .app-gallery{gap:22px;padding:26px}
  .app-screen figcaption{padding-left:0}
  .app-screen figcaption>span{position:static;display:block;margin-bottom:8px}
}
@media(max-width:700px){
  .hero{padding-top:36px}
  .hero-eyebrow>span:first-child{display:flex;font-size:14px;letter-spacing:.045em}
  .hero-grid{display:block;padding:28px 0 54px}
  .hero h1{font-size:clamp(48px,13.6vw,78px);line-height:1.08;letter-spacing:-.06em}
  .hero-copy>p{font-size:17px;line-height:1.65;max-width:36ch;margin-top:26px}
  .hero-art-calm{display:none}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:10px;margin-top:28px}
  .hero-actions .button{min-height:56px;font-size:16px;padding-inline:24px;gap:38px}
  .hero-work-link{font-size:16px;min-height:44px}
  body[data-page=home]:not(.hero-passed) .header-cta{display:none}
  .mobile-preview{aspect-ratio:1.28}
  .mobile-cover-copy>strong{font-size:clamp(27px,7vw,40px)}
  .mobile-cover-screens{inset:14% -6% -5% 49%}
  .mobile-cover-screens img{border-width:3px;border-radius:13px}
  .preview-large.mobile-preview{aspect-ratio:1.15;border-radius:12px}
  .preview-large .mobile-cover-copy{inset:8% auto 8% 6%;width:44%}
  .preview-large .mobile-cover-copy>strong{font-size:clamp(28px,7vw,43px)}
  .preview-large .mobile-cover-kind,.preview-large .mobile-cover-platforms{font-size:14px;max-width:15ch}
  .preview-large .mobile-cover-screens{inset:16% -9% -5% 51%;gap:6%}
  .preview-large .mobile-cover-screens img{width:48%;flex-basis:48%;border-width:3px;border-radius:15px}
  .case-gallery{padding-top:54px}
  .app-gallery{display:flex;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:22px;padding:26px 22px;border-radius:12px}
  .app-screen{flex:0 0 88%;scroll-snap-align:start}
  .app-screen-image{max-width:250px}
  .app-screen-image img{border-radius:20px}
  .app-screen figcaption{max-width:250px;margin-top:22px}
  .app-screen p{font-size:15px}
}