/* ══════════════════════════════════════════════════════════════════════
   WebSpace — a project page (portfolio/*.html, one per project)
   Structure after fraxbit's case studies: a short light hero (back link, label, name, one sentence), "At a glance"
   (facts + the live site in a browser frame and a phone), "The challenge" (white, five numbered points), "The impact"
   (navy, cards), "How it came together" (white: the work, the site's colours and fonts), then the shared ending.
   The hero, nav, buttons, "Ready for launch?" and the Earth footer are shared (style.css).
   ══════════════════════════════════════════════════════════════════════ */

/* the hero: as short as the Portfolio page's, so "At a glance" is already in view */
.page-hero.cs-hero{min-height:min(66vh,620px);min-height:min(66dvh,620px);padding-bottom:clamp(80px,8vw,116px)}
@media (max-width:600px){.page-hero.cs-hero{min-height:0;padding-bottom:84px}}
.cs-back{display:flex;width:max-content;align-items:center;gap:8px;margin-bottom:clamp(22px,2.4vw,34px);font:500 14px/1 var(--font);color:var(--slate);transition:color .3s}
.cs-back svg{width:16px;height:16px}
.cs-back:hover{color:var(--white)}

/* "Live and working": a small cyan light before the words */
.cs-live{display:flex;align-items:center;gap:10px}
.cs-live i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(30,193,203,.18)}

