:root{
  --ink:#161513; --paper:#FAF8F4; --paper-2:#F0ECE3;
  --green:#0B6E3C; --red:#C8202F; --muted:#6B665F; --line:#E1DACB;
  --card:#FFFFFF; --radius:6px; --shadow:0 1px 2px rgba(20,19,17,.04),0 10px 28px -14px rgba(20,19,17,.18);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F4F1E9; --paper:#141311; --paper-2:#1D1B17;
    --green:#39B67A; --red:#E14C51; --muted:#A7A096; --line:#332F27; --card:#1B1916; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px -12px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --ink:#F4F1E9; --paper:#141311; --paper-2:#1D1B17;
  --green:#39B67A; --red:#E14C51; --muted:#A7A096; --line:#332F27; --card:#1B1916; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px -12px rgba(0,0,0,.55);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;line-height:1.55;}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:560;line-height:1.06;margin:0;letter-spacing:-.01em;}
h1{font-weight:520;}
.eyebrow{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}
p{margin:0;color:var(--muted);}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
img{max-width:100%;display:block;}

header{position:sticky;top:0;top:env(safe-area-inset-top,0px);background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:20;}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1080px;margin:0 auto;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:560;font-size:20px;letter-spacing:-.01em;cursor:pointer;}
.brand .mark{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--paper-2);flex:none;box-shadow:var(--shadow);transition:transform .2s ease;}
.brand:hover .mark{transform:rotate(-6deg) scale(1.05);}
nav{display:flex;gap:26px;font-size:14px;font-weight:500;}
nav a{position:relative;padding:4px 2px;cursor:pointer;}
nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--ink);transition:width .25s ease;}
nav a:hover::after{width:100%;}
nav a.active::after{width:100%;background:var(--green);}
.cta-btn{background:var(--ink);color:var(--paper);padding:13px 24px;border-radius:3px;font-size:13.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;cursor:pointer;border:1px solid var(--ink);transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;}
.cta-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.cta-btn.outline{background:transparent;color:var(--ink);}
.menu-toggle{display:none;background:none;border:none;font-size:22px;color:var(--ink);cursor:pointer;}
@media(max-width:780px){
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;padding:12px 24px 20px;border-bottom:1px solid var(--line);gap:14px;}
  nav.open{display:flex;}
  .menu-toggle{display:block;}
}

.page{display:none;}
.page.active{display:block;}

.hero{padding:72px 0 52px;border-bottom:1px solid var(--line);position:relative;}
.hero::before{content:"";position:absolute;top:0;left:0;width:64px;height:4px;background:linear-gradient(90deg,var(--green),var(--red));border-radius:0 0 4px 0;}
.hero .kicker{font-family:'Inter',sans-serif;color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:22px;display:flex;align-items:center;gap:10px;}
.hero .kicker::before{content:"";width:28px;height:1px;background:var(--green);}
.hero h1{font-size:clamp(38px,6vw,64px);max-width:13ch;}
.hero p.lead{max-width:50ch;font-size:18px;line-height:1.65;margin-top:22px;color:var(--muted);}
.hero .actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}
.stats{display:flex;gap:0;border-top:1px solid var(--line);margin-top:44px;overflow-x:auto;}
.stat{flex:1;min-width:140px;padding:22px 4px 4px;border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat b{font-family:'Archivo',sans-serif;font-size:28px;display:block;}
.stat span{font-size:13px;color:var(--muted);}

section{padding:80px 0;border-bottom:1px solid var(--line);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(26px,4vw,38px);max-width:16ch;}
.section-head p{max-width:40ch;}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.grid3>div{background:var(--card);padding:26px 22px;border-radius:var(--radius);transition:transform .18s ease,box-shadow .18s ease;}
.grid3>div:hover{transform:translateY(-3px);box-shadow:var(--shadow);z-index:1;}
@media(max-width:780px){.grid3{grid-template-columns:1fr;}}
.svc h3{font-size:17px;margin-bottom:8px;}
.svc p{font-size:14px;}
.svc .n{font-size:13px;color:var(--green);font-weight:600;margin-bottom:10px;display:block;}

.pack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:900px){.pack-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.pack-grid{grid-template-columns:1fr;}}
.pack{border:1px solid var(--line);background:var(--card);padding:24px 20px;display:flex;flex-direction:column;border-radius:var(--radius);transition:transform .18s ease,box-shadow .18s ease;}
.pack:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.pack.popular{border-color:var(--green);position:relative;box-shadow:var(--shadow);}
.pack.popular::before{content:"Most popular";position:absolute;top:-11px;left:20px;background:var(--green);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;letter-spacing:.02em;border-radius:4px;}
.pack .cur{font-size:13px;color:var(--muted);}
.pack .amt{font-family:'Archivo',sans-serif;font-size:34px;font-weight:900;margin:2px 0 4px;}
.pack .period{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.pack ul{list-style:none;margin:0 0 20px;padding:0;font-size:13.5px;}
.pack li{padding:9px 0;border-top:1px solid var(--line);}
.pack li:first-child{border-top:none;}
.pack .cta-btn{margin-top:auto;text-align:center;}

.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.tab{padding:8px 16px;border:1px solid var(--line);border-radius:20px;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s ease,color .15s ease;}
.tab.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.tab:not(.active):hover{border-color:var(--ink);}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr;}}
.cat-card{border:1px solid var(--line);background:var(--card);overflow:hidden;border-radius:var(--radius);transition:transform .18s ease,box-shadow .18s ease;}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.swatch{height:150px;position:relative;display:flex;align-items:flex-end;padding:14px;color:#fff;}
.swatch span{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em;}
.cat-body{padding:16px 18px 20px;}
.cat-body h3{font-size:15.5px;margin-bottom:6px;}
.cat-body p{font-size:13.5px;}
.cat-note{margin-top:8px;font-size:13.5px;}

.values{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(max-width:700px){.values{grid-template-columns:1fr;}}
.values>div{background:var(--card);padding:22px;border-radius:var(--radius);}
.values h3{font-size:16px;margin-bottom:6px;}
.values p{font-size:14px;}

.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:start;}
@media(max-width:780px){.contact-grid{grid-template-columns:1fr;}}
.ch-row{border-top:1px solid var(--line);padding:14px 0;display:flex;justify-content:space-between;font-size:14.5px;}
.ch-row:first-child{border-top:none;}
.ch-row b{font-weight:600;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;}
.field input,.field textarea,.field select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font-family:inherit;font-size:14px;transition:border-color .15s ease;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--green);}
.field textarea{resize:vertical;min-height:90px;}

