/*
Theme Name: ArtPlus – Kuvitellaan hetki v28
Theme URI: https://artplus.fi/
Author: Arto Huhta
Description: ArtPlus – digitaaliset tuotteet, verkkoratkaisut ja luova suunnittelu yhdessä modernissa, helposti muokattavassa WordPress-teemassa.
Version: 28.13.24
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: artplus
*/

:root {
  --ink: #111111;
  --paper: #f4f1e9;
  --pure: #fffdf8;
  --orange: #f26722;
  --line: rgba(17, 17, 17, 0.15);
  --muted: #6d6a64;
  --max: 1500px;
  --pad: clamp(22px, 4vw, 68px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.site-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.mono { font-family: "Space Mono", monospace; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 84px; padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
}

.site-branding { display:flex; align-items:center; min-width:0; }
.custom-logo-link { display:flex; align-items:center; line-height:0; }
.custom-logo { display:block; width:auto; height:auto; max-height:48px; max-width:min(260px,42vw); object-fit:contain; }
.brand { display: inline-flex; align-items: center; gap: 5px; font-size: 24px; font-weight: 800; letter-spacing: -.07em; }
.brand-plus, .brand-o { color: var(--orange); }
.brand-o { display: inline-grid; place-items: center; width: 27px; height: 27px; border: 6px solid currentColor; border-radius: 50%; font-size: 0; margin-left: 1px; }
.nav { display: flex; gap: 34px; font-weight: 600; font-size: 14px; }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px; background: var(--orange); transition: right .25s ease; }
.nav a:hover::after { right: 0; }
.menu-toggle { display: none; border: 0; background: none; padding: 8px; }
.menu-toggle span { width: 24px; height: 2px; display: block; background: var(--ink); margin: 5px; }

.section-grid {
  background-image: linear-gradient(to right, rgba(17,17,17,.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(17,17,17,.055) 1px, transparent 1px);
  background-size: 40px 40px;
}
.hero {
  min-height: calc(100vh - 84px);
  padding: clamp(28px,5vw,70px) var(--pad) 32px;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.35fr .65fr; grid-template-rows: auto 1fr auto;
  gap: 30px;
}
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 42%, transparent 0 120px, rgba(244,241,233,.58) 430px); pointer-events: none; }
.hero-kicker { grid-column: 1 / -1; align-self: start; position: relative; z-index: 2; }
.hero-copy { grid-column: 1 / 3; align-self: center; position: relative; z-index: 2; max-width: 1080px; }
.eyebrow { font-size: clamp(15px,1.3vw,20px); font-weight: 600; margin: 0 0 22px; }
h1 { font-size: clamp(56px, 8.8vw, 146px); line-height: .91; letter-spacing: -.075em; font-weight: 700; max-width: 1220px; margin: 0; }
.scribble-word { position: relative; white-space: nowrap; }
.scribble-word::after { content:""; position:absolute; left:-2%; right:-3%; bottom:3%; height:12px; border-bottom: 3px solid var(--orange); border-radius:50%; transform: rotate(-2deg); }
.hero-intro { margin: 34px 0 0; font-size: clamp(18px,2vw,28px); color: var(--muted); }
.hero-o { grid-column: 3; grid-row: 2; align-self: center; justify-self: center; position: relative; z-index: 3; width: min(24vw, 330px); aspect-ratio: 1; }
.o-ring { position:absolute; inset:0; border: clamp(24px,4vw,54px) solid var(--orange); border-radius:50%; transform: translate(18%, 6%) rotate(4deg); box-shadow: 0 18px 45px rgba(244,90,31,.18); }
.o-note { position:absolute; right:-20%; bottom:1%; transform:rotate(-5deg); }
.hero-foot { grid-column: 1 / -1; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:18px; position:relative; z-index:2; }

