:root{--navy:#071722;--navy2:#102a3a;--blue:#173b54;--yellow:#ffc400;--yellow2:#ffd84a;--white:#fff;--paper:#f4f5f5;--ink:#101e2c;--muted:#586773;--line:#dce2e5;--max:1400px;--shadow:0 20px 55px #08182324}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,Arial,Helvetica,sans-serif;line-height:1.6}a{color:inherit}img{max-width:100%;display:block}button,input,textarea{font:inherit}.wrap{width:min(var(--max),calc(100% - 52px));margin:auto}.eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.19em;font-size:.72rem;font-weight:900;color:var(--yellow)}.eyebrow:before{content:"";height:3px;width:28px;background:currentColor;flex:0 0 auto}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.04;letter-spacing:-.045em}h1{font-size:clamp(2.8rem,5.6vw,5.9rem);max-width:760px;margin:17px 0 20px;font-weight:950}h2{font-size:clamp(2.15rem,4vw,3.8rem);margin-bottom:18px}h3{font-size:1.3rem;margin-bottom:10px}.highlight{color:var(--yellow)}.muted{color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0;padding:14px 22px;border-radius:7px;text-decoration:none;font-weight:900;border:1px solid transparent;transition:transform .25s,background .25s,color .25s,border-color .25s;cursor:pointer}.btn:hover{transform:translateY(-3px)}.btn-primary{background:var(--yellow);color:#111c24;box-shadow:0 8px 22px #ffc40030}.btn-primary:hover{background:var(--yellow2)}.btn-outline{color:white;border-color:#ffffffa8;background:#0a18274a}.btn-outline:hover{background:#fff;color:var(--navy)}.btn-dark{background:var(--navy);color:white}.btn-dark:hover{background:var(--blue)}.arrow{font-size:1.25em;line-height:1}.topline{background:#06121b;color:#d8e0e5;font-size:.76rem}.topline .wrap{min-height:33px;display:flex;justify-content:space-between;align-items:center;gap:18px}.topline a{text-decoration:none}.header{position:sticky;top:0;z-index:50;background:#0b1c2beF;color:white;border-bottom:1px solid #ffffff16;backdrop-filter:blur(16px)}.nav{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:76px}.brand{width:210px;flex:0 0 210px;display:block}.brand img{width:100%;height:54px;object-fit:contain;object-position:left center}.navlinks{display:flex;align-items:center;gap:clamp(12px,2vw,30px)}.navlinks a{position:relative;text-decoration:none;font-size:.85rem;font-weight:800;white-space:nowrap;padding:28px 0}.navlinks a:after{content:"";position:absolute;left:0;right:100%;bottom:17px;height:3px;background:var(--yellow);transition:right .25s}.navlinks a:hover:after,.navlinks a.active:after{right:0}.nav .btn{padding:12px 17px;font-size:.86rem;white-space:nowrap}.menu-toggle{display:none;border:1px solid #ffffff40;background:transparent;color:white;border-radius:6px;padding:9px 12px}.hero{position:relative;isolation:isolate;min-height:555px;display:flex;align-items:center;color:white;overflow:hidden;background:#102535}.hero-bg{position:absolute;inset:0;z-index:-3;background-image:linear-gradient(90deg,#06131feF 0%,#081723db 29%,#07172378 57%,#07172322 100%),linear-gradient(0deg,#06131fc9,transparent 38%),url('https://id-preview--56a3b329-4e20-5495-aebd-82ffa4ade6c6.lovable.app/__l5e/assets-v1/e02b6eb3-b9a0-46be-b233-ac2175e95a88/img_7828.webp');background-size:cover;background-position:center 48%;transform:scale(1.035);animation:heroDrift 22s ease-in-out infinite alternate}.hero:before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(120deg,transparent 66%,#ffffff19 66.2%,#ffffff19 70%,transparent 70.2%);pointer-events:none}.hero:after{content:"";position:absolute;right:7%;top:-18%;height:140%;width:1px;background:#ffffff24;transform:rotate(28deg)}.hero-content{padding:70px 0 74px;position:relative;z-index:1}.hero .eyebrow{margin-bottom:8px}.hero h1{max-width:700px}.hero-copy{font-size:clamp(1rem,1.3vw,1.2rem);max-width:610px;color:#f0f4f6;margin-bottom:25px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.hero-side{position:absolute;right:max(26px,calc((100vw - var(--max))/2));top:22%;width:155px;color:white;display:grid;gap:20px;font-size:.8rem;font-weight:700}.hero-side .place{font-size:.8rem;letter-spacing:.18em;line-height:1.7}.hero-side .place:after{content:"";display:block;width:45px;height:4px;background:var(--yellow);margin-top:14px}.side-feature{display:flex;gap:10px;align-items:center}.side-icon{font-size:1.6rem;color:var(--yellow)}.service-ribbon{position:relative;z-index:2;margin-top:-1px;background:#e8ebed;padding:16px 0 0}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;transform:translateY(0)}.service-tile{min-height:220px;position:relative;overflow:hidden;color:white;background:var(--navy);isolation:isolate;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);margin-left:-1px;transition:transform .3s,filter .3s}.service-tile:hover{transform:translateY(-7px);filter:brightness(1.08)}.service-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s}.service-tile:hover img{transform:scale(1.08)}.service-tile:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#06131ff5 0%,#06131fa6 47%,#06131f09 100%)}.tile-content{position:absolute;left:11%;right:9%;bottom:18px}.tile-icon{color:var(--yellow);font-size:1.7rem;line-height:1;margin-bottom:7px}.service-tile h3{font-size:clamp(1.05rem,1.5vw,1.45rem);margin-bottom:7px}.tile-link{float:right;color:var(--yellow);font-size:1.35rem;text-decoration:none}.service-tile p{font-size:.88rem;line-height:1.45;margin:0;color:#f0f3f4;max-width:280px}.section{padding:90px 0}.intro{position:relative;overflow:hidden;background:linear-gradient(120deg,#fff 0%,#f4f5f5 70%,#e7ebed 100%)}.intro:after{content:"";position:absolute;right:-40px;bottom:-180px;width:40%;height:130%;background:linear-gradient(120deg,transparent 40%,#fff8 40.2%,#fff8 55%,transparent 55.2%);transform:skewX(-12deg);pointer-events:none}.intro-grid{display:grid;grid-template-columns:1.1fr 1.5fr;gap:55px;align-items:center;position:relative;z-index:1}.intro-copy{max-width:510px}.intro-copy .eyebrow{color:#172b39}.intro-copy p{color:#394a56}.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.audience-card{background:#ffffffd9;border:1px solid #dfe4e7;border-radius:10px;padding:25px 22px;min-height:205px;box-shadow:0 10px 35px #0b1d2810;transition:transform .25s,box-shadow .25s}.audience-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.audience-icon{font-size:2.2rem;color:#f0ad00;margin-bottom:13px}.audience-card p{font-size:.92rem;margin-bottom:12px;color:#42515b}.audience-card a{font-size:1.35rem;color:#efb300;text-decoration:none;font-weight:900}.proof-strip{background:var(--navy);color:white;position:relative;overflow:hidden}.proof-strip:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#071722d9,#071722c9),url('https://id-preview--56a3b329-4e20-5495-aebd-82ffa4ade6c6.lovable.app/__l5e/assets-v1/0884ee62-d6eb-4f35-b2ad-2f57f6bc9883/pohjienrakentaminen.webp') center 55%/cover;opacity:.98}.proof-inner{position:relative;display:grid;grid-template-columns:1.2fr 2fr;align-items:center;gap:35px;padding:40px 0}.proof-title h2{font-size:clamp(1.8rem,3vw,2.8rem);margin:10px 0 0}.proof-items{display:grid;grid-template-columns:repeat(3,1fr);background:#06131fcf;border:1px solid #ffffff2b;transform:skewX(-8deg)}.proof-item{padding:24px 18px;display:flex;align-items:center;justify-content:center;gap:12px;border-right:1px solid #ffffff30;transform:skewX(8deg);font-size:.85rem;font-weight:800}.proof-item:last-child{border:0}.proof-item b{font-size:2rem;color:var(--yellow);font-weight:500}.detail-section{background:#fff}.section-heading{max-width:760px;margin-bottom:42px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.detail-card{display:grid;grid-template-columns:42% 1fr;min-height:250px;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .25s,box-shadow .25s}.detail-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.detail-card img{height:100%;width:100%;object-fit:cover;min-height:250px}.detail-copy{padding:25px}.detail-copy .eyebrow{color:#bd8c00;font-size:.64rem}.detail-copy p{font-size:.93rem;color:#53616a}.detail-copy a{color:#172b39;font-weight:900;text-decoration:none;border-bottom:2px solid var(--yellow)}.about-band{background:#e9edef}.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}.about-photo{position:relative;padding:0 25px 25px 0}.about-photo:after{content:"";position:absolute;right:0;bottom:0;width:70%;height:75%;border:5px solid var(--yellow);z-index:0}.about-photo img{position:relative;z-index:1;width:100%;height:390px;object-fit:cover;box-shadow:var(--shadow)}.about-copy p{color:#4d5d68}.about-points{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:25px 0}.about-point{padding:13px;background:#fff;border-radius:7px;font-weight:800;font-size:.9rem}.about-point span{color:#d39b00;margin-right:8px}.contact{background:var(--navy);color:white;position:relative;overflow:hidden}.contact:after{content:"AREPA";position:absolute;right:-20px;bottom:-100px;font-weight:1000;font-size:clamp(9rem,25vw,23rem);line-height:1;color:#ffffff08;letter-spacing:-.08em;pointer-events:none}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;position:relative;z-index:1}.contact-copy p{color:#d2dbe0}.contact-details{display:grid;gap:12px;margin-top:27px}.contact-details a{text-decoration:none}.contact-detail{display:flex;gap:14px;align-items:flex-start}.contact-detail .symbol{color:var(--yellow);font-size:1.35rem;width:25px}.contact-form{background:white;color:var(--ink);padding:30px;border-radius:12px;box-shadow:0 25px 65px #0003}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:grid;gap:6px;margin-bottom:15px}.field.full{grid-column:1/-1}.field label{font-size:.82rem;font-weight:800}.field input,.field textarea{width:100%;padding:12px 13px;border:1px solid #cbd4da;border-radius:6px;background:#fbfcfc;color:var(--ink)}.field input:focus,.field textarea:focus{outline:3px solid #ffc40045;border-color:#d9a700}.field textarea{min-height:110px;resize:vertical}.form-note{font-size:.78rem;color:#65727d;margin:10px 0 0}.footer{background:#05111a;color:#cbd4d9;padding:25px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.footer-logo{width:150px}.footer-logo img{width:100%;height:45px;object-fit:contain;object-position:left center}.footer-links{display:flex;gap:20px;flex-wrap:wrap}.footer-links a{font-size:.8rem;text-decoration:none}.copyright{font-size:.76rem;color:#84939c}.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:none}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}@keyframes heroDrift{from{transform:scale(1.035) translateX(-.4%)}to{transform:scale(1.09) translateX(.5%)}}@media(max-width:1100px){.navlinks{gap:13px}.navlinks a{font-size:.77rem}.brand{width:165px;flex-basis:165px}.hero-side{display:none}.intro-grid{grid-template-columns:1fr;gap:32px}.intro-copy{max-width:760px}.service-grid{grid-template-columns:repeat(2,1fr)}.service-tile{min-height:245px}.proof-inner{grid-template-columns:1fr}.proof-items{max-width:900px}.detail-card{grid-template-columns:1fr}.detail-card img{height:220px;min-height:220px}}@media(max-width:780px){.wrap{width:min(var(--max),calc(100% - 32px))}.topline .wrap{justify-content:center}.topline .top-right{display:none}.nav{min-height:68px}.brand{width:155px;flex-basis:155px}.brand img{height:45px}.menu-toggle{display:block}.nav .nav-cta{display:none}.navlinks{display:none;position:absolute;top:68px;left:0;right:0;background:#0b1c2b;padding:10px 22px 22px;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid #ffffff20}.navlinks.open{display:flex}.navlinks a{padding:12px 0;font-size:.95rem}.navlinks a:after{bottom:5px}.hero{min-height:570px}.hero-bg{background-position:58% center}.hero-content{padding:62px 0}.hero h1{font-size:clamp(2.8rem,12vw,4.6rem)}.hero-copy{max-width:520px}.hero-actions{align-items:stretch;flex-direction:column;max-width:280px}.hero-actions .btn{width:100%}.service-grid{gap:8px}.service-tile{min-height:220px;clip-path:none;border-radius:5px}.tile-content{left:15px;right:12px;bottom:15px}.service-tile p{font-size:.8rem}.tile-link{display:none}.section{padding:65px 0}.audience-grid{grid-template-columns:1fr}.audience-card{min-height:0}.proof-inner{padding:34px 0}.proof-items{grid-template-columns:1fr;transform:none}.proof-item{transform:none;justify-content:flex-start;padding:13px 18px;border-right:0;border-bottom:1px solid #ffffff30}.detail-grid{grid-template-columns:1fr}.detail-card{grid-template-columns:40% 1fr}.detail-card img{height:100%;min-height:250px}.detail-copy{padding:18px}.about-grid,.contact-grid{grid-template-columns:1fr;gap:35px}.about-photo img{height:300px}.contact-form{padding:22px}.footer-inner{align-items:flex-start;flex-direction:column}.footer-logo{width:135px}}@media(max-width:460px){.service-grid{grid-template-columns:1fr}.service-tile{min-height:205px}.detail-card{grid-template-columns:1fr}.detail-card img{height:200px;min-height:200px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.about-points{grid-template-columns:1fr}.hero{min-height:590px}.hero-bg{background-position:62% center}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
.brand-on-light img{content:url('arepa-logo-musta.png')}


/* KAJO / AREPA DARK THEME: keep the homepage layout, bring the whole site into the same dark palette. */
:root{--paper:#0b1720;--ink:#edf2f5;--muted:#bac5cc;--line:#2a3b47;--shadow:0 20px 55px #0006}
body{background:#0b1720;color:#edf2f5;position:relative}body>*{position:relative;z-index:1}
body:before{content:"";position:fixed;z-index:0;inset:0;pointer-events:none;background-image:url('arepa-logo.png');background-repeat:no-repeat;background-position:center 58%;background-size:min(78vw,1000px) auto;opacity:.035;filter:grayscale(1)}
.intro{background:linear-gradient(120deg,#0e202c 0%,#102632 70%,#142d3b 100%);color:#f2f5f7}
.intro:after{background:linear-gradient(120deg,transparent 40%,#ffffff09 40.2%,#ffffff09 55%,transparent 55.2%);}
.intro-copy .eyebrow{color:var(--yellow)}.intro-copy p{color:#c8d3d9}
.service-ribbon{background:#0a1720}
.service-tile{box-shadow:0 14px 32px #0003}
.proof-strip{background:#071722}
.detail-section{background:#0d1b25;color:#edf2f5}
.detail-card{background:#142733;border-color:#2b414e;color:#f0f4f6}
.detail-copy p{color:#c3ced4}.detail-copy a{color:#fff}
.about-band{background:#10232f;color:#edf2f5}
.about-copy p{color:#c3ced4}.about-point{background:#1a303d;color:#f0f4f6;border:1px solid #2a414e}
.audience-card{background:#142733d9;border-color:#2b414e;color:#edf2f5;box-shadow:0 10px 35px #0002}
.audience-card p{color:#c3ced4}
.contact{background:#071722}
.contact-form{background:#122633;color:#edf2f5;border:1px solid #2c424f}
.field input,.field textarea{background:#0b1b26;border-color:#3a4f5c;color:#f5f7f8}
.form-note{color:#aebbc3}
.footer{background:#040d13}
/* Low-contrast oversized logo mark as a secondary watermark inside major content areas. */
.detail-section,.about-band,.intro{position:relative;isolation:isolate}
.detail-section:after,.about-band:after,.intro:after{pointer-events:none}
@media(prefers-reduced-motion:reduce){body:before{background-attachment:initial}}



/* FINAL AREPA THEME — match every service page to the homepage and retain Arepa yellow. */
:root{--yellow:#ffc400;--yellow2:#ffd84a;--paper:#0b1720;--ink:#edf2f5;--muted:#bac5cc;--line:#2a3b47;--shadow:0 20px 55px #0006}
body{background:#0b1720;color:#edf2f5}
body:before{content:"";position:fixed;z-index:0;inset:0;pointer-events:none;background:url('arepa-logo.png') no-repeat center 58%/min(78vw,1000px) auto;opacity:.035;filter:grayscale(1)}
body>*{position:relative;z-index:1}
.highlight,.eyebrow,.detail-copy .eyebrow,.detail-copy a,.about-band .eyebrow,.about-band .about-point span,.contact .eyebrow,.contact-detail .symbol{color:var(--yellow)}
.btn-primary{background:var(--yellow);color:#111c24;border-color:var(--yellow);box-shadow:0 8px 22px #ffc40030}
.btn-primary:hover{background:var(--yellow2);border-color:var(--yellow2)}
.hero .eyebrow,.hero .highlight,.service-tile .tile-icon,.service-tile .tile-link,.proof-strip .eyebrow,.proof-strip .highlight,.proof-item b{color:var(--yellow)}
.hero-side .place:after,.navlinks a:after{background-color:var(--yellow)}
.intro{background:linear-gradient(120deg,#0e202c 0%,#102632 70%,#142d3b 100%);color:#f2f5f7}
.intro:after{background:linear-gradient(120deg,transparent 40%,#ffffff09 40.2%,#ffffff09 55%,transparent 55.2%)}
.intro-copy .eyebrow{color:var(--yellow)}.intro-copy p,.about-copy p,.detail-copy p{color:#c3ced4}
.service-ribbon{background:#0a1720}
.service-tile{box-shadow:0 14px 32px #0003}
/* Only the direct child image is the card's photo; the small Arepa icon remains a real icon. */
.service-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s}
.service-tile .tile-icon{display:flex;align-items:center;justify-content:flex-start;min-height:42px;margin-bottom:7px;color:var(--yellow)}
.service-tile .tile-icon img{position:relative;inset:auto;display:block;width:39px;height:39px;object-fit:contain;z-index:1;margin:0;filter:drop-shadow(0 2px 4px #0007)}
.service-page-icon{width:34px;height:34px;object-fit:contain;display:inline-block;vertical-align:middle;margin-right:9px;flex:0 0 auto}
.detail-section{background:#0d1b25;color:#edf2f5}
.detail-card{background:#142733;border-color:#2b414e;color:#f0f4f6}
.detail-copy a{border-bottom:2px solid var(--yellow)}
.about-band{background:#10232f;color:#edf2f5}
.about-point{background:#1a303d;color:#f0f4f6;border:1px solid #2a414e}
.audience-card{background:#142733d9;border-color:#2b414e;color:#edf2f5;box-shadow:0 10px 35px #0002}
.audience-card p{color:#c3ced4}.audience-icon,.audience-card a{color:var(--yellow)}
.contact{background:#071722}.contact-form{background:#122633;color:#edf2f5;border:1px solid #2c424f}
.field input,.field textarea{background:#0b1b26;border-color:#3a4f5c;color:#f5f7f8}
.field input:focus,.field textarea:focus{outline:3px solid #ffc40045;border-color:var(--yellow)}
.form-note{color:#aebbc3}.footer{background:#040d13}
.experience-note{padding:14px 16px;border-left:4px solid var(--yellow);background:#142733;border-radius:4px;color:#edf2f5;font-size:.95rem}
@media(max-width:600px){.service-page-icon{width:29px;height:29px}.service-tile .tile-icon img{width:35px;height:35px}}

/* Audience icons: consistent gold line icons matching Arepa's dark theme. */
.audience-icon{display:flex;align-items:center;justify-content:flex-start;height:58px;margin-bottom:13px;color:var(--yellow)}
.audience-icon svg{display:block;width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}


/* Service-page hero uses the same layout language as the homepage. */
@media(max-width:980px){.hero-side{right:22px;width:135px;gap:14px}.hero-content{max-width:100%}.hero h1,.hero-copy{max-width:calc(100% - 155px)}}
@media(max-width:780px){.hero-side{display:none}.hero h1,.hero-copy{max-width:700px}}


/* Palvelukortit: terävät paikalliset kuvat ja hillitty kasvuanimaatio */
.detail-card{position:relative;transform-origin:center;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;will-change:transform}
.detail-card img{display:block;filter:none;image-rendering:auto;backface-visibility:hidden;transform:translateZ(0);transition:transform .35s ease}
@media (hover:hover) and (pointer:fine){.detail-card:hover{transform:scale(1.025);z-index:3;box-shadow:0 18px 42px rgba(0,0,0,.28);border-color:var(--yellow)}.detail-card:hover img{transform:scale(1.025)}}
.detail-card:focus-within{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,196,0,.22)}
@media (prefers-reduced-motion:reduce){.detail-card,.detail-card img{transition:none!important;transform:none!important;will-change:auto}}

/* Hero bannerin yhdenmukaiset keltaiset ääriviivakuvakkeet */
.hero-side .side-feature{display:flex;align-items:center;gap:12px;min-width:0}
.hero-side .side-icon{display:block;width:31px;height:31px;flex:0 0 31px;color:var(--yellow);font-size:initial}
.hero-side .side-feature span{line-height:1.35}


/* Etusivun kohderyhmäkortit: nuolet poistettu, korttien korkeus pienennetty noin 20 %. */
.audience-card{height:268px;min-height:0;padding:20px 22px;box-sizing:border-box}
@media(max-width:780px){.audience-card{height:auto;min-height:0}}


/* Palvelusivujen laajennettu sisältö ja kuvat */
.service-page-cards{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.service-page-cards .detail-card{grid-template-columns:minmax(0,1fr);min-width:0;min-height:100%;align-content:start}
.service-page-cards .detail-card img{width:100%;height:230px;min-height:230px;aspect-ratio:4/3;object-fit:cover}
.service-page-cards .detail-copy{padding:22px}
.service-content-section{background:#0b1720;color:#edf2f5}
.service-content-section .section-heading{max-width:850px}
.service-content-section .section-heading>p{color:#c3ced4;max-width:790px}
.service-content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.service-content-card{height:100%;padding:24px;background:#142733;border:1px solid #2b414e;border-radius:10px}
.service-content-card h3{color:#f4f6f7;font-size:1.22rem;line-height:1.2;margin-bottom:13px}
.service-content-card p{color:#c3ced4;margin:0;font-size:.97rem;line-height:1.7}
.service-related-links{margin:28px 0 0;color:#c3ced4}
.service-related-links a{color:#ffc400;font-weight:800;text-decoration-thickness:2px;text-underline-offset:4px}
.service-related-links a:focus-visible,.service-related-links a:hover{color:#ffd84a}
@media(max-width:1100px){.service-page-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.service-content-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-content-card:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:780px){.service-page-cards,.service-content-grid{grid-template-columns:minmax(0,1fr)}.service-content-card:last-child:nth-child(odd){grid-column:auto}.service-page-cards .detail-card img{height:clamp(200px,58vw,300px);min-height:0}.service-page-cards .detail-copy{padding:20px}.service-content-card{padding:20px}.service-content-section{padding:52px 0}}

/* Palvelukuvakkeet päänavigaatiossa: korvaa tekstilinkit neljällä palvelukuvakkeella. */
.navlinks a.service-icon-link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:6px;border-radius:7px;transition:background .2s,transform .2s;}
.navlinks a.service-icon-link:after{display:none!important;}
.navlinks a.service-icon-link img{display:block;width:30px;height:30px;object-fit:contain;}
.navlinks a.service-icon-link:hover,.navlinks a.service-icon-link:focus-visible,.navlinks a.service-icon-link.active{background:#ffffff18;outline-offset:3px;}
.navlinks a.service-icon-link:hover{transform:translateY(-2px);}

/* Footer service icons: only the four service links are represented by icons. */
.footer-links .footer-service-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-height:38px;padding:5px;border-radius:6px;transition:background .2s,transform .2s;}
.footer-links .footer-service-icon img{display:block;width:27px;height:27px;object-fit:contain;}
.footer-links .footer-service-icon:hover,.footer-links .footer-service-icon:focus-visible{background:#ffffff18;transform:translateY(-2px);}

/* Service page CTA cards: compact, translucent and content-height without changing homepage form. */
.contact-form.service-cta-card{align-self:start;justify-self:end;width:100%;max-width:680px;padding:24px;background:rgba(18,38,51,.68);color:#edf2f5;border:1px solid rgba(104,133,149,.42);box-shadow:0 16px 42px rgba(0,0,0,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.contact-form.service-cta-card h3{margin-bottom:10px}
.contact-form.service-cta-card>p{margin-bottom:14px}
.contact-form.service-cta-card .form-note{margin:10px 0 0}
@media(max-width:780px){.contact-form.service-cta-card{justify-self:stretch;max-width:100%;padding:20px}}
@media(max-width:520px){.contact-form.service-cta-card{padding:17px}}