footer{padding:36px 0 40px;}
.f-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:20px;}
.f-links{display:flex;gap:18px;font-size:13.5px;flex-wrap:wrap;}
.f-bottom{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;}

/* hero layout + art */
.hero-row{display:flex;align-items:center;gap:40px;}
.hero-copy{flex:1;min-width:0;}
.hero-art{width:230px;flex:none;}
.hero-art svg{width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(20,19,17,.18));}
@media(max-width:820px){.hero-art{display:none;}}

/* entrance + scroll animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero .kicker,.hero h1,.hero .lead,.hero .actions{opacity:0;animation:fadeUp .7s ease forwards;}
.hero .kicker{animation-delay:.02s;}
.hero h1{animation-delay:.1s;}
.hero .lead{animation-delay:.2s;}
.hero .actions{animation-delay:.3s;}
.hero-art{opacity:0;animation:fadeUp .8s ease .25s forwards;}

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
[data-reveal].in{opacity:1;transform:translateY(0);}

.page.active{animation:fadeUp .45s ease both;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important;}
}


/* ---- Lema-style structure ---- */
.topbar{background:var(--ink);color:var(--paper);font-size:12.5px;}
.tb{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;}
.brand .mark{background:#fff;}
.has-sub{position:relative;}
.has-sub .sub{display:none;position:absolute;top:100%;left:-14px;min-width:200px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);padding:8px;border-radius:var(--radius);flex-direction:column;}
.has-sub:hover .sub{display:flex;}
.sub a{padding:9px 12px;font-size:13.5px;}
.sub a::after{display:none;}
.sub a:hover{background:var(--paper-2);}
@media(max-width:780px){.has-sub .sub{display:flex;position:static;border:none;box-shadow:none;padding:4px 0 0 12px;background:none;}}