.work { padding: 110px var(--pad) 150px; max-width: var(--max); margin:0 auto; }
.section-heading { display:grid; grid-template-columns: 100px minmax(0,1fr) 320px; gap:30px; align-items:end; margin-bottom:70px; }
.section-heading h2 { margin:0; font-size: clamp(40px,6vw,88px); line-height:.94; letter-spacing:-.055em; }
.section-heading p { margin:0; line-height:1.55; color:var(--muted); max-width:300px; }
.section-index { color:var(--orange); align-self:start; }
.project { margin-bottom: 130px; }
.project-visual { display:block; position:relative; overflow:hidden; min-height:620px; background:#d8d4ca; border:1px solid rgba(17,17,17,.12); }
.project-meta { display:flex; justify-content:space-between; gap:30px; padding-top:22px; align-items:flex-end; }
.project-meta h3 { margin:7px 0 0; font-size:clamp(24px,3vw,42px); letter-spacing:-.04em; }
.project-tags { color:var(--muted); font-size:14px; text-align:right; }
.project-offset { width:78%; margin-left:auto; }
.project-wide { width:92%; }
.visual-grid,.sketch-grid { position:absolute; inset:0; background-image:linear-gradient(to right,rgba(17,17,17,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(17,17,17,.08) 1px,transparent 1px); background-size:38px 38px; }
.project-visual-ui { background:#dedbd2; min-height:720px; }
.browser-frame { position:absolute; width:76%; height:72%; left:12%; top:14%; background:var(--pure); border:2px solid var(--ink); box-shadow:24px 28px 0 rgba(17,17,17,.12); transform:rotate(-1.5deg); }
.browser-top { height:42px; border-bottom:2px solid var(--ink); display:flex; gap:7px; align-items:center; padding:0 14px; }
.browser-top i { width:9px;height:9px;border:1px solid var(--ink);border-radius:50%; }
.browser-body { display:grid;grid-template-columns:27% 1fr;height:calc(100% - 42px); }
.mock-sidebar { border-right:2px solid var(--ink); background:repeating-linear-gradient(to bottom,transparent 0 38px,rgba(17,17,17,.08) 39px 40px); }
.mock-main { padding:9%; }
.mock-line { height:16px;background:var(--ink);width:48%;margin-bottom:16px; }.mock-line.wide{height:38px;width:78%;}
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:55px}.mock-cards b{aspect-ratio:1;background:var(--orange);border-radius:50%;}
.process-note{position:absolute;background:var(--paper);border:1px solid var(--ink);padding:8px 10px;}.note-a{left:5%;top:9%;transform:rotate(-5deg)}.note-b{right:6%;bottom:10%;transform:rotate(4deg)}
.floating-o{position:absolute;right:5%;top:8%;font-weight:800;font-size:95px;line-height:1;color:var(--orange);transform:rotate(9deg)}
.project-visual-brand { background:#191919; min-height:650px; }
.paper-sheet { position:absolute; background:var(--paper); border:1px solid #000; box-shadow:0 24px 40px rgba(0,0,0,.35); display:grid; place-items:center; }
.sheet-a { width:42%; height:58%; left:11%; top:18%; transform:rotate(-6deg); }.sheet-a span{font-size:clamp(28px,5vw,72px);font-weight:700;letter-spacing:-.07em}.sheet-b{width:42%;height:62%;right:10%;top:12%;transform:rotate(5deg)}.sheet-b span{font-size:clamp(50px,8vw,120px);line-height:.72;font-weight:800;letter-spacing:-.1em}.sheet-b em{font-style:normal;color:var(--orange)}
.measure-line{position:absolute;color:#fff;font-family:"Space Mono";font-size:10px}.measure-x{left:12%;right:12%;bottom:8%;border-top:1px solid #fff;text-align:center;padding-top:8px}.measure-x::before,.measure-x::after{content:"";position:absolute;top:-5px;width:1px;height:10px;background:#fff}.measure-x::before{left:0}.measure-x::after{right:0}
.hand-circle{position:absolute;width:24%;aspect-ratio:1;border:4px solid var(--orange);border-radius:49% 52% 47% 54%;right:18%;top:23%;transform:rotate(-12deg)}.corner-note{position:absolute;color:#fff;right:3%;top:3%}
.project-visual-system{background:var(--orange);min-height:640px;color:var(--ink);}.system-title{position:absolute;left:6%;top:10%;font-size:clamp(70px,11vw,170px);line-height:.76;font-weight:800;letter-spacing:-.09em}.system-o{position:absolute;right:6%;bottom:8%;font-size:clamp(100px,16vw,240px);font-weight:800;letter-spacing:-.1em;transform:rotate(-7deg)}.system-lines{position:absolute;left:6%;bottom:8%;display:flex;flex-direction:column;gap:7px;font-family:"Space Mono";font-size:11px;text-transform:uppercase}.crosshair{position:absolute;width:60px;height:60px}.crosshair::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--ink)}.crosshair::after{content:"";position:absolute;top:50%;left:0;right:0;border-top:1px solid var(--ink)}.crosshair-a{right:29%;top:15%}.crosshair-b{left:42%;bottom:13%}

.process { padding:130px var(--pad); display:grid;grid-template-columns:1fr 1fr;gap:70px; border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.process-heading{display:block;margin:0}.process-heading h2{margin-top:30px;max-width:500px}.process-copy{align-self:end;max-width:520px;font-size:clamp(20px,2.3vw,33px);line-height:1.28;letter-spacing:-.025em}.process-punch span{color:var(--orange);font-weight:800;font-size:1.25em}.sketch-board{grid-column:1/-1;min-height:570px;position:relative;background:rgba(255,253,248,.6);border:1px solid var(--line);overflow:hidden}.sketch-box{position:absolute;border:3px solid var(--ink)}.box-a{width:28%;height:34%;left:14%;top:21%;transform:rotate(-2deg)}.box-b{width:34%;height:40%;right:16%;bottom:18%;border-color:var(--orange);transform:rotate(1.5deg)}.sketch-arrow{position:absolute;left:47%;top:41%;font-size:90px;transform:rotate(9deg)}.sketch-label{position:absolute;left:17%;bottom:22%;transform:rotate(-6deg)}.sketch-strike{position:absolute;width:33%;left:11%;top:39%;border-top:3px solid var(--orange);transform:rotate(16deg)}.sketch-o{position:absolute;right:24%;top:22%;font-size:100px;font-weight:800;color:var(--orange);transform:rotate(-11deg)}

.about{padding:150px var(--pad);max-width:var(--max);margin:0 auto}.about-top{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:80px}.about-reveal{font-family:"Space Mono";font-size:13px;margin:0}.about-reveal b{color:var(--orange)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.about h2{margin:0;font-size:clamp(64px,10vw,150px);line-height:.86;letter-spacing:-.075em}.about-copy{font-size:clamp(19px,2vw,28px);line-height:1.42;max-width:620px}.about-copy p:first-child{margin-top:0}.factor-line{margin-top:65px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:30px}.factor-line strong{font-size:clamp(30px,5vw,72px);letter-spacing:-.06em;color:var(--orange);white-space:nowrap}

.contact{background:var(--ink);color:var(--paper);padding:80px var(--pad) 38px;min-height:78vh;display:flex;flex-direction:column;justify-content:space-between}.contact .section-index{color:var(--orange)}.contact-copy{align-self:center;width:100%;max-width:var(--max)}.contact-copy p{font-size:clamp(18px,2vw,28px);color:#aaa;margin:0 0 14px}.contact-copy a{display:inline-block;font-size:clamp(60px,10vw,160px);font-weight:700;letter-spacing:-.08em;line-height:.9;position:relative}.contact-o{color:var(--orange);font-size:.34em;position:absolute;right:-.35em;top:-.2em;transform:rotate(8deg)}.contact-meta{display:flex;justify-content:space-between;border-top:1px solid #3c3c3c;padding-top:18px;color:#aaa}

@media (max-width: 900px) {
  .site-header{height:70px}.nav{position:fixed;left:0;right:0;top:70px;background:var(--paper);padding:28px var(--pad);border-bottom:1px solid var(--line);flex-direction:column;transform:translateY(-140%);transition:.3s;z-index:-1}.nav.open{transform:translateY(0)}.menu-toggle{display:block}
  .hero{min-height:calc(100vh - 70px);grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto}.hero-copy{grid-column:1}.hero-o{grid-column:1;grid-row:3;width:180px;justify-self:end;margin-right:8%}.hero-foot{grid-column:1;flex-wrap:wrap}.hero::after{display:none}
  .section-heading{grid-template-columns:55px 1fr}.section-heading p{grid-column:2}.project-offset,.project-wide{width:100%}.project-visual,.project-visual-ui,.project-visual-brand,.project-visual-system{min-height:520px}.project-meta{align-items:flex-start}.project-tags{max-width:180px}
  .process{grid-template-columns:1fr}.sketch-board{grid-column:1;min-height:470px}.about-grid{grid-template-columns:1fr}.factor-line{align-items:flex-start;flex-direction:column}
}
@media (max-width: 560px) {
  :root{--pad:20px}.brand{font-size:21px}.brand-o{width:24px;height:24px;border-width:5px}
  .hero{padding-top:24px;gap:18px}.hero-copy{align-self:start;margin-top:16vh}h1{font-size:clamp(52px,16vw,82px)}.hero-o{width:120px;margin-right:12%}.o-ring{border-width:18px}.hero-foot{justify-content:flex-start;gap:9px 20px}
  .work{padding-top:80px;padding-bottom:90px}.section-heading{margin-bottom:45px}.project{margin-bottom:80px}.project-visual,.project-visual-ui,.project-visual-brand,.project-visual-system{min-height:360px}.browser-frame{width:84%;height:68%;left:8%;top:17%;box-shadow:10px 12px 0 rgba(17,17,17,.12)}.floating-o{font-size:58px}.mock-cards{gap:7px;margin-top:30px}.sheet-a{width:47%;height:54%;left:6%}.sheet-b{width:47%;height:60%;right:5%}.project-meta{display:block}.project-tags{text-align:left;margin-top:10px;max-width:none}.system-lines{display:none}
  .process{padding-top:85px;padding-bottom:85px;gap:40px}.sketch-board{min-height:320px}.sketch-arrow{font-size:52px}.sketch-o{font-size:60px}.about{padding-top:90px;padding-bottom:90px}.about-top{margin-bottom:50px}.about-reveal{font-size:10px}.factor-line{margin-top:40px}.contact{min-height:70vh;padding-top:45px}.contact-copy a{font-size:clamp(54px,15vw,90px)}.contact-meta{gap:12px;flex-wrap:wrap}
}

/* WordPress integration */
.nav-list { display:flex; gap:34px; margin:0; padding:0; list-style:none; }
.nav-list li { margin:0; padding:0; }
.nav-list a { position:relative; }
.nav-list a::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:var(--orange); transition:right .25s ease; }
.nav-list a:hover::after { right:0; }
.default-content { width:min(900px, calc(100% - (2 * var(--pad)))); min-height:60vh; margin:0 auto; padding:110px 0; }
.default-content h1 { font-size:clamp(46px,8vw,100px); line-height:.92; letter-spacing:-.06em; }
.default-content a { text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:.18em; }
@media (max-width:900px) {
  .nav-list { flex-direction:column; gap:22px; }
}

/* Portfolio Manager integration */
.project-meta h3 a{color:inherit;text-decoration:none}.project-meta h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}.project-visual-image{background:#dedbd2}.project-visual.has-featured-image{min-height:clamp(420px,58vw,780px);background:#111}.project-featured-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.project-visual.has-featured-image:hover .project-featured-image{transform:scale(1.018)}.project-image-o{position:absolute;right:4%;bottom:3%;font-weight:800;font-size:clamp(50px,8vw,120px);line-height:1;color:var(--orange);letter-spacing:-.08em;text-shadow:0 1px 18px rgba(0,0,0,.18)}
.case-page{padding-top:0}.case-hero{min-height:75vh;padding-top:150px;padding-bottom:60px;align-content:end;position:relative}.case-back{grid-column:1/3;align-self:start}.case-back a{color:inherit;text-decoration:none}.case-title{grid-column:2/11;max-width:1100px}.case-title h1{margin:8px 0 20px;font-size:clamp(60px,10vw,150px);line-height:.82;letter-spacing:-.075em}.case-lead{max-width:780px;font-size:clamp(20px,2.2vw,32px);line-height:1.25;color:var(--muted)}.case-o{grid-column:11/13;align-self:end;justify-self:end;font-size:clamp(78px,11vw,165px);font-weight:800;line-height:.8;color:var(--orange);letter-spacing:-.1em;transform:rotate(-7deg)}.case-facts{grid-column:2/13;display:flex;gap:24px;flex-wrap:wrap;padding-top:46px;border-top:1px solid rgba(17,17,17,.16);margin-top:55px;text-transform:uppercase;font-size:11px}.case-cover{margin:0;width:100%;background:#e8e4da}.case-cover img{display:block;width:100%;height:auto;max-height:88vh;object-fit:cover}.case-content{width:min(900px,calc(100% - 48px));margin:0 auto;padding:110px 0 130px;font-size:clamp(18px,1.6vw,23px);line-height:1.7}.case-content>*{max-width:760px;margin-left:auto;margin-right:auto}.case-content>.alignwide{max-width:1180px;width:calc(100% + 280px);margin-left:-140px}.case-content>.alignfull{max-width:none;width:100vw;margin-left:calc(50% - 50vw)}.case-content h2{font-size:clamp(38px,5vw,72px);line-height:.95;letter-spacing:-.055em;margin-top:100px}.case-content h3{font-size:clamp(26px,3vw,42px);letter-spacing:-.04em;margin-top:70px}.case-content img{height:auto}.case-content figure{margin-top:70px;margin-bottom:70px}.case-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;border-top:1px solid rgba(17,17,17,.16);margin:0 4vw;padding:50px 0 70px}.case-footer a{color:inherit;text-decoration:none}.case-footer-o{font-size:clamp(70px,10vw,150px);font-weight:800;line-height:.75;color:var(--orange);letter-spacing:-.1em}.archive-heading{min-height:60vh;padding-top:150px;padding-bottom:55px;align-content:end}.archive-heading>div:nth-child(1){grid-column:1/4;align-self:start}.archive-heading>div:nth-child(2){grid-column:2/10}.archive-heading h1{font-size:clamp(90px,16vw,230px);line-height:.72;letter-spacing:-.09em;margin:0}.archive-o{grid-column:10/13;justify-self:end;font-size:clamp(90px,13vw,190px);font-weight:800;color:var(--orange);transform:rotate(-7deg)}.archive-work{padding-top:70px}
@media(max-width:900px){.case-title{grid-column:1/12}.case-o{grid-column:12/13}.case-facts{grid-column:1/13}.case-content>.alignwide{width:100%;margin-left:auto}.archive-heading>div:nth-child(2){grid-column:1/10}}
@media(max-width:640px){.case-hero{padding-top:115px;min-height:68vh}.case-back{grid-column:1/13}.case-title{grid-column:1/13;margin-top:70px}.case-title h1{font-size:clamp(54px,18vw,92px)}.case-o{position:absolute;right:5vw;top:125px;font-size:68px}.case-facts{gap:10px 18px;margin-top:35px;padding-top:25px}.case-content{width:calc(100% - 36px);padding:75px 0 95px}.case-content h2{margin-top:70px}.case-footer{margin:0 18px;padding-bottom:45px}.archive-heading{min-height:52vh}.archive-heading>div:nth-child(1){grid-column:1/13}.archive-heading>div:nth-child(2){grid-column:1/11}.archive-o{grid-column:11/13}.project-visual.has-featured-image{min-height:360px}}

@media (max-width:560px){.custom-logo{max-height:38px;max-width:190px}}

/* ART + O v4 — simplified front page */
.home-hero{min-height:68vh;padding:clamp(70px,9vw,140px) var(--pad);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,.4fr);gap:50px;align-items:center;overflow:hidden}.home-hero-copy{max-width:1120px}.home-kicker{display:block;margin-bottom:30px;color:var(--orange)}.home-hero h1{font-size:clamp(58px,9vw,138px);max-width:1100px}.home-hero-copy>p{font-size:clamp(19px,2vw,29px);line-height:1.4;max-width:760px;color:var(--muted);margin:34px 0 0}.home-o{font-size:clamp(100px,14vw,230px);font-weight:800;letter-spacing:-.12em;color:var(--orange);transform:rotate(-9deg);justify-self:end}.home-skills,.home-work{max-width:var(--max);margin:0 auto;padding:110px var(--pad)}.home-skills{border-bottom:1px solid var(--line)}.simple-section-head{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:30px;align-items:end;margin-bottom:52px}.simple-section-head>span{color:var(--orange)}.simple-section-head h2{font-size:clamp(42px,6vw,84px);letter-spacing:-.055em;line-height:.95;margin:0}.simple-section-head>a{font-weight:700;border-bottom:1px solid currentColor;padding-bottom:3px}.skill-link-grid{border-top:1px solid var(--line)}.skill-link{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding:25px 4px;font-size:clamp(25px,3.2vw,48px);font-weight:600;letter-spacing:-.035em;transition:padding .2s ease,color .2s ease}.skill-link b{font-size:.65em;color:var(--orange)}.skill-link:hover{padding-left:14px;color:var(--orange)}.home-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,46px)}.home-project-image{display:block;aspect-ratio:4/3;background:#ddd8cc;overflow:hidden;position:relative}.home-project-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.home-project-image:hover img{transform:scale(1.025)}.home-project-image>span{position:absolute;right:7%;bottom:4%;font-size:clamp(70px,9vw,130px);font-weight:800;color:var(--orange);transform:rotate(-8deg)}.home-project-meta{padding-top:17px}.home-project-meta .mono{color:var(--muted)}.home-project-meta h3{font-size:clamp(24px,2.5vw,38px);letter-spacing:-.04em;margin:7px 0 0}.home-about{max-width:var(--max);margin:0 auto;padding:100px var(--pad) 130px;border-top:1px solid var(--line);display:grid;grid-template-columns:160px minmax(0,1fr);gap:30px}.home-about>span{color:var(--orange)}.home-about>div{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:70px}.home-about h2{font-size:clamp(54px,8vw,118px);line-height:.9;letter-spacing:-.07em;margin:0}.home-about p{font-size:clamp(20px,2.2vw,31px);line-height:1.45;margin:4px 0 0;max-width:700px}.home-contact{min-height:62vh}.home-empty{color:var(--muted)}.service-page{max-width:var(--max);margin:0 auto;padding:clamp(70px,8vw,130px) var(--pad) 140px}.page-intro{padding-bottom:46px;border-bottom:1px solid var(--line);margin-bottom:55px}.page-intro .mono{color:var(--orange)}.page-intro h1{font-size:clamp(58px,9vw,130px);max-width:1100px;margin-top:20px}.page-body{max-width:1250px}.page-body>p{max-width:780px;font-size:clamp(18px,1.8vw,25px);line-height:1.55}.custom-logo-link{display:flex;align-items:center}.custom-logo{display:block;width:auto;max-width:min(260px,40vw);max-height:52px;object-fit:contain}@media(max-width:900px){.home-hero{grid-template-columns:1fr;min-height:auto;padding-top:80px}.home-o{justify-self:start;font-size:120px}.simple-section-head{grid-template-columns:1fr}.simple-section-head>span,.simple-section-head>a{grid-column:1}.home-project-grid{grid-template-columns:1fr 1fr}.home-about{grid-template-columns:1fr}.home-about>div{grid-template-columns:1fr}.custom-logo{max-height:42px}}@media(max-width:560px){.home-hero{padding-top:60px;padding-bottom:65px}.home-hero h1{font-size:clamp(52px,16vw,78px)}.home-skills,.home-work{padding-top:75px;padding-bottom:80px}.skill-link{padding:20px 2px}.home-project-grid{grid-template-columns:1fr}.home-about{padding-top:75px;padding-bottom:90px}.home-about>div{gap:30px}.service-page{padding-top:70px}.page-intro{margin-bottom:38px}}


/* ART + O v5 — living grid hero */
.home-hero.section-grid {
  --grid-x: 0px;
  --grid-y: 0px;
  --hero-o-y: 0px;
  --hero-o-rotate: 0deg;
  background-position: var(--grid-x) var(--grid-y), var(--grid-x) var(--grid-y);
  will-change: background-position;
}
.home-hero .home-hero-copy { transform: translate3d(0,var(--hero-copy-y,0),0); will-change: transform; }
.home-hero .home-o { transform: translate3d(0,var(--hero-o-y),0) rotate(var(--hero-o-rotate)); will-change: transform; }
.home-hero .scribble-word::after { transform-origin: left center; animation: artplus-draw-line .9s cubic-bezier(.22,.8,.3,1) .25s both; }
@keyframes artplus-draw-line { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Theme admin / maintenance */
.artplus-maintenance { min-height:100vh; display:grid; place-items:center; padding:32px; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; }
.artplus-maintenance-card { width:min(760px,100%); padding:clamp(32px,7vw,76px); border:1px solid var(--line); background-image:linear-gradient(to right,rgba(17,17,17,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(17,17,17,.055) 1px,transparent 1px); background-size:40px 40px; }
.artplus-maintenance-card h1 { font-size:clamp(48px,9vw,110px); margin:.25em 0; }
.artplus-maintenance-card p { font-size:clamp(18px,2vw,25px); max-width:580px; line-height:1.5; }
@media (prefers-reduced-motion: reduce) {
  .home-hero.section-grid { background-position:0 0,0 0 !important; }
  .home-hero .home-hero-copy,.home-hero .home-o { transform:none !important; }
  .home-hero .scribble-word::after { animation:none; }
}

/* ART + O v6 — page builder components */
.artplus-page-builder{overflow:hidden}.apb-section{max-width:var(--max);margin:0 auto;padding:clamp(76px,8vw,130px) var(--pad)}.apb-section-label{display:block;color:var(--orange);margin-bottom:30px}.apb-text{display:grid;grid-template-columns:160px minmax(0,1fr);gap:30px;border-top:1px solid var(--line)}.apb-text-copy{max-width:1080px}.apb-text h2,.apb-image-text h2{font-size:clamp(46px,7vw,105px);line-height:.92;letter-spacing:-.06em;margin:0 0 32px}.apb-richtext,.apb-image-text-copy>p{font-size:clamp(18px,1.8vw,25px);line-height:1.6}.apb-text-narrow .apb-text-copy{max-width:780px}.apb-text-wide .apb-text-copy{max-width:1180px}.apb-project-grid{display:grid;gap:clamp(22px,3vw,46px)}.apb-cols-1{grid-template-columns:1fr}.apb-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.apb-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.apb-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.apb-references{border-top:1px solid var(--line)}.apb-reference-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}.apb-reference{min-height:150px;display:grid;place-items:center;background:var(--paper);padding:28px}.apb-reference a{display:grid;place-items:center;width:100%;height:100%}.apb-reference img{max-width:170px;max-height:82px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);transition:filter .25s ease,transform .25s ease}.apb-reference:hover img{filter:grayscale(0);transform:scale(1.03)}.apb-reference-name{font-weight:700;text-align:center}.apb-image-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center;border-top:1px solid var(--line)}.apb-image-text-media img{display:block;width:100%;height:auto}.apb-layout-image-right .apb-image-text-media{order:2}.apb-image-text-copy>.mono{color:var(--orange);display:block;margin-bottom:24px}.apb-big-type{max-width:none;padding:clamp(80px,10vw,160px) var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.apb-big-type>span{color:var(--orange)}.apb-big-type p{font-size:clamp(60px,11vw,170px);font-weight:700;line-height:.82;letter-spacing:-.075em;max-width:1300px;margin:28px 0 0}.apb-big-o{display:inline-block;color:var(--orange);transform:rotate(-7deg);margin-left:.08em}.apb-hero.home-hero{min-height:calc(100vh - 84px)}.artplus-page-builder>.home-contact{max-width:none}.artplus-page-builder .home-work,.artplus-page-builder .home-skills{max-width:var(--max)}
@media(max-width:900px){.apb-text{grid-template-columns:1fr}.apb-image-text{grid-template-columns:1fr}.apb-layout-image-right .apb-image-text-media{order:0}.apb-cols-4,.apb-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.apb-section{padding-top:70px;padding-bottom:75px}.apb-cols-4,.apb-cols-3,.apb-cols-2{grid-template-columns:1fr}.apb-reference-grid.apb-cols-4,.apb-reference-grid.apb-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}.apb-reference{min-height:120px}}


/* ART + O v6.2 — custom hero artwork + per-section O! Factor */
.apb-hero,.apb-section,.home-contact{position:relative;isolation:isolate}
.apb-hero-background{position:absolute;inset:0;z-index:-2;background-repeat:no-repeat;pointer-events:none;transform:translate3d(var(--hero-bg-x,0),var(--hero-bg-y,0),0) scale(1.015);transform-origin:center center;will-change:transform}
.apb-hero .home-hero-copy,.apb-hero .home-o{position:relative;z-index:2}
.apb-o-factor{--wow-lift:0px;--wow-drift:0px;--wow-rotate:0deg;--wow-scale:1;--wow-shadow-x:0px;--wow-shadow-y:0px;--wow-shadow-blur:0px;--wow-shadow-alpha:0;--wow-stand-rotate-x:78deg;--wow-stand-rise:0px;--wow-perspective:900px;--wow-shadow-scale-x:.35;--wow-shadow-scale-y:.18;position:absolute;z-index:4;display:block;pointer-events:none;line-height:0;transform-origin:center center;will-change:transform,filter}
.apb-o-factor img{position:relative;z-index:2;display:block;width:100%;height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(var(--wow-shadow-x) var(--wow-shadow-y) var(--wow-shadow-blur) rgba(17,17,17,var(--wow-shadow-alpha)));transition:filter .06s linear}
.apb-o-factor--small{width:clamp(72px,8vw,135px)}
.apb-o-factor--medium{width:clamp(105px,12vw,210px)}
.apb-o-factor--large{width:clamp(150px,18vw,330px)}
.apb-o-factor--top-right{top:8%;right:4%}.apb-o-factor--center-right{top:50%;right:3%;translate:0 -50%}.apb-o-factor--bottom-right{right:4%;bottom:7%}.apb-o-factor--top-left{top:8%;left:4%}.apb-o-factor--bottom-left{left:4%;bottom:7%}
.apb-o-factor--lift{transform:translate3d(0,var(--wow-lift),0) scale(var(--wow-scale))}
.apb-o-factor--drift{transform:translate3d(var(--wow-drift),var(--wow-lift),0) scale(var(--wow-scale))}
.apb-o-factor--rotate{transform:translate3d(0,calc(var(--wow-lift) * .45),0) rotate(var(--wow-rotate)) scale(var(--wow-scale))}
.apb-o-factor--stand{perspective:var(--wow-perspective);transform-style:preserve-3d;overflow:visible}
.apb-o-factor--stand::after{content:"";position:absolute;z-index:1;left:10%;right:10%;bottom:-2%;height:16%;border-radius:50%;background:rgba(17,17,17,var(--wow-shadow-alpha));filter:blur(var(--wow-shadow-blur));transform:translate3d(var(--wow-shadow-x),var(--wow-shadow-y),0) scaleX(var(--wow-shadow-scale-x)) scaleY(var(--wow-shadow-scale-y));transform-origin:center;will-change:transform,opacity,filter}
.apb-o-factor--stand img{filter:none;transform-origin:50% 100%;transform:translate3d(0,var(--wow-stand-rise),0) rotateX(var(--wow-stand-rotate-x)) scale(var(--wow-scale));backface-visibility:hidden;will-change:transform}
.apb-o-factor--none{transform:none}.apb-o-factor--none img{filter:none}
.home-hero[data-artplus-hero] .apb-hero-background{transform:translate3d(calc(var(--grid-x,0px) * -.35),calc(var(--grid-y,0px) * -.55),0) scale(1.025)}
@media(max-width:900px){.apb-o-factor--large{width:clamp(120px,24vw,220px)}.apb-o-factor--center-right{right:2%}}
@media(max-width:640px){.apb-o-factor--small{width:72px}.apb-o-factor--medium{width:100px}.apb-o-factor--large{width:135px}.apb-o-factor--top-right,.apb-o-factor--bottom-right{right:14px}.apb-o-factor--top-left,.apb-o-factor--bottom-left{left:14px}}
@media(prefers-reduced-motion:reduce){.apb-o-factor,.apb-hero-background{transform:none!important}.apb-o-factor img{filter:none!important;transform:none!important}.apb-o-factor--stand::after{display:none!important}}

/* ArtPlus editable footer */
.site-footer{padding:72px var(--pad) 24px;border-top:1px solid var(--line);background:var(--ink);color:var(--pure)}
.site-footer-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:40px;padding-bottom:70px}
.footer-brand{font-size:30px;font-weight:800;letter-spacing:-.06em;color:var(--pure)}
.site-footer .custom-logo{max-height:44px;filter:brightness(0) invert(1)}
.site-footer-copy{max-width:620px}.footer-tagline{font-size:clamp(28px,4vw,58px);line-height:.98;letter-spacing:-.05em;margin:0 0 24px}.footer-note{color:#b9b9b9;margin:0 0 22px;line-height:1.5}.footer-email{display:inline-block;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:4px}.footer-nav{justify-self:end}.footer-menu{list-style:none;margin:0;padding:0;display:grid;gap:10px}.footer-menu a{color:var(--pure)}.site-footer-bottom{max-width:var(--max);margin:0 auto;border-top:1px solid rgba(255,255,255,.2);padding-top:16px;display:flex;justify-content:space-between;gap:20px;color:#aaa}
@media(max-width:800px){.site-footer-grid{grid-template-columns:1fr;gap:30px;padding-bottom:45px}.footer-nav{justify-self:start}.site-footer-bottom{flex-direction:column}}


/* Editable Header / Footer areas */
.site-header-editable { display:flex; align-items:center; gap:1rem; flex:1; }
.site-header-editable .widget { margin:0; }
.site-header-editable .widget_block p { margin:0; }
.site-footer-editable { width:100%; }
.site-footer-editable > .widget { width:100%; }
.site-footer-editable .widget_block { margin:0; }
.site-footer-editable .wp-block-columns { margin-bottom:0; }
@media (max-width: 800px) {
  .site-header-editable { display:block; width:100%; }
}

/* ---------------------------------------------------------
 * Clear editable site sections
 * --------------------------------------------------------- */
.site-header-editable:empty,
.site-footer-editable:empty { display:none; }
.artplus-contact-area { max-width:none; padding:clamp(76px,9vw,130px) var(--pad); }
.artplus-contact-editable { max-width:var(--max); margin:0 auto; }
.artplus-contact-editable .widget { margin:0; }
.artplus-contact-editable .widget_block { margin:0; }
.artplus-contact-editable h1,
.artplus-contact-editable h2,
.artplus-contact-editable h3 { letter-spacing:-.055em; }
.artplus-contact-editable .wp-block-heading { font-size:clamp(52px,8vw,120px); line-height:.9; margin:0 0 24px; }
.artplus-contact-editable p { font-size:clamp(20px,2.2vw,31px); line-height:1.4; }
.artplus-contact-editable .wp-block-button__link { background:var(--orange); color:#fff; border-radius:0; padding:.8em 1.1em; }
.artplus-contact-editable > .widget { max-width:var(--max); margin-left:auto; margin-right:auto; }
.artplus-builder-intro { background:#f0f0f1; border-left:4px solid #f45a1f; padding:14px 16px; margin:0 0 18px; font-size:14px; line-height:1.55; }
.artplus-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; }
.artplus-guide-card { display:flex; flex-direction:column; gap:8px; padding:22px; border:1px solid #dcdcde; background:#fff; color:#1d2327; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.artplus-guide-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); color:#1d2327; }
.artplus-guide-card strong { font-size:16px; }
.artplus-guide-card span { color:#646970; line-height:1.5; }
.artplus-guide-card em { margin-top:auto; padding-top:10px; font-style:normal; font-weight:600; color:#f45a1f; }
@media(max-width:700px){.artplus-guide-grid{grid-template-columns:1fr}}

/* =========================================================
   ArtPlus v8 — visual system based on supplied desktop/mobile mockups
   ========================================================= */
:root{
  --ap-grid:#eef2f1;
  --ap-panel:#e8eeee;
  --ap-border:#b9c8c8;
  --ap-orange:#f26722;
  --ap-black:#080909;
}
body{background:#fff;color:var(--ap-black)}
.site-header{
  height:66px;padding:0 44px;background:rgba(250,252,252,.97);border-bottom:1px solid #d8dfdf;
  box-shadow:0 6px 14px rgba(0,0,0,.08);backdrop-filter:none;gap:20px
}
.site-branding{flex:0 0 auto}
.custom-logo{max-height:48px;max-width:190px}
.brand{font-size:0;letter-spacing:0}
.brand::before{content:'Art';font-size:47px;line-height:1;font-weight:800;letter-spacing:-.075em;color:#0a0a0a}
.brand::after{content:'+';font-size:47px;line-height:1;font-weight:800;color:var(--ap-orange);margin-left:2px}
.site-header-editable{display:none}
.nav{margin-left:auto;align-self:stretch;display:flex;align-items:center}
.nav-list{display:flex;align-items:center;gap:12px;list-style:none;margin:0;padding:0}
.nav-list>li{position:relative;margin:0;padding:0}
.nav-list>li>a{
  display:flex;align-items:center;gap:9px;height:48px;padding:0 16px;border:1px solid #b9c8c8;border-radius:12px;
  font-size:16px;font-weight:800;line-height:1;white-space:nowrap;background:#f7f9f9
}
.nav-list>li:first-child>a{background:var(--ap-orange);border-color:var(--ap-orange);color:#fff}
.nav-list>li>a::after{display:none}
.nav-chevron{font-size:24px;line-height:.5;margin-top:-5px}
.nav-list .sub-menu{
  position:absolute;top:53px;left:0;min-width:205px;margin:0;padding:6px 10px;list-style:none;background:#e8eeee;
  border:1px solid #b9c8c8;border-radius:0 0 8px 8px;box-shadow:0 10px 18px rgba(0,0,0,.10);opacity:0;visibility:hidden;transform:translateY(-5px);transition:.18s ease;z-index:80
}
.nav-list>li:hover>.sub-menu,.nav-list>li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav-list .sub-menu li+li{border-top:1px solid #d2dddd}
.nav-list .sub-menu a{display:block;padding:11px 4px;font-size:14px;font-weight:800}
.menu-toggle{display:none}
.section-grid,.artplus-page-builder{background-color:#fff}
.apb-hero.home-hero{
  max-width:none;min-height:calc(100vh - 66px);padding:44px 45px 25px;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(420px,1fr);grid-template-rows:auto 1fr;gap:24px 42px;
  align-items:center;position:relative;background-image:linear-gradient(to right,var(--ap-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--ap-grid) 1px,transparent 1px);background-size:45px 45px;overflow:hidden
}
.apb-hero .apb-hero-background{display:none}
.apb-hero-media{grid-column:1;grid-row:1 / 3;align-self:center;aspect-ratio:1.62/1;border:1px solid var(--ap-border);border-radius:11px;background:var(--ap-panel);position:relative;overflow:hidden;display:grid;place-items:center;min-height:320px}
.apb-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.apb-play{width:138px;height:138px;border-radius:50%;background:var(--ap-orange);color:#fff;display:grid;place-items:center;padding-left:7px;font-size:58px;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:none}
.home-hero-copy{grid-column:2;grid-row:1 / 3;max-width:620px;align-self:center;z-index:2}
.home-kicker{display:none}
.apb-hero .home-hero-copy h1{font-size:clamp(64px,6.5vw,94px);line-height:.84;letter-spacing:-.075em;margin:0 0 28px;font-weight:800;max-width:600px}
.apb-hero .home-hero-copy p{font-size:17px;line-height:1.06;max-width:560px;margin:0;color:#101010}
.apb-hero .scribble-word::after{display:none}
.apb-hero .home-o{display:none}
.apb-hero .apb-o-factor{display:none}
.apb-section{max-width:none;margin:0;padding:48px 45px 70px;background-color:#fff;background-image:linear-gradient(to right,var(--ap-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--ap-grid) 1px,transparent 1px);background-size:45px 45px}
.simple-section-head{max-width:1230px;margin:0 auto 24px;grid-template-columns:170px minmax(0,1fr) auto}
.simple-section-head>span{color:var(--ap-orange);font-weight:700}
.simple-section-head h2{font-size:clamp(38px,5vw,72px)}
.home-skills .skill-link-grid{max-width:1230px;margin:auto}
.skill-link{font-size:clamp(22px,3vw,40px);padding:17px 5px}
.home-project-grid{max-width:1230px;margin:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px}
.home-project-image{aspect-ratio:1.08/1;border:1px dashed var(--ap-border);border-radius:10px;background:var(--ap-panel)}
.home-project-image img{padding:10px;border-radius:10px}
.apb-references{max-width:none;border-top:0}
.apb-reference-grid{max-width:1230px;margin:auto;gap:40px;background:transparent;border:0;grid-template-columns:repeat(4,1fr)}
.apb-reference{height:180px;border:1px dashed var(--ap-border);border-radius:10px;background:var(--ap-panel)}
.home-contact{max-width:none!important;min-height:0;padding:90px 45px;background:#fff;background-image:linear-gradient(to right,var(--ap-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--ap-grid) 1px,transparent 1px);background-size:45px 45px}
.artplus-contact-editable,.contact-copy,.contact-meta{max-width:1230px;margin:auto}
.contact-copy p{font-size:clamp(24px,3vw,42px);margin:0;color:#777}
.contact-copy a{font-size:clamp(70px,9vw,150px);font-weight:800;line-height:.85;letter-spacing:-.075em}
.site-footer{padding:44px 45px 18px;background:#101111;color:#fff;border-top:0}
.site-footer-grid{max-width:1230px;padding-bottom:45px;grid-template-columns:280px 1fr;gap:80px}
.footer-brand{font-size:44px}
.site-footer-copy{max-width:680px}.footer-tagline{font-size:clamp(38px,4.3vw,64px)}
.site-footer-bottom{max-width:1230px;padding-top:14px;color:#9ea4a4}
.site-footer-editable{max-width:1230px;margin:auto}
.site-footer-editable .widget_block{margin-bottom:0}
.artplus-mobile-contact{display:none}

@media(max-width:900px){
  .site-header{height:66px;padding:0 20px}
  .custom-logo{max-height:43px;max-width:150px}
  .brand::before,.brand::after{font-size:39px}
  .nav{position:absolute;top:66px;left:8px;right:8px;height:auto;padding:12px 0 0;display:none;align-items:stretch;background:transparent}
  .nav.open{display:block}
  .nav-list{display:block;background:#e9eeee;border:1px solid #d1dddd;border-radius:10px;padding:8px 12px;box-shadow:0 18px 28px rgba(0,0,0,.12)}
  .nav-list>li{border-bottom:1px solid #cfd9d9}
  .nav-list>li:last-child{border-bottom:0}
  .nav-list>li>a{height:55px;border:0;border-radius:0;background:transparent!important;color:#080909!important;padding:0 10px;font-size:18px}
  .nav-list>li:first-child>a{color:#080909!important}
  .nav-list .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-top:1px solid #cfd9d9;border-radius:0;min-width:0;padding:0 0 4px;background:#e9eeee}
  .nav-list .sub-menu a{padding:9px 10px 9px 42px;font-size:14px}
  .menu-toggle{display:grid;place-items:center;border:0;background:var(--ap-orange);color:#fff;border-radius:12px;width:90px;height:46px;padding:0;font-size:17px;font-weight:800;margin-left:auto}
  .menu-toggle span{width:auto;height:auto;margin:0;background:none}
  .apb-hero.home-hero{min-height:0;padding:16px 16px 72px;display:flex;flex-direction:column;gap:18px;align-items:stretch}
  .apb-hero-media{order:1;width:100%;min-height:0;aspect-ratio:1.46/1;border-radius:8px}
  .apb-play{width:78px;height:78px;font-size:34px}
  .home-hero-copy{order:2;max-width:none;padding:0 25px}
  .apb-hero .home-hero-copy h1{font-size:clamp(54px,15vw,76px);line-height:.82;margin:0 0 26px}
  .apb-hero .home-hero-copy p{font-size:15px;line-height:1.08;max-width:310px}
  .apb-section{padding:42px 16px 60px;background-size:45px 45px}
  .simple-section-head{grid-template-columns:1fr;margin-bottom:20px}
  .home-project-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .apb-reference-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .apb-reference{height:120px}
  .home-contact{padding:70px 20px}
  .site-footer{padding:35px 20px 100px}
  .site-footer-grid{grid-template-columns:1fr;gap:25px}
  .site-footer-bottom{flex-direction:row;align-items:center}
  .artplus-mobile-contact{position:fixed;z-index:95;left:16px;right:16px;bottom:10px;height:58px;display:grid;grid-template-columns:1fr 1fr;background:#050606;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
  .artplus-mobile-contact a{color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:800;border-right:1px solid var(--ap-orange)}
  .artplus-mobile-contact a:last-child{border-right:0}
  .artplus-mobile-contact .icon{color:var(--ap-orange);font-size:22px}
}

/* =========================================================
   ArtPlus 18 — active navigation + moving concept paper
   ========================================================= */
:root{
  --ap-paper-x:0px;
  --ap-paper-y:0px;
  --ap-grid-color:#dbe5e4;
  --ap-grid-opacity:.72;
  --ap-grid-size:45px;
}
body::before{
  content:"";position:fixed;inset:-90px;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--ap-grid-color) 1px,transparent 1px),linear-gradient(to bottom,var(--ap-grid-color) 1px,transparent 1px);
  background-size:var(--ap-grid-size) var(--ap-grid-size);
  background-position:var(--ap-paper-x) var(--ap-paper-y),var(--ap-paper-x) var(--ap-paper-y);
  opacity:var(--ap-grid-opacity);will-change:background-position;
}
main,.site-footer{position:relative;z-index:2}
.artplus-page-builder,.section-grid,
.apb-hero.home-hero,.apb-section,.home-contact,.service-page,.default-content{
  background-color:transparent!important;background-image:none!important;
}
.artplus-parallax-stage{z-index:1}
.artplus-parallax-layer--bg{opacity:.28}
.artplus-parallax-layer--mid{opacity:.82}
.artplus-parallax-layer--top{opacity:1}

/* Valikon tila määräytyy WordPressin nykyisen sivun luokista. */
.nav-list>li:first-child>a{
  background:rgba(255,255,255,.62);border-color:var(--ap-border);color:var(--ap-black);box-shadow:none;
}
.nav-list>li:first-child>a:hover{box-shadow:0 10px 24px rgba(15,30,30,.09)}
.nav-list>li.current-menu-item>a,
.nav-list>li.current_page_item>a,
.nav-list>li.current-menu-ancestor>a,
.nav-list>li.current_page_ancestor>a,
.nav-list>li.is-section-current>a,
.nav-list>li>a[aria-current="page"]{
  background:var(--ap-orange)!important;border-color:var(--ap-orange)!important;color:#fff!important;
  box-shadow:0 12px 30px rgba(255,75,18,.3)!important;
}
.nav-list>li.current-menu-item::after,
.nav-list>li.current_page_item::after,
.nav-list>li.current-menu-ancestor::after,
.nav-list>li.current_page_ancestor::after,
.nav-list>li.is-section-current::after{
  content:"";position:absolute;left:50%;bottom:-10px;z-index:3;width:0;height:0;transform:translateX(-50%);
  border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid var(--ap-orange);
  filter:drop-shadow(0 5px 4px rgba(255,75,18,.14));
}

@media(max-width:900px){
  body::before{inset:-60px;background-size:38px 38px}
  .nav-list>li.current-menu-item>a,
  .nav-list>li.current_page_item>a,
  .nav-list>li.current-menu-ancestor>a,
  .nav-list>li.current_page_ancestor>a,
  .nav-list>li.is-section-current>a,
  .nav-list>li>a[aria-current="page"]{background:var(--ap-orange)!important;color:#fff!important}
  .nav-list>li.current-menu-item::after,
  .nav-list>li.current_page_item::after,
  .nav-list>li.current-menu-ancestor::after,
  .nav-list>li.current_page_ancestor::after,
  .nav-list>li.is-section-current::after{bottom:-7px;border-left-width:9px;border-right-width:9px;border-top-width:9px}
}
@media(prefers-reduced-motion:reduce){body::before{background-position:0 0,0 0!important}}
@media(max-width:420px){
  .brand::before,.brand::after{font-size:36px}
  .menu-toggle{width:88px}
  .apb-hero .home-hero-copy{padding:0 25px}
  .home-project-grid{grid-template-columns:1fr 1fr}
}


/* =========================================================
   ArtPlus v9 — faithful desktop/mobile mockup implementation
   Supplied icon set is used for all UI controls.
   ========================================================= */
:root{
  --ap-grid:#edf2f1;
  --ap-panel:#e8eeee;
  --ap-border:#b8c8c8;
  --ap-orange:#ff4d16;
  --ap-black:#080909;
  --ap-header:#f8fafa;
}
body{background:#fff;color:var(--ap-black);overflow-x:hidden}
.site-header{height:66px;padding:0 45px;background:var(--ap-header);border-bottom:1px solid #d7dddd;box-shadow:0 5px 13px rgba(0,0,0,.10);gap:20px}
.site-branding{flex:0 0 auto;z-index:2}
.custom-logo{max-height:52px;max-width:190px}
.brand{font-size:0;letter-spacing:0}
.brand::before{content:'Art';font-size:47px;line-height:.9;font-weight:800;letter-spacing:-.075em;color:#090a0a}
.brand::after{content:'+';font-size:47px;line-height:.9;font-weight:800;color:var(--ap-orange);margin-left:2px}
.nav{margin-left:auto;align-self:stretch;display:flex;align-items:center}
.nav-list{display:flex;align-items:center;gap:12px;list-style:none;margin:0;padding:0}
.nav-list>li{position:relative;margin:0;padding:0}
.nav-list>li>a{display:flex;align-items:center;gap:9px;height:48px;padding:0 16px;border:1px solid var(--ap-border);border-radius:12px;font-size:16px;font-weight:800;line-height:1;white-space:nowrap;background:#f7f9f9}
.nav-list>li:first-child>a{background:var(--ap-orange);border-color:var(--ap-orange);color:#fff}
.nav-list a::after{display:none!important}
.nav-icon{display:block;flex:0 0 auto}
.nav-icon-chevron{width:19px;height:13px;filter:brightness(0) invert(1)}
.nav-list>li:nth-child(2)>a::before,.nav-list>li:nth-child(3)>a::before,.nav-list .sub-menu a::before{content:"";display:block;flex:0 0 auto;width:18px;height:18px;background:url('assets/Icons/plus_icon.svg') center/contain no-repeat}
.nav-list .sub-menu{position:absolute;top:53px;left:0;min-width:205px;margin:0;padding:6px 10px;list-style:none;background:#e8eeee;border:1px solid var(--ap-border);border-radius:0 0 8px 8px;box-shadow:0 10px 18px rgba(0,0,0,.10);opacity:0;visibility:hidden;transform:translateY(-5px);transition:.18s ease;z-index:80}
.nav-list>li:hover>.sub-menu,.nav-list>li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav-list .sub-menu li+li{border-top:1px solid #d2dddd}
.nav-list .sub-menu a{display:flex;align-items:center;gap:9px;padding:11px 4px;font-size:14px;font-weight:800}
.menu-toggle{display:none}

/* homepage hero */
.apb-hero.home-hero{max-width:none;min-height:433px;padding:44px 45px 24px;display:grid;grid-template-columns:minmax(0,593px) minmax(0,1fr);grid-template-rows:auto;gap:0 42px;align-items:start;position:relative;background-color:#fff;background-image:linear-gradient(to right,var(--ap-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--ap-grid) 1px,transparent 1px);background-size:45px 45px;overflow:hidden}
.apb-hero .apb-hero-background{display:none}
.apb-hero-media{grid-column:1;grid-row:1;align-self:start;width:100%;aspect-ratio:593/365;min-height:0;border:1px solid var(--ap-border);border-radius:11px;background:var(--ap-panel);position:relative;overflow:hidden;display:grid;place-items:center}
.apb-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.apb-play{width:138px;height:138px;border-radius:50%;background:var(--ap-orange);color:transparent;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:none}
.apb-play::before{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);width:0;height:0;border-top:31px solid transparent;border-bottom:31px solid transparent;border-left:40px solid #fff}
.home-hero-copy{grid-column:2;grid-row:1;max-width:600px;align-self:start;margin-top:42px;padding:0;z-index:2}
.home-kicker{display:none}
.apb-hero .home-hero-copy h1{font-size:clamp(64px,6.1vw,88px);line-height:.84;letter-spacing:-.075em;margin:0 0 27px;font-weight:800;max-width:600px}
.apb-hero .home-hero-copy p{font-size:16px;line-height:1.06;max-width:560px;margin:0;color:#101010}
.apb-hero .scribble-word::after,.apb-hero .home-o,.apb-hero .apb-o-factor{display:none}

/* reference cards immediately follow hero */
.apb-hero + .apb-references{padding-top:0}
.apb-references .simple-section-head{display:none}
.apb-references{padding-left:45px!important;padding-right:45px!important;padding-bottom:28px!important}
.apb-reference-grid{max-width:none;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:43px;background:transparent;border:0}
.apb-reference{height:184px;min-height:0;border:1px dashed var(--ap-border);border-radius:10px;background:var(--ap-panel);display:flex;align-items:center;justify-content:center;padding:10px;position:relative}
.apb-reference::before{content:"";position:absolute;top:-25px;left:0;color:var(--ap-orange);font-size:16px;font-weight:800}
.apb-reference:nth-child(1)::before{content:"01 Referenssi"}.apb-reference:nth-child(2)::before{content:"02 Referenssi"}.apb-reference:nth-child(3)::before{content:"03 Referenssi"}.apb-reference:nth-child(4)::before{content:"04 Referenssi"}
.apb-reference img{max-width:82%;max-height:82%;object-fit:contain;filter:none}
.apb-reference-name{font-weight:700;color:#b9c8c8}

/* grid sections retain the mockup paper */
.apb-section{background-color:#fff;background-image:linear-gradient(to right,var(--ap-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--ap-grid) 1px,transparent 1px);background-size:45px 45px}
.simple-section-head{max-width:1230px;margin:0 auto 24px}

/* contact and footer */
.home-contact{max-width:none!important;padding:90px 45px;background:#fff;background-image:linear-gradient(to right,var(--ap-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--ap-grid) 1px,transparent 1px);background-size:45px 45px}
.site-footer{padding:44px 45px 18px;background:#101111;color:#fff;border-top:0}

/* fixed mobile contact bar uses supplied SVG icons */
.artplus-mobile-contact .icon{display:block;flex:0 0 auto;object-fit:contain;filter:brightness(0) invert(1)}
.artplus-mobile-contact .icon-message{width:30px;height:18px}
.artplus-mobile-contact .icon-phone{width:15px;height:25px}
.artplus-mobile-contact .icon-plus{width:21px;height:21px;filter:none}

@media(max-width:900px){
  .site-header{height:66px;padding:0 20px}
  .custom-logo{max-height:43px;max-width:150px}
  .brand::before,.brand::after{font-size:39px}
  .nav{position:absolute;top:66px;left:8px;right:8px;height:auto;padding:12px 0 0;display:none;align-items:stretch;background:transparent}
  .nav.open{display:block}
  .nav-list{display:block;background:#e9eeee;border:1px solid #d1dddd;border-radius:10px;padding:8px 12px;box-shadow:0 18px 28px rgba(0,0,0,.12)}
  .nav-list>li{border-bottom:1px solid #cfd9d9}
  .nav-list>li:last-child{border-bottom:0}
  .nav-list>li>a{height:55px;border:0;border-radius:0;background:transparent!important;color:#080909!important;padding:0 10px;font-size:18px;gap:10px}
  .nav-list>li:first-child>a{color:#080909!important}
  .nav-icon-chevron{display:none}
  .nav-list>li:nth-child(1)>a::before,.nav-list>li:nth-child(2)>a::before,.nav-list>li:nth-child(3)>a::before{content:"";display:block;width:20px;height:20px;background:#ff4d16;mask:url('assets/Icons/plus_icon.svg') center/contain no-repeat;-webkit-mask:url('assets/Icons/plus_icon.svg') center/contain no-repeat;flex:0 0 auto}
  .nav-list .sub-menu{display:none!important}
  .menu-toggle{display:flex;align-items:center;justify-content:center;gap:7px;border:0;background:var(--ap-orange);color:#fff;border-radius:12px;width:90px;height:46px;padding:0;font-size:17px;font-weight:800;margin-left:auto}
  .menu-toggle img{width:18px;height:18px;filter:brightness(0) invert(1)}
  .menu-toggle span{width:auto;height:auto;margin:0;background:none}
  .apb-hero.home-hero{min-height:0;padding:16px 16px 63px;display:flex;flex-direction:column;gap:0;align-items:stretch;background-size:45px 45px}
  .apb-hero-media{order:1;width:100%;aspect-ratio:328/202;border-radius:8px}
  .apb-play{width:78px;height:78px}
  .apb-play::before{border-top-width:20px;border-bottom-width:20px;border-left-width:27px}
  .home-hero-copy{order:2;max-width:none;margin-top:20px;padding:0 25px}
  .apb-hero .home-hero-copy h1{font-size:clamp(54px,15vw,76px);line-height:.82;margin:0 0 26px;max-width:320px}
  .apb-hero .home-hero-copy p{font-size:15px;line-height:1.08;max-width:310px}
  .apb-hero + .apb-references{padding-top:20px!important}
  .apb-references{padding:38px 16px 60px!important}
  .apb-reference-grid{grid-template-columns:repeat(2,1fr);gap:32px 12px}
  .apb-reference{height:120px}
  .apb-reference::before{top:-21px;font-size:13px}
  .apb-reference:nth-child(n+3){margin-top:0}
  .apb-section{padding-left:16px;padding-right:16px}
  .home-contact{padding:70px 20px}
  .site-footer{padding:35px 20px 100px}
  .artplus-mobile-contact{position:fixed;z-index:95;left:16px;right:16px;bottom:12px;height:58px;display:grid;grid-template-columns:1fr 1fr;background:#050606;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
  .artplus-mobile-contact a{color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:800;border-right:1px solid var(--ap-orange)}
  .artplus-mobile-contact a:last-child{border-right:0}
}
@media(max-width:420px){
  .brand::before,.brand::after{font-size:36px}
  .menu-toggle{width:88px}
}

/* =========================================================
   ArtPlus — three-layer paper / annotation parallax
   ========================================================= */
.artplus-parallax-stage{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  isolation:isolate;
  contain:paint;
}
.artplus-parallax-layer{
  position:absolute;
  inset:-14vh -6vw;
  width:112vw;
  height:128vh;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  will-change:transform;
  transform:translate3d(0,0,0) rotate(0deg) scale(1);
  transform-origin:center center;
  backface-visibility:hidden;
}
.artplus-parallax-layer--bg{z-index:0}
/* Recolor transparent SVG artwork without changing the source files. */
.artplus-parallax-layer--recolorable{
  background-image:none !important;
  background-color:rgba(17,17,17,var(--parallax-opacity,.16));
  -webkit-mask-image:var(--parallax-mask);
  mask-image:var(--parallax-mask);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center center;
  mask-position:center center;
  -webkit-mask-size:cover;
  mask-size:cover;
  opacity:1;
}
.artplus-parallax-layer--recolorable{background-color:color-mix(in srgb,var(--parallax-color,#111) calc(var(--parallax-opacity,.16)*100%),transparent)}
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .artplus-parallax-layer--recolorable{opacity:var(--parallax-opacity,.16);background-color:var(--parallax-color,#111)}
}
.artplus-parallax-layer--mid{z-index:1}
.artplus-parallax-layer--top{z-index:2}
body.has-artplus-parallax .site-header,
body.has-artplus-parallax main,
body.has-artplus-parallax .site-footer,
body.has-artplus-parallax .artplus-mobile-contact{position:relative;z-index:2}
body.has-artplus-parallax,
body.has-artplus-parallax main,
body.has-artplus-parallax .site-content,
body.has-artplus-parallax .site-footer{background:transparent!important}
body.has-artplus-parallax main,
body.has-artplus-parallax .site-footer{background-color:transparent}
body.has-artplus-parallax .apb-hero,
body.has-artplus-parallax .apb-section,
body.has-artplus-parallax .home-contact{background-color:rgba(255,255,255,.78)}
body.has-artplus-parallax .apb-hero.section-grid,
body.has-artplus-parallax .apb-section.section-grid{background-image:none}
@media(max-width:800px){
  .artplus-parallax-layer{inset:-9vh -10vw;width:120vw;height:118vh;background-size:cover}
  body.has-artplus-parallax .apb-hero,
  body.has-artplus-parallax .apb-section,
  body.has-artplus-parallax .home-contact{background-color:rgba(255,255,255,.82)}
}

/* =========================================================
   ArtPlus 16 — signature glass interface
   ========================================================= */
:root{
  --ap-orange:#ff4b12;
  --ap-ink:#090b0b;
  --ap-mist:#e9efee;
  --ap-glass:rgba(244,248,247,.76);
  --ap-glass-line:rgba(157,177,175,.48);
  --ap-shadow:0 24px 80px rgba(8,18,18,.16);
  --ap-ease:cubic-bezier(.22,1,.36,1);
}
::selection{background:var(--ap-orange);color:#fff}
body{background:#fff;font-family:Inter,Arial,sans-serif}
body.menu-open,body.modal-open{overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
:where(a,button):focus-visible{outline:3px solid var(--ap-orange);outline-offset:4px}

.site-header{
  position:sticky;height:76px;padding:0 clamp(20px,3.4vw,52px);background:rgba(247,250,249,.72);
  border-bottom:1px solid rgba(183,199,197,.55);box-shadow:0 8px 30px rgba(9,20,20,.07);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
}
body.has-artplus-parallax .site-header{position:sticky;z-index:110}
.brand::before,.brand::after{font-size:46px}
.nav-list>li>a{height:48px;border-radius:14px;background:rgba(255,255,255,.62);transition:transform .35s var(--ap-ease),background .35s ease,box-shadow .35s ease,border-color .35s ease}
.nav-list>li>a:hover{transform:translateY(-2px);border-color:rgba(255,75,18,.4);box-shadow:0 10px 24px rgba(15,30,30,.09)}
.nav-list>li:first-child>a{box-shadow:0 10px 28px rgba(255,75,18,.25)}
.nav-list>li:first-child>a:hover{box-shadow:0 14px 34px rgba(255,75,18,.34)}
.nav-list .sub-menu{top:58px;padding:10px 12px;border:1px solid var(--ap-glass-line);border-radius:18px;background:var(--ap-glass);box-shadow:var(--ap-shadow);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);transform:translateY(-8px) scale(.98);transform-origin:top left;transition:opacity .28s ease,transform .35s var(--ap-ease),visibility .28s}
.nav-list .sub-menu a{border-radius:10px;transition:background .2s ease,padding .25s var(--ap-ease)}
.nav-list .sub-menu a:hover{background:rgba(255,255,255,.62);padding-left:10px}

.apb-hero.home-hero{
  min-height:calc(100svh - 76px);padding:clamp(34px,5vw,72px) clamp(20px,3.4vw,52px);
  grid-template-columns:minmax(420px,1.03fr) minmax(390px,.97fr);gap:clamp(44px,6vw,100px);align-items:center;
  background-size:45px 45px;
}
.apb-hero.home-hero::before{content:"";position:absolute;width:38vw;aspect-ratio:1;right:-15vw;top:-18vw;border-radius:50%;background:radial-gradient(circle,rgba(255,75,18,.17),transparent 67%);filter:blur(8px);pointer-events:none}
.apb-hero-media{
  appearance:none;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;aspect-ratio:1.48/1;
  border:1px solid rgba(151,174,171,.7);border-radius:24px;background:linear-gradient(145deg,#edf3f2,#dfe8e7);
  box-shadow:0 30px 80px rgba(20,42,41,.12),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .7s var(--ap-ease),box-shadow .7s var(--ap-ease),border-color .35s ease;
}
.apb-hero-media::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.28),transparent 40%);pointer-events:none}
.apb-hero-media:hover{transform:translateY(-8px) rotate(-.5deg);border-color:rgba(255,75,18,.58);box-shadow:0 42px 100px rgba(20,42,41,.2),0 0 0 8px rgba(255,75,18,.05)}
.apb-hero-media img{transition:transform 1s var(--ap-ease),filter .5s ease}
.apb-hero-media:hover img{transform:scale(1.035);filter:saturate(1.08)}
.apb-play{width:clamp(92px,10vw,140px);height:clamp(92px,10vw,140px);box-shadow:0 18px 50px rgba(255,75,18,.32);transition:transform .55s var(--ap-ease),box-shadow .4s ease}
.apb-hero-media:hover .apb-play{transform:translate(-50%,-50%) scale(1.08) rotate(3deg);box-shadow:0 24px 60px rgba(255,75,18,.45)}
.apb-media-label{position:absolute;left:22px;bottom:20px;z-index:2;padding:9px 12px;border:1px solid rgba(255,255,255,.62);border-radius:999px;color:#fff;background:rgba(8,11,11,.46);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.home-hero-copy{margin:0;max-width:650px}
.apb-hero .home-hero-copy h1{font-size:clamp(70px,7vw,112px);line-height:.8;max-width:650px;text-wrap:balance}
.apb-hero .home-hero-copy p{font-size:clamp(17px,1.35vw,21px);line-height:1.38;max-width:590px}

.apb-reference,.home-project-image{transition:transform .55s var(--ap-ease),box-shadow .55s var(--ap-ease),border-color .3s ease}
.apb-reference:hover,.home-project-image:hover{transform:translateY(-7px);border-color:var(--ap-orange);box-shadow:0 22px 50px rgba(19,40,39,.13)}
.skill-link{transition:padding .4s var(--ap-ease),color .25s ease,background .25s ease}
.skill-link:hover{padding-left:20px;padding-right:14px;background:linear-gradient(90deg,rgba(255,75,18,.08),transparent)}
.artplus-mobile-contact{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* Native dialogs: accessible behavior with a custom glass surface. */
.artplus-modal{width:min(1120px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:28px;color:#fff;background:transparent;overflow:visible}
.artplus-modal::backdrop{background:rgba(4,9,9,.66);backdrop-filter:blur(18px) saturate(80%);-webkit-backdrop-filter:blur(18px) saturate(80%);animation:ap-fade .35s ease both}
.artplus-modal[open]{animation:ap-modal-in .55s var(--ap-ease) both}
.artplus-modal-card{position:relative;padding:clamp(22px,4vw,54px);border:1px solid rgba(255,255,255,.22);border-radius:28px;background:linear-gradient(145deg,rgba(21,28,28,.92),rgba(9,12,12,.86));box-shadow:0 40px 120px rgba(0,0,0,.45);backdrop-filter:blur(30px) saturate(130%);-webkit-backdrop-filter:blur(30px) saturate(130%)}
.artplus-modal-close{position:absolute;z-index:2;right:18px;top:18px;width:48px;height:48px;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:#fff;background:rgba(255,255,255,.08);font:300 32px/1 Inter,sans-serif;cursor:pointer;transition:transform .35s var(--ap-ease),background .2s ease}
.artplus-modal-close:hover{transform:rotate(8deg) scale(1.06);background:var(--ap-orange)}
.artplus-modal-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin:0 64px 28px 0}
.artplus-modal-heading .mono,.artplus-contact-card>.mono{color:var(--ap-orange)}
.artplus-modal h2{font-size:clamp(38px,5vw,72px);line-height:.9;letter-spacing:-.06em;margin:0}
.artplus-video-frame{display:grid;place-items:center;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:#050606;overflow:hidden}
.artplus-video-frame iframe,.artplus-video-frame video{width:100%;height:100%;border:0}
.artplus-video-frame video{display:block;object-fit:contain;background:#050606}
.artplus-video-frame p{max-width:420px;margin:0;padding:30px;color:#aebaba;text-align:center;line-height:1.5}
.artplus-contact-modal{width:min(780px,calc(100% - 32px))}
.artplus-contact-card{padding:clamp(38px,7vw,84px)}
.artplus-contact-card h2{font-size:clamp(54px,8vw,94px);max-width:640px;margin:24px 0}
.artplus-contact-card p{max-width:570px;color:#bdc8c7;font-size:clamp(17px,2vw,22px);line-height:1.45}
.artplus-modal-cta{display:flex;align-items:center;justify-content:space-between;margin-top:40px;padding:20px 24px;border-radius:16px;background:var(--ap-orange);color:#fff;font-size:clamp(18px,2.3vw,26px);font-weight:800;box-shadow:0 18px 50px rgba(255,75,18,.25);transition:transform .35s var(--ap-ease),box-shadow .35s ease}
.artplus-modal-cta:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(255,75,18,.38)}
.artplus-modal-cta span{font-size:1.4em}
@keyframes ap-fade{from{opacity:0}to{opacity:1}}
@keyframes ap-modal-in{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .site-header{height:70px;padding:0 18px;z-index:110}
  .brand::before,.brand::after{font-size:40px}
  .menu-toggle{position:relative;z-index:112;display:flex;width:98px;height:48px;border-radius:15px;box-shadow:0 12px 28px rgba(255,75,18,.25);transition:transform .35s var(--ap-ease),background .25s ease,box-shadow .25s ease}
  .menu-toggle img{transition:transform .55s var(--ap-ease)}
  .menu-toggle[aria-expanded="true"]{background:#111818;box-shadow:none}
  .menu-toggle[aria-expanded="true"] img{transform:rotate(135deg)}
  .nav{position:fixed;inset:0;top:0;z-index:109;display:flex!important;align-items:center;padding:92px 16px 92px;background:rgba(8,14,14,.58);backdrop-filter:blur(24px) saturate(90%);-webkit-backdrop-filter:blur(24px) saturate(90%);opacity:0;visibility:hidden;pointer-events:none;transform:none;transition:opacity .35s ease,visibility .35s}
  .nav.open{opacity:1;visibility:visible;pointer-events:auto}
  .nav-list{width:100%;max-height:calc(100dvh - 184px);overflow:auto;padding:14px;border:1px solid rgba(255,255,255,.48);border-radius:24px;background:rgba(238,245,244,.88);box-shadow:0 30px 90px rgba(0,0,0,.32);backdrop-filter:blur(30px) saturate(145%);-webkit-backdrop-filter:blur(30px) saturate(145%);transform:translateY(-20px) scale(.97);transition:transform .55s var(--ap-ease)}
  .nav.open .nav-list{transform:none}
  .nav-list>li{opacity:0;transform:translateY(-12px);transition:opacity .35s ease,transform .5s var(--ap-ease)}
  .nav.open .nav-list>li{opacity:1;transform:none}
  .nav.open .nav-list>li:nth-child(2){transition-delay:.06s}.nav.open .nav-list>li:nth-child(3){transition-delay:.12s}.nav.open .nav-list>li:nth-child(4){transition-delay:.18s}
  .nav-list>li>a{height:auto;min-height:68px;padding:12px 14px!important;border-radius:14px!important;font-size:clamp(21px,6vw,30px)!important;letter-spacing:-.035em}
  .nav-list>li>a:hover{transform:none;background:rgba(255,255,255,.72)!important}
  .nav-list>li>a::after{display:none!important;content:none!important}
  .apb-hero.home-hero{min-height:0;padding:18px 16px 76px;gap:0}
  .apb-hero-media{border-radius:18px}
  .apb-media-label{left:14px;bottom:12px;padding:7px 9px;font-size:9px}
  .home-hero-copy{margin-top:26px;padding:0 clamp(12px,6vw,26px)}
  .apb-hero .home-hero-copy h1{font-size:clamp(58px,16vw,82px);max-width:390px}
  .apb-hero .home-hero-copy p{font-size:16px;line-height:1.36;max-width:360px}
  .artplus-mobile-contact{z-index:98;background:rgba(5,8,8,.9);border:1px solid rgba(255,255,255,.13);border-radius:18px;box-shadow:0 16px 45px rgba(0,0,0,.32)}
  body.has-artplus-parallax .artplus-mobile-contact{position:fixed;z-index:98}
  .artplus-modal-heading{display:block;margin-bottom:20px}.artplus-modal-heading h2{margin-top:14px}
}
@media(max-width:560px){
  .artplus-modal{width:calc(100% - 18px);max-height:calc(100dvh - 18px);border-radius:22px}
  .artplus-modal-card{padding:22px;border-radius:22px}
  .artplus-modal-close{right:12px;top:12px;width:44px;height:44px}
  .artplus-modal-heading{margin-right:48px}.artplus-modal-heading h2{font-size:38px}
  .artplus-video-frame{border-radius:14px}
  .artplus-contact-card{padding:52px 24px 26px}
  .artplus-contact-card h2{font-size:clamp(48px,14vw,68px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media(prefers-reduced-motion:reduce){.artplus-parallax-layer{transform:none!important}}

/* ArtPlus 17: viewport-safe navigation and editable service presentation. */
.site-header{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(247,250,249,.78);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.site-header-editable{display:flex!important;align-items:center;gap:14px;margin-left:auto}
.skill-link>span{display:grid;grid-template-columns:minmax(190px,.75fr) minmax(260px,1.25fr);align-items:baseline;gap:clamp(18px,4vw,70px)}
.skill-link strong{font:inherit}
.skill-link small{font-size:clamp(14px,1.3vw,18px);font-weight:500;line-height:1.4;letter-spacing:-.01em;color:#65706f}
.apb-image-text-media:empty::before{content:"ArtPlus";font-size:clamp(44px,8vw,110px);font-weight:800;letter-spacing:-.075em;color:#101515}
.apb-image-text-media:empty::after{content:"+";font-size:clamp(48px,9vw,130px);font-weight:800;color:var(--ap-orange);margin-left:.06em}

@media(max-width:900px){
  .site-header-editable{display:none!important}
  .nav{inset:0!important;width:100vw;height:100dvh;max-width:none;margin:0!important}
  .nav-list .sub-menu{
    display:block!important;position:static;min-width:0;margin:0 10px 12px 44px;padding:0 0 4px;
    opacity:1;visibility:visible;transform:none;background:transparent;border:0;border-left:1px solid rgba(132,154,151,.45);
    border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .nav-list .sub-menu li{border:0!important}
  .nav-list .sub-menu a{min-height:44px;padding:8px 12px;font-size:16px;font-weight:650;border-radius:10px}
  .nav-list .sub-menu a::before{width:12px;height:12px}
  .nav-list>li.menu-item-has-children>a::after{content:"↓"!important}
  .skill-link>span{grid-template-columns:1fr;gap:7px}
  .skill-link small{max-width:28rem;font-size:14px}
}

/* =========================================================
   ArtPlus 18 — lopulliset teemaohitukset
   ========================================================= */
body::before{
  content:"";position:fixed;inset:-90px;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--ap-grid-color) 1px,transparent 1px),linear-gradient(to bottom,var(--ap-grid-color) 1px,transparent 1px);
  background-size:var(--ap-grid-size) var(--ap-grid-size);
  background-position:var(--ap-paper-x) var(--ap-paper-y),var(--ap-paper-x) var(--ap-paper-y);
  opacity:var(--ap-grid-opacity);will-change:background-position;
}
main,.site-footer{position:relative;z-index:2}
.artplus-page-builder,.section-grid,
.apb-hero.home-hero,.apb-section,.home-contact,.service-page,.default-content{
  background-color:transparent!important;background-image:none!important;
}
.nav-list>li:first-child:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current_page_ancestor):not(.is-section-current)>a:not([aria-current="page"]){
  background:rgba(255,255,255,.62)!important;border-color:var(--ap-border)!important;color:var(--ap-black)!important;box-shadow:none!important;
}
.nav-list>li.current-menu-item>a,
.nav-list>li.current_page_item>a,
.nav-list>li.current-menu-ancestor>a,
.nav-list>li.current_page_ancestor>a,
.nav-list>li.is-section-current>a,
.nav-list>li>a[aria-current="page"]{
  background:var(--ap-orange)!important;border-color:var(--ap-orange)!important;color:#fff!important;
  box-shadow:0 12px 30px rgba(255,75,18,.3)!important;
}
.nav-list>li.current-menu-item::after,
.nav-list>li.current_page_item::after,
.nav-list>li.current-menu-ancestor::after,
.nav-list>li.current_page_ancestor::after,
.nav-list>li.is-section-current::after{
  content:"";position:absolute;left:50%;bottom:-10px;z-index:3;width:0;height:0;transform:translateX(-50%);
  border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid var(--ap-orange);
  filter:drop-shadow(0 5px 4px rgba(255,75,18,.14));
}
@media(max-width:900px){
  body::before{inset:-60px;background-size:38px 38px}
  .nav-list>li.current-menu-item::after,
  .nav-list>li.current_page_item::after,
  .nav-list>li.current-menu-ancestor::after,
  .nav-list>li.current_page_ancestor::after,
  .nav-list>li.is-section-current::after{bottom:-7px;border-left-width:9px;border-right-width:9px;border-top-width:9px}
}
@media(prefers-reduced-motion:reduce){body::before{background-position:0 0,0 0!important}}