/* ── 2 · at a glance ── */
.section.cs-glance{padding-top:clamp(56px,7vw,100px)}
.cs-glance-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:clamp(36px,5vw,90px);align-items:start}
.cs-facts dl{margin-top:clamp(20px,2vw,28px);border-top:1px solid var(--line-strong)}
.cs-facts dl > div{padding:clamp(14px,1.4vw,18px) 0;border-bottom:1px solid var(--line-strong)}
.cs-facts dt{font:600 11px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.cs-facts dd{margin-top:10px;font:500 16px/1.4 var(--font);color:var(--white)}
.cs-pills{display:flex;flex-wrap:wrap;gap:8px}
.cs-pills i{font-style:normal;padding:7px 12px;border-radius:999px;font:500 13px/1 var(--font);color:var(--cloud);box-shadow:inset 0 0 0 1px var(--line-strong)}
.cs-facts .btn{margin-top:clamp(24px,2.6vw,36px)}

/* the device on the right of "At a glance": a link to the live site */
.cs-shots{position:relative;padding:clamp(10px,2vw,30px) 0 clamp(30px,4vw,60px)}
.cs-mac{position:relative;display:block;cursor:pointer}
.cs-mac:focus-visible{outline:2px solid var(--aurora);outline-offset:8px;border-radius:var(--r-md)}
/* the full page on a laptop screen, moved with one CSS animation: a pause at the top, a slow scroll to the bottom, a
   pause, and back up. Only transform moves; it does not stop under the mouse. Reduced motion keeps the still picture. */
@keyframes cs-scroll{
  0%,7%{transform:translateY(0)}
  47%,53%{transform:translateY(calc(-100% + 100cqh))}
  93%,100%{transform:translateY(0)}
}

/* the MacBook Pro 14" drawn to Apple's proportions (SVG 1000 × 640). The screen in the SVG is 129, 24, 742 × 482 with
   10-unit top corners and 3-unit bottom corners; the scrolling page, the glass sheen and the notch (471, 24, 58 × 16)
   are placed exactly over it, so no frame shows at the edges. */
.cs-mbp-svg{display:block;width:100%;height:auto}
.cs-mbp-screen,.cs-mbp-glass{position:absolute;left:12.9%;top:3.75%;width:74.2%;height:75.3125%;
  border-radius:1.3477% 1.3477% .4043% .4043% / 2.0747% 2.0747% .6224% .6224%}
.cs-mbp-screen{overflow:hidden;background:#0b0d12;container-type:size}
.cs-mbp-screen img{display:block;width:100%;height:auto;max-width:none;will-change:transform;animation:cs-scroll 48s ease-in-out infinite}
/* a faint sheen on the glass, from the top left */
.cs-mbp-glass{pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 38%,transparent 55%)}
.cs-mbp-notch{position:absolute;left:47.1%;top:3.75%;width:5.8%;height:2.5%;background:#000;
  border-radius:0 0 10.345% 10.345% / 0 0 37.5% 37.5%}
.cs-mbp-notch::after{content:"";position:absolute;left:50%;top:30%;width:8%;aspect-ratio:1;border-radius:50%;
  transform:translateX(-50%);background:radial-gradient(circle at 35% 35%,#3a4258,#141826 60%)}
@media (prefers-reduced-motion:reduce){.cs-mbp-screen{display:none}}

/* ── 2b · the admin panel (Sam Travel), under the MacBook in "At a glance": six tabs, a second MacBook showing the
   chosen screen (still pictures, light theme; the chosen one fades in) and the text for that screen beside it ── */
.cs-admin{margin-top:clamp(90px,11vw,160px)}
.cs-admin-head{margin-bottom:clamp(30px,4vw,54px)}
.cs-tabs{display:flex;gap:4px;width:max-content;max-width:100%;padding:6px;border-radius:999px;overflow-x:auto;scrollbar-width:none;
  box-shadow:inset 0 0 0 1px var(--line-strong)}
.cs-tabs::-webkit-scrollbar{display:none}
.cs-tabs button{flex:none;padding:12px 18px;border-radius:999px;font:500 15px/1 var(--font);letter-spacing:-.01em;color:var(--cloud);
  white-space:nowrap;transition:background .3s,color .3s}
.cs-tabs button:hover{background:rgba(255,255,255,.08)}
.cs-tabs button[aria-selected="true"]{background:var(--white);color:var(--navy)}
.cs-tabs button:focus-visible{outline:2px solid var(--aurora);outline-offset:2px}
.cs-admin-stage{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;
  margin-top:clamp(22px,3vw,40px)}
.cs-admin-mac{position:relative}
.cs-mbp-screen.is-static{background:#f6f6f7}
.cs-mbp-screen.is-static img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;animation:none;
  opacity:0;transition:opacity .45s var(--ease)}
.cs-mbp-screen.is-static img.is-active{opacity:1}
.cs-admin-n{font:600 12px/1 var(--font);letter-spacing:.18em;color:var(--cyan)}
.cs-admin-text h3{margin-top:14px;font:600 clamp(22px,2vw,28px)/1.2 var(--font);letter-spacing:-.02em;color:var(--white)}
.cs-admin-text p:not(.cs-admin-n){margin-top:14px;font:400 16px/1.6 var(--font);color:var(--cloud)}
@media (max-width:1000px){.cs-admin-stage{grid-template-columns:1fr}}
@media (max-width:600px){.cs-tabs button{padding:11px 14px;font-size:14px}}
/* reduced motion: the still screens stay (they do not move), only the fade goes */
@media (prefers-reduced-motion:reduce){.cs-mbp-screen.is-static{display:block}.cs-mbp-screen.is-static img{transition:none}}

/* the live site on an iPad, landscape (port of the React "iPad" component; SVG 520 × 400). A recording of the site in
   use sits exactly over the SVG's screen (31.37, 28.47, 457.25 × 342.87); case.js → [data-finger-video] plays it and
   moves the finger: a soft round touch, like the "show touches" dot on an iPhone recording. */
.cs-ipad{position:relative;display:block;cursor:pointer}   /* fills the column, as wide as the MacBook on Sam Travel */
/* the facts and the device centred on each other (the iPad is taller than the facts list) */
.cs-glance-in.is-centered{align-items:center}
.cs-glance-in.is-centered .cs-shots{padding-block:clamp(10px,2vw,30px)}
.cs-ipad:focus-visible{outline:2px solid var(--aurora);outline-offset:8px;border-radius:var(--r-md)}
.cs-ipad-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 40px 50px rgba(0,0,0,.45))}
.cs-ipad-screen{position:absolute;left:6.0327%;top:7.1175%;width:87.9327%;height:85.7175%;overflow:hidden;
  border-radius:2.1%/2.8%;background:#020617}
.cs-ipad-screen video{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cs-finger{position:absolute;left:0;top:0;width:9%;aspect-ratio:1;margin:-4.5% 0 0 -4.5%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.55),rgba(255,255,255,.28) 60%,rgba(255,255,255,.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 2px 10px rgba(0,0,0,.35);
  opacity:0;translate:var(--fx,0) var(--fy,0);scale:1.3;
  transition:opacity .2s var(--ease-out),scale .2s var(--ease-out);will-change:translate,opacity}
/* pressed: it settles onto the glass; let go: it lifts (grows a little) and fades where it was */
.cs-finger.is-down{opacity:1;scale:1}
@media (prefers-reduced-motion:reduce){.cs-ipad-screen{display:none}}

/* ── headers of sections 3 and 4: the headline left, one paragraph right ── */
.cs-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,90px);align-items:start}
.cs-head .h-xl{margin-top:20px}
.cs-text{font:500 clamp(19px,1.9vw,28px)/1.4 var(--font);letter-spacing:-.02em;padding-top:clamp(28px,3vw,40px)}
.panel-light .cs-text{color:var(--navy)}

/* ── 3 · the challenge: numbered rows ── */
.cs-list{list-style:none;margin:clamp(48px,6vw,96px) 0 0 auto;padding:0;max-width:calc(52.4% + 20px)}
.cs-list li{display:grid;grid-template-columns:56px 1fr;column-gap:16px;padding:clamp(18px,1.8vw,26px) 0;border-top:1px solid var(--line-dark-strong)}
.cs-list li:last-child{border-bottom:1px solid var(--line-dark-strong)}
.cs-list b{grid-row:span 2;font:600 13px/1.6 var(--font);color:#0E8F97}
.cs-list h3{font:600 clamp(17px,1.4vw,20px)/1.3 var(--font);letter-spacing:-.02em;color:var(--navy)}
.cs-list p{margin-top:6px;color:var(--muted);font-size:15px;line-height:1.55}

/* ── 4 · the impact: cards on navy, the first one full width ── */
.cs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(48px,6vw,96px)}
.cs-card{padding:clamp(24px,2.4vw,36px);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px var(--line-strong)}
.cs-card.cs-wide{grid-column:1 / -1}
.cs-card h3{position:relative;padding-top:22px;font:600 clamp(18px,1.5vw,22px)/1.25 var(--font);letter-spacing:-.02em;color:var(--white)}
.cs-card h3::before{content:"";position:absolute;left:0;top:0;width:28px;height:3px;border-radius:2px;background:var(--cyan)}
.cs-card p{margin-top:10px;color:var(--slate);font-size:15px;line-height:1.55;max-width:46ch}

/* ── 5 · how it came together: the work left, the brand right ── */
.cs-build{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,90px);margin-top:clamp(48px,6vw,90px)}
.cs-work > div{padding:clamp(16px,1.6vw,22px) 0;border-top:1px solid var(--line-dark-strong)}
.cs-work dt,.cs-label{font:600 11px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cs-work dd{margin-top:12px;font:500 16px/1.5 var(--font);color:var(--navy)}
.cs-work dd.cs-big{font:500 clamp(30px,3.2vw,44px)/1.1 var(--font);letter-spacing:-.03em}
.cs-work ul{margin:0;padding-left:18px}
.cs-work li + li{margin-top:6px}
.cs-label{margin-bottom:16px}
.cs-label + *{margin-bottom:clamp(36px,4vw,56px)}
.cs-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.cs-swatches div{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/5;padding:14px;border-radius:var(--r-md);background:var(--c);color:var(--white)}
.cs-swatches div.is-light{color:var(--navy);box-shadow:inset 0 0 0 1px var(--line-dark-strong)}
.cs-swatches b{font:600 14px/1.2 var(--font)}
.cs-swatches span{margin-top:4px;font:500 12px/1 var(--font);opacity:.7}
.cs-type{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cs-type div{display:flex;flex-direction:column;padding:clamp(18px,1.8vw,24px);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line-dark-strong)}
.cs-aa{font:600 clamp(44px,4.4vw,64px)/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;letter-spacing:-.03em;color:var(--navy)}
/* the client's own wordmark (the SAM TRAVEL lettering from their hero), as a picture the same height as "Aa" */
.cs-wm{display:block;width:100%;max-width:340px;height:clamp(44px,4.4vw,64px);object-fit:contain;object-position:left center}
.cs-aa-hy{font-family:"SF Armenian",-apple-system,BlinkMacSystemFont,"Noto Sans Armenian",sans-serif}
.cs-type span{margin-top:18px;font:600 15px/1.3 var(--font);color:var(--navy)}
.cs-type small{margin-top:4px;font-size:13px;color:var(--muted)}

/* tablets and phones: one column everywhere */
@media (max-width:900px){
  .cs-glance-in,.cs-head,.cs-build{grid-template-columns:1fr}
  .cs-shots{order:-1}
  .cs-text{padding-top:0}
  .cs-list{max-width:none;margin-left:0}
}
@media (max-width:600px){
  .cs-cards,.cs-type{grid-template-columns:1fr}
  .cs-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-swatches div{aspect-ratio:auto;min-height:96px}
}


/* ── three phones instead of the MacBook (an app made for the phone; case.js → [data-phones]) ──
   Each phone is a dark frame with the screenshot inside; the script gives every phone a place (--p: -1 left, 0 front,
   1 right; --a how far from the front) and the CSS turns it into position, size, tilt and dimming. Only transform and
   opacity move. They never move by themselves: a click or a sideways swipe moves them (touch-action keeps the page's
   own up-and-down scrolling working over them). */
.cs-phones{position:relative;height:clamp(480px,49vw,700px);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.cs-phones:active{cursor:grabbing}
/* each phone is an iPhone 15 Pro drawn to Apple's proportions (2026-10-19): body 70.6 × 146.6 mm, a natural titanium
   frame (--w × .013) that catches light at its edges, a black border (--w × .024), a screen of 0.462 with 14% corners,
   the Dynamic Island at its real size and place, the Action button and volume buttons on the left, the side button
   on the right (.cs-ph-l / .cs-ph-r) and a faint sheen on the glass (.cs-ph-glass). All sizes follow --w. */
.cs-ph{--p:0;--w:clamp(190px,18vw,280px);position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:70.6/146.6;margin:0;
  padding:calc(var(--w) * .013);border-radius:calc(var(--w) * .165);cursor:pointer;
  background:
    linear-gradient(90deg,rgba(255,255,255,.5),transparent 2.5%,transparent 97.5%,rgba(255,255,255,.4)),
    linear-gradient(180deg,rgba(255,255,255,.45),transparent 1.4%,transparent 98.6%,rgba(0,0,0,.25)),
    linear-gradient(160deg,#e9e5de 0%,#b6b1a9 14%,#7d7972 32%,#aca79f 52%,#706c66 72%,#d2cdc5 90%,#918d86 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 0 1px rgba(0,0,0,.6),0 18px 30px -18px rgba(0,0,0,.6),0 50px 90px -40px rgba(0,0,0,.9);
  transform:translate(calc(-50% + var(--p) * 72%),-50%) scale(calc(1 - .16 * var(--a,0))) rotate(calc(var(--p) * 5deg));
  z-index:calc(3 - var(--a,0));transition:transform .9s var(--ease-out)}
.cs-ph.is-front{cursor:default}
.cs-ph::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:#05050a;pointer-events:none;
  opacity:calc(.5 * var(--a,0));transition:opacity .9s var(--ease)}
/* the Dynamic Island: 126 × 37 pt on a 393 pt screen, 11 pt from its top; the camera at its right end */
.cs-ph::after{content:"";position:absolute;z-index:1;left:50%;top:calc(var(--w) * .063);width:calc(var(--w) * .297);height:calc(var(--w) * .087);
  transform:translateX(-50%);border-radius:999px;
  background:radial-gradient(circle at 82% 50%,#2a3247 0,#0d1019 calc(var(--w) * .012),#000 calc(var(--w) * .017))}
.cs-ph img{display:block;box-sizing:border-box;width:100%;height:100%;object-fit:cover;object-position:top;
  border:calc(var(--w) * .024) solid #050506;border-radius:calc(var(--w) * .152);background:#050506}
.cs-ph-glass{position:absolute;z-index:1;inset:calc(var(--w) * .037);border-radius:calc(var(--w) * .128);pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 30%,transparent 46%)}
/* buttons, standing out of the frame: Action (left, top), volume up and down (left), side button (right) */
.cs-ph-l,.cs-ph-r{position:absolute;width:calc(var(--w) * .012);border-radius:calc(var(--w) * .006);
  background:linear-gradient(90deg,#6c6862,#dcd7cf 45%,#8b877f)}
.cs-ph-l{left:calc(var(--w) * -.008);top:calc(var(--w) * .439);height:calc(var(--w) * .085)}
.cs-ph-l::before,.cs-ph-l::after{content:"";position:absolute;left:0;width:100%;height:calc(var(--w) * .156);border-radius:inherit;background:inherit}
.cs-ph-l::before{top:calc(var(--w) * .227)}
.cs-ph-l::after{top:calc(var(--w) * .425)}
.cs-ph-r{right:calc(var(--w) * -.008);top:calc(var(--w) * .793);height:calc(var(--w) * .227)}
/* the controls under the phones: two round arrows and one dot per screen; the front screen's dot is a cyan bar */
.cs-ph-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(4px,1vw,14px)}
.cs-ph-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--cloud);box-shadow:inset 0 0 0 1px var(--line-strong);transition:box-shadow .3s,color .3s,background .3s}
.cs-ph-arrow svg{width:18px;height:18px}
.cs-ph-arrow:hover,.cs-ph-arrow:focus-visible{background:var(--cyan);color:var(--navy);box-shadow:none;outline:none}
.cs-ph-dots{display:flex;align-items:center;gap:8px}
.cs-ph-dots button{width:8px;height:8px;padding:0;border-radius:999px;background:var(--line-strong);transition:width .4s var(--ease),background .4s var(--ease)}
.cs-ph-dots button[aria-current="true"]{width:26px;background:var(--cyan)}
@media (max-width:600px){.cs-phones{height:clamp(400px,104vw,500px)}.cs-ph{--w:clamp(150px,41vw,195px)}}
@media (prefers-reduced-motion:reduce){.cs-ph,.cs-ph::before{transition:none}}

/* the typography tiles: a fifth, full-width tile for a wordmark set in type (Travel Expert: Poppins, "Expert" in gold) */
.cs-type-wide{grid-column:1 / -1}
.cs-te-mark{font:700 clamp(26px,2.6vw,36px)/1.1 Poppins,var(--font);letter-spacing:.14em;text-transform:uppercase;color:#182420}
.cs-te-mark i{font-style:normal;color:#A66B00}
/* Havn's logo, as on havnbnb.com (light theme): house icon 26px beside 18px Inter Bold, tight tracking, a blue "n" */
.cs-havn-mark{display:flex;align-items:center;gap:.44em;font:700 clamp(30px,3vw,42px)/1 Inter,var(--font);letter-spacing:-.025em;color:#0F172A}
.cs-havn-mark svg{flex:none;width:1.44em;height:1.44em;color:#1F43F5}
.cs-havn-mark em{font-style:normal}
.cs-havn-mark i{font-style:normal;color:#1F43F5}

/* ── the smoke reveal (Ignite, 2026-10-19): a section a few screens tall whose inner part stays pinned while it
   scrolls; case.js → [data-smoke] draws the smoke on the canvas and sets --p from 0 (all smoke) to 1 (clear).
   The MacBook rises a little and comes out of the dark (a navy veil over it fades), the title fades early. ── */
.cs-smoke{--p:0;position:relative;height:300vh;background:var(--navy)}
.cs-smoke-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.cs-smoke-mac{position:relative;width:min(1040px,88vw);transform:translateY(calc((1 - var(--p)) * 4%)) scale(calc(.94 + .06 * var(--p)))}
.cs-smoke-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side,rgba(28,28,40,.75),var(--navy) 140%);
  opacity:calc(1 - var(--p) * 1.25)}
.cs-smoke-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cs-smoke-title{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% - var(--p) * 120px));text-align:center;
  pointer-events:none;opacity:clamp(0,calc(1 - var(--p) * 3.2),1)}
.cs-smoke-title .h-xl{margin-top:16px;color:var(--white);text-shadow:0 2px 40px rgba(28,28,40,.6)}
.cs-smoke-hint{position:absolute;left:50%;bottom:clamp(24px,5vh,48px);transform:translateX(-50%);font:500 13px/1 var(--font);
  letter-spacing:.18em;text-transform:uppercase;color:var(--cloud);opacity:clamp(0,calc(.8 - var(--p) * 6),.8);white-space:nowrap}
.cs-mbp-screen.is-dark{background:#0f1115}
@media (prefers-reduced-motion:reduce){
  .cs-smoke{height:auto;padding:clamp(80px,10vw,140px) 0}
  .cs-smoke-pin{position:static;height:auto;display:grid;gap:40px}
  .cs-smoke-mac{transform:none}
  .cs-smoke-veil,.cs-smoke-canvas,.cs-smoke-hint{display:none}
  .cs-smoke-title{position:static;transform:none;opacity:1;order:-1}
}

/* one phone standing still (Ignite's "At a glance"): the same iPhone drawing as Travel Expert's, no carousel */
.cs-one-phone{position:relative;height:clamp(500px,48vw,680px)}
.cs-one-phone .cs-ph{--w:clamp(220px,20vw,300px);cursor:default}
@media (max-width:600px){.cs-one-phone{height:clamp(440px,118vw,520px)}.cs-one-phone .cs-ph{--w:clamp(190px,52vw,230px)}}

/* a faint branded background behind a device: the client's logo repeated as a pattern (--brand-pattern, a tile of many
   upright logos in a brick pattern, shown at half size; set per client below), fading out towards the edges so it never reads as a hard box. Used on Ignite's two
   MacBooks. Static. */
.cs-brand-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--brand-pattern) repeat center / 320px auto;opacity:.08;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 25%,transparent 100%)}
/* each client's tile (the address is counted from this stylesheet, so it works on the ru/ and hy/ pages too) */
.cs-brand-ignite{--brand-pattern:url(../img/work/ignite/pattern.png)}
.cs-admin-stage{position:relative}
.cs-admin-stage > :not(.cs-brand-bg){position:relative;z-index:1}
/* in "How it works" the MacBook sits on the left, so the pattern is centred on it and reaches past the page margins */
.cs-brand-bg-left{inset:-14% calc(var(--gutter) * -1);
  -webkit-mask-image:radial-gradient(ellipse 48% 62% at 36% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 48% 62% at 36% 50%,#000 30%,transparent 100%)}
@media (max-width:1000px){.cs-brand-bg-left{-webkit-mask-image:radial-gradient(ellipse 70% 40% at 50% 28%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 70% 40% at 50% 28%,#000 25%,transparent 100%)}}