.slider{position:relative;overflow:hidden;background:#161513;color:#fff;}
.slides{display:flex;transition:transform .6s ease;}
.slide{min-width:100%;padding:110px 24px 120px;background-size:cover;}
.slide>div{max-width:1032px;margin:0 auto;}
.slide h2{font-size:clamp(34px,6vw,60px);max-width:14ch;color:#fff;}
.slide p{color:rgba(255,255,255,.78);max-width:56ch;font-size:17px;margin:18px 0 28px;}
.slide .cta-btn{background:#fff;color:#161513;border-color:#fff;}
.s0{background-image:linear-gradient(120deg,#161513 30%,#0B6E3C);}
.s1{background-image:linear-gradient(120deg,#161513 30%,#8f1521);}
.s2{background-image:linear-gradient(120deg,#161513 30%,#3a352c);}
.arr{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.25);color:#fff;font-size:24px;cursor:pointer;}
.arr.l{left:16px;}.arr.r{right:16px;}
.dots{position:absolute;bottom:24px;left:0;right:0;display:flex;gap:8px;justify-content:center;}
.dots i{width:28px;height:3px;background:rgba(255,255,255,.35);cursor:pointer;}
.dots i.on{background:#fff;}
@media(max-width:600px){.arr{display:none;}.slide{padding:70px 24px 90px;}}

.stabs{margin-bottom:24px;}
.spanel{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center;}
@media(max-width:780px){.spanel{grid-template-columns:1fr;}}
.spanel .vis{height:280px;border-radius:var(--radius);display:flex;align-items:flex-end;padding:20px;color:#fff;font-family:'Fraunces',serif;font-size:26px;}
.spanel h3{font-size:26px;margin-bottom:12px;}
.spanel ul{margin:14px 0 22px;padding-left:18px;color:var(--muted);font-size:14.5px;}
.spanel li{margin-bottom:4px;}

.who{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;}
.who h2{font-size:clamp(26px,4vw,38px);margin-top:12px;}
.who p{font-size:16px;line-height:1.7;}
@media(max-width:780px){.who{grid-template-columns:1fr;gap:20px;}}

.band{background:var(--paper-2);padding:80px 0 60px;}
.quotes>div{display:flex;flex-direction:column;gap:6px;}
.quotes p{font-family:'Fraunces',serif;font-size:18px;color:var(--ink);margin-bottom:10px;}
.quotes span{font-size:13px;color:var(--muted);}

.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.strip div{aspect-ratio:1;border-radius:var(--radius);cursor:pointer;transition:transform .2s ease;}
.strip div:hover{transform:scale(1.04);}
@media(max-width:780px){.strip{grid-template-columns:repeat(3,1fr);}}

.f-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:28px;}
.f-cols .f-links{flex-direction:column;gap:8px;}
.f-cols p{margin:0 0 4px;}
@media(max-width:780px){.f-cols{grid-template-columns:1fr;}}


/* ===== Vibrant layer ===== */
:root{--g1:#12B76A;--g2:#0F766E;--blue:#3B82F6;--violet:#8B5CF6;--coral:#FF5A5F;--pink:#EC4899;}
body{background:linear-gradient(180deg,var(--paper),var(--paper));}
.topbar{background:linear-gradient(90deg,#0B6E3C,#0F766E,#3B82F6);}
.cta-btn{background:linear-gradient(135deg,#0B6E3C,#12B76A);border-color:transparent;color:#fff;box-shadow:0 8px 20px -10px rgba(18,183,106,.8);}
.cta-btn.outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none;}
.cta-btn.ghost{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.5);color:#fff;box-shadow:none;}
.tab.active{background:linear-gradient(135deg,#0B6E3C,#12B76A);border-color:transparent;color:#fff;}
h2 em,h1 em{font-style:italic;background:linear-gradient(90deg,#12B76A,#3B82F6,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.pill{display:inline-block;padding:6px 14px;border-radius:20px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;}

.slider{background:#0A0E17;}
.slider::before,.slider::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 14s ease-in-out infinite alternate;pointer-events:none;}
.slider::before{background:#12B76A;top:-180px;left:-120px;}
.slider::after{background:#8B5CF6;bottom:-220px;right:-100px;animation-delay:-6s;}
@keyframes drift{to{transform:translate(90px,60px) scale(1.15);}}
.s0,.s1,.s2{background-image:none;}
.slide{position:relative;z-index:1;padding:90px 24px 110px;}
.sl{max-width:1032px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;}
.slide h2{font-size:clamp(36px,6vw,66px);max-width:12ch;line-height:1.02;}
.slide p{font-size:18px;}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}
.slide .cta-btn:not(.ghost){background:#fff;color:#0A0E17;}
.art .mock{width:100%;max-width:400px;margin-left:auto;display:block;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));}
.float{animation:floaty 5s ease-in-out infinite;}
@keyframes floaty{50%{transform:translateY(-14px) rotate(1.5deg);}}
@media(max-width:820px){.sl{grid-template-columns:1fr;}.art{display:none;}}

.marq{overflow:hidden;background:var(--ink);color:var(--paper);padding:16px 0;}
.track{display:flex;gap:44px;width:max-content;animation:marq 28s linear infinite;}
.track span{font-family:'Fraunces',serif;font-size:22px;white-space:nowrap;display:flex;align-items:center;gap:44px;}
.track span::after{content:"✦";color:var(--g1);font-size:16px;}
.track span:nth-child(3n+2)::after{color:var(--coral);}
.track span:nth-child(3n)::after{color:var(--blue);}
@keyframes marq{to{transform:translateX(-50%);}}

.spanel .vis{height:320px;align-items:center;justify-content:center;padding:20px;overflow:hidden;}
.spanel .vis .mock{width:100%;max-width:340px;}
.swatch{height:200px;align-items:flex-end;justify-content:flex-start;overflow:hidden;}
.swatch .mock{position:absolute;right:-14px;top:8px;width:78%;filter:drop-shadow(0 12px 18px rgba(0,0,0,.35));transition:transform .35s ease;}
.cat-card:hover .swatch .mock{transform:scale(1.08) rotate(-2deg);}
.swatch span{position:relative;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.35);}

.webband{position:relative;overflow:hidden;background:#0A0E17;color:#fff;padding:90px 0;}
.webband::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:#3B82F6;filter:blur(110px);opacity:.4;right:-120px;top:-100px;}
.webgrid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;}
@media(max-width:820px){.webgrid{grid-template-columns:1fr;}}
.webband h2{font-size:clamp(30px,5vw,48px);color:#fff;margin-bottom:16px;}
.webband p{color:rgba(255,255,255,.75);font-size:17px;}
.checks{list-style:none;padding:0;margin:22px 0;display:grid;gap:10px;}
.checks li{padding-left:30px;position:relative;font-size:15px;}
.checks li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--g1);color:#04210f;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.chips span{padding:8px 14px;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);font-size:13px;font-weight:600;}
.webart .mock{width:100%;max-width:460px;display:block;margin:0 auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));}

.band{background:linear-gradient(135deg,#EAF8F0,#EEF0FF 55%,#FFECEC);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .band{background:#171a22;}}
.quotes>div{border-top:4px solid var(--g1);}
.quotes>div:nth-child(2){border-color:var(--blue);}
.quotes>div:nth-child(3){border-color:var(--coral);}
.svc .n{font-size:15px;}
.grid3>div:nth-child(3n+1) .n,.grid3>div:nth-child(3n+1) h3{color:#0B6E3C;}
.grid3>div:nth-child(3n+2) h3{color:#3B5BDB;}
.grid3>div:nth-child(3n) h3{color:#C8202F;}
.pack{border-top:4px solid var(--g1);}
.pack:nth-child(4n+2){border-top-color:var(--blue);}
.pack:nth-child(4n+3){border-top-color:var(--coral);}
.pack:nth-child(4n){border-top-color:var(--violet);}
.pack .amt{background:linear-gradient(90deg,var(--ink),var(--ink));-webkit-background-clip:text;background-clip:text;}
.values>div{border-left:4px solid var(--g1);}
.values>div:nth-child(2n){border-left-color:var(--blue);}
.values>div:nth-child(3n){border-left-color:var(--coral);}
.strip div{box-shadow:var(--shadow);}

.phero{background:var(--g);color:#fff;padding:70px 0 64px;position:relative;overflow:hidden;}
.phero::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.14);}
.phero h1{font-size:clamp(38px,6vw,64px);position:relative;}
.phero p{color:rgba(255,255,255,.85);font-size:18px;max-width:52ch;margin-top:14px;position:relative;}
.page>.wrap>section:first-child{padding-top:56px;}

.ctaband{background:linear-gradient(120deg,#0B6E3C,#0F766E 45%,#3B82F6);color:#fff;text-align:center;padding:80px 0;}
.ctaband h2{font-size:clamp(28px,5vw,46px);color:#fff;max-width:20ch;margin:0 auto 12px;}
.ctaband p{color:rgba(255,255,255,.85);margin-bottom:26px;}
.ctaband .cta-btn{background:#fff;color:#0A0E17;}
.topbar .tb span:first-child{opacity:.95;}


/* ===== Real images (falls back to illustrated mockups if a file is missing) ===== */
.real{display:none;}
.has-img>.real{display:block;}
.has-img>.mock{display:none;}

/* portfolio cards, services panel, home strip: image fills the tile */
.swatch .real,.spanel .vis .real,.strip .real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.spanel .vis{position:relative;}
.strip div{position:relative;overflow:hidden;}
.cat-card .swatch .real{transition:transform .5s ease;}
.cat-card:hover .swatch .real{transform:scale(1.05);}
/* dark fade so the card label stays readable on top of a photo */
.swatch::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0) 55%);}
.swatch.has-img::after{opacity:1;}

/* hero slider + web band: image sits in place of the mockup */
.art .real,.webart .real{width:100%;max-width:460px;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 30px 50px rgba(0,0,0,.45);}
.art .real{margin-left:auto;}
.webart .real{margin:0 auto;}