/*
 * Nexpert homepage styles, from the Claude Design source:
 * 1. Company/digital-presence/website/design/homepage-redesign-fi/index.html
 * Change the design there first, then bring the change here.
 */
@font-face { font-family:"Lato"; font-style:normal; font-weight:300; font-display:swap; src:url("../fonts/Lato-Light.woff") format("woff"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/Lato-Regular.woff") format("woff"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/Lato-Bold.woff") format("woff"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:900; font-display:swap; src:url("../fonts/Lato-Black.woff") format("woff"); }
@font-face { font-family:"Lato"; font-style:italic; font-weight:900; font-display:swap; src:url("../fonts/Lato-BlackItalic.woff") format("woff"); }

:root {
  --shell:#e4e1da;
  --paper:#f8f7f3;
  --white:#fff;
  --ink:#3b3a38;
  --muted:#696761;
  --line:rgba(59,58,56,.22);
  --gold:#da990f;
  --clay:#c8a17e;
  --earth:#a98869;
  --forest:#4f6254;
  --brown:#78532f;
  --radius:clamp(18px,1.6vw,26px);
  --gutter:clamp(18px,2.5vw,38px);
  --pad:clamp(28px,5vw,76px);
  --section-space:clamp(78px,10vw,152px);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--shell); color:var(--ink); font-family:"Lato","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
img { display:block; width:100%; height:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
button { color:inherit; }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }

.page { width:min(100%,1520px); margin:0 auto; padding:var(--gutter); }
.panel { position:relative; overflow:hidden; margin-bottom:var(--gutter); border-radius:var(--radius); background:var(--paper); }
.section-pad { padding:var(--section-space) var(--pad); }
.label { margin:0 0 22px; font-size:.77rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.display { margin:0; font-size:clamp(2.6rem,5vw,5rem); font-weight:400; line-height:1.01; letter-spacing:-.045em; text-wrap:balance; }
.section-title { margin:0; font-size:clamp(2.25rem,4.3vw,4.5rem); font-weight:400; line-height:1.03; letter-spacing:-.04em; text-wrap:balance; }
.body-lg { margin:0; max-width:720px; color:var(--muted); font-size:clamp(1.08rem,1.5vw,1.32rem); font-weight:300; line-height:1.62; }
.circle-link { width:86px; height:86px; display:inline-flex; align-items:center; justify-content:center; border:1px solid currentColor; border-radius:50%; font-size:.875rem; font-weight:700; letter-spacing:.05em; text-align:center; text-transform:uppercase; transition:background .25s ease,color .25s ease,transform .25s ease; }
.circle-link:hover { background:var(--ink); color:var(--paper); transform:translateY(-3px); }
.arrow { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; }

.hero { min-height:min(920px,calc(100vh - (2 * var(--gutter)))); color:#fff; background:#272723; }
.hero-media,.hero-shade { position:absolute; inset:0; }
.hero-media img { object-position:center 55%; transform:scale(1.01); }
.hero-shade { background:linear-gradient(90deg,rgba(27,27,24,.80) 0%,rgba(27,27,24,.54) 47%,rgba(27,27,24,.24) 82%),linear-gradient(0deg,rgba(25,25,22,.50),transparent 52%); }
.nav { position:relative; z-index:3; display:grid; grid-template-columns:minmax(170px,1fr) auto minmax(170px,1fr); align-items:center; gap:clamp(22px,3vw,48px); min-height:90px; padding:18px clamp(24px,3vw,46px); }
.wordmark { display:inline-flex; align-items:center; gap:.14em; color:#fff; font-size:clamp(1.8rem,2.35vw,2.35rem); font-style:italic; font-weight:900; line-height:1; letter-spacing:-.06em; }
.north-star { color:var(--gold); font-size:.82em; font-style:normal; line-height:1; }
.desktop-nav { display:flex; align-items:center; justify-self:center; gap:clamp(18px,2.2vw,34px); }
.desktop-nav a { position:relative; padding:9px 0; color:rgba(255,255,255,.9); font-size:.84rem; font-weight:700; letter-spacing:.035em; }
.desktop-nav a:not(.nav-contact)::after { position:absolute; right:0; bottom:3px; left:0; height:1px; background:currentColor; content:""; transform:scaleX(0); transform-origin:right; transition:transform .22s ease; }
.desktop-nav a:not(.nav-contact):hover::after { transform:scaleX(1); transform-origin:left; }
.nav-actions { display:flex; align-items:center; justify-self:end; gap:12px; }
.language,.nav-contact { min-height:42px; display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.language { min-width:42px; padding:0 9px; border:0; border-radius:999px; text-decoration:none; transition:background .18s ease; }
.language:hover { background:rgba(255,255,255,.14); }
.nav-contact { gap:10px; padding:0 18px; border:1px solid rgba(255,255,255,.72); border-radius:999px; transition:background .18s ease,color .18s ease; }
.nav-contact:hover { background:#fff; color:var(--ink); }
.menu-button { display:none; align-items:center; gap:10px; padding:10px 16px; border:0; border-radius:999px; background:rgba(255,255,255,.96); color:var(--ink); cursor:pointer; font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.menu-icon { display:grid; gap:3px; }
.menu-icon i { width:13px; height:1px; display:block; background:currentColor; }
.hero-menu { position:absolute; z-index:4; top:76px; right:28px; width:min(310px,calc(100% - 56px)); display:none; padding:18px; border-radius:16px; background:rgba(248,247,243,.97); color:var(--ink); box-shadow:0 24px 70px rgba(0,0,0,.18); opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .2s ease,transform .2s ease; }
.hero-menu.open { opacity:1; pointer-events:auto; transform:none; }
.hero-menu a { display:flex; justify-content:space-between; padding:13px 8px; border-bottom:1px solid var(--line); font-size:.92rem; }
.hero-menu a:last-child { border-bottom:0; }
.hero-copy { position:relative; z-index:2; min-height:calc(min(920px,100vh - (2 * var(--gutter))) - 90px); display:flex; flex-direction:column; justify-content:flex-end; padding:80px var(--pad) clamp(62px,8vw,118px); }
.hero h1 { max-width:980px; margin:0; font-size:clamp(3rem,6.8vw,6.7rem); font-weight:400; line-height:.94; letter-spacing:-.055em; text-wrap:balance; }
.hero-line { display:block; }
.rotating-word { min-width:4.55em; display:inline-block; color:var(--gold); transition:opacity .24s ease,transform .24s ease; }
.rotating-word.is-changing { opacity:0; transform:translateY(.18em); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-bottom { margin-top:44px; }
.hero-bottom p { max-width:660px; margin:0; color:rgba(255,255,255,.82); font-size:clamp(1rem,1.35vw,1.22rem); font-weight:300; line-height:1.58; }
.hero .circle-link { flex:0 0 86px; }
.hero .circle-link:hover { background:#fff; color:var(--ink); }

.trust { background:#f2f0ea; }
.trust-inner { padding:clamp(62px,8vw,106px) var(--pad); }
.trust .trust-label { margin-bottom:42px; }
.logos-marquee { position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logos-track { display:flex; align-items:center; width:max-content; gap:clamp(52px,6vw,92px); animation:logos-scroll 34s linear infinite; }
.logo { flex:0 0 auto; min-height:64px; display:flex; align-items:center; justify-content:center; }
.logo img { max-width:170px; height:52px; object-fit:contain; filter:grayscale(1); opacity:.78; }
.logo.vayla img { max-width:210px; height:64px; transform:scale(1.1); }
.logo.lut img { filter:grayscale(1) invert(1) brightness(.38); }
@keyframes logos-scroll { from { transform:translateX(-50%); } to { transform:translateX(0); } }

.approach { background:var(--paper); color:var(--ink); }
.approach-grid { display:block; }
.approach-intro { max-width:720px; margin:0; text-align:left; }
.approach-list { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,4vw,72px); margin:0; padding:clamp(62px,8vw,100px) 0 0; list-style:none; }
.approach-list::before { position:absolute; top:calc(clamp(62px,8vw,100px) + 31px); right:0; left:0; height:1px; background:rgba(181,109,70,.42); content:""; }
.approach-list li { position:relative; }
.approach-list a { min-height:132px; display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center; transition:color .18s ease; }
.approach-list a:hover { color:#9f5936; }
.approach-number { position:relative; z-index:1; width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #b56d46; border-radius:50%; background:var(--paper); color:#b56d46; font-family:inherit; font-size:1.32rem; font-weight:500; }
.approach-list h3 { margin:0; font-family:inherit; font-size:clamp(1.12rem,1.55vw,1.5rem); font-weight:400; line-height:1.25; letter-spacing:-.025em; }
.approach-list .arrow { display:none; }

.audience { position:relative; isolation:isolate; margin-bottom:var(--gutter); }
.audience-intro { position:sticky; z-index:0; top:var(--gutter); min-height:620px; margin-bottom:0; color:#fff; background:#303630; }
.audience-intro-media,.audience-intro-shade { position:absolute; inset:0; }
.audience-intro-media img { object-position:center 55%; }
.audience-intro-shade { background:linear-gradient(90deg,rgba(26,30,27,.78),rgba(26,30,27,.26) 76%),linear-gradient(0deg,rgba(26,30,27,.48),transparent 52%); }
.audience-intro-copy { position:relative; z-index:2; min-height:620px; display:flex; flex-direction:column; justify-content:flex-start; gap:clamp(24px,4vw,42px); padding:var(--pad); }
.audience-intro-copy .section-title { max-width:760px; }
.audience-intro-copy .body-lg { max-width:560px; color:rgba(255,255,255,.78); }
.audience-stack { --audience-card-height:clamp(440px,60vh,520px); --audience-title-band:116px; position:relative; z-index:1; margin-top:var(--gutter); }
.audience-hold { min-height:clamp(360px,62vh,620px); }
.audience-card { position:sticky; top:calc(clamp(184px,25vh,220px) + var(--stack-offset,0px)); height:var(--audience-card-height); overflow:visible; }
.audience-card:nth-of-type(1) { --stack-offset:0px; z-index:1; }
.audience-card:nth-of-type(2) { --stack-offset:116px; z-index:2; }
.audience-card:nth-of-type(3) { --stack-offset:232px; z-index:3; }
.audience-spacer { height:var(--gutter); }
.audience-panel { height:var(--audience-card-height); display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr); overflow:hidden; border:1px solid rgba(59,58,56,.12); border-radius:var(--radius); background:var(--paper); box-shadow:0 18px 50px rgba(38,37,34,.08); }
.audience-copy { display:flex; flex-direction:column; justify-content:flex-start; gap:0; padding:0 clamp(34px,4.5vw,58px) clamp(34px,4.5vw,58px); }
.audience-card h3 { min-height:var(--audience-title-band); display:flex; align-items:center; max-width:650px; margin:0; font-size:clamp(2rem,2.5vw,2.7rem); font-weight:400; line-height:1.04; letter-spacing:-.04em; }
.audience-card p { max-width:580px; margin:10px 0 0; color:var(--muted); font-size:1rem; font-weight:300; line-height:1.6; }
.audience-media { min-height:0; margin:24px 24px 24px 0; overflow:hidden; border-radius:15px; background:#d8d6cf; }
.audience-media img { transition:transform .55s ease; }
.audience-card:hover .audience-media img { transform:scale(1.02); }

.services-head { display:flex; justify-content:space-between; align-items:flex-end; gap:36px; margin-bottom:62px; }
.services-table { border-top:1px solid var(--ink); }
.service { display:grid; grid-template-columns:54px minmax(250px,.9fr) minmax(280px,1.2fr) 28px; gap:28px; align-items:center; padding:32px 0; border-bottom:1px solid var(--line); }
.service-number { color:var(--gold); font-size:.78rem; font-weight:700; }
.service h3 { margin:0; font-size:clamp(1.25rem,2vw,2rem); font-weight:400; letter-spacing:-.025em; }
.service p { margin:0; color:var(--muted); font-size:1rem; font-weight:300; line-height:1.55; }

.projects { background:#bea080; }
.projects .section-title { max-width:680px; }
.project-field { position:relative; min-height:700px; margin-top:64px; }
.project-card { position:absolute; overflow:hidden; padding:0; border:0; border-radius:16px; color:#fff; background:#595650; cursor:pointer; text-align:left; }
.project-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(24,24,22,.74),transparent 64%); }
.project-card img { transition:transform .6s ease; }
.project-card:hover img { transform:scale(1.025); }
.project-copy { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:24px; }
.project-meta { display:block; margin-bottom:8px; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.project-card [role="heading"] { display:block; margin:0; font-size:clamp(1.2rem,2vw,2rem); font-weight:400; line-height:1.12; letter-spacing:-.025em; }
.project-view { display:flex; justify-content:space-between; gap:18px; margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.32); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.project-main { left:0; top:0; width:42%; height:560px; }
.project-plan { left:46%; top:120px; width:25%; height:520px; }
.project-quality { right:0; top:0; width:25%; height:430px; }
.projects-action { position:absolute; right:0; bottom:0; }
.project-dialog { width:min(760px,calc(100% - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:20px; background:var(--paper); color:var(--ink); box-shadow:0 30px 90px rgba(24,24,22,.34); }
.project-dialog::backdrop { background:rgba(30,30,27,.68); backdrop-filter:blur(4px); }
.project-dialog-inner { position:relative; padding:clamp(34px,6vw,72px); }
.project-dialog-close { position:absolute; top:20px; right:20px; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; font-size:1.5rem; font-weight:300; line-height:1; }
.project-dialog .label { padding-right:58px; color:var(--brown); }
.project-dialog h3 { max-width:620px; margin:0; font-size:clamp(2.1rem,4vw,3.7rem); font-weight:400; line-height:1.03; letter-spacing:-.045em; }
.project-dialog p { margin:34px 0 0; color:var(--muted); font-size:1.08rem; font-weight:300; line-height:1.72; }
.project-dialog a { display:inline-flex; margin-top:30px; padding-bottom:5px; border-bottom:1px solid currentColor; font-size:.8rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }

.testimonials { background:var(--paper); color:var(--ink); }
.testimonials-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:clamp(52px,7vw,88px); }
.testimonials .label { color:var(--forest); }
.testimonials .section-title { max-width:760px; }
.testimonial-carousel { position:relative; }
.testimonial-stage { position:relative; }
.testimonial-slide { min-height:470px; display:none; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:transparent; }
.testimonial-slide.active { display:block; }
.testimonial-content { min-height:470px; display:flex; flex-direction:column; justify-content:space-between; max-width:900px; margin:0 auto; padding:clamp(52px,7vw,92px) clamp(76px,10vw,148px); }
.testimonial-mark { color:var(--gold); font-family:Georgia,serif; font-size:4.5rem; line-height:.65; }
.testimonial-content blockquote { margin:34px 0 52px; font-size:clamp(1.35rem,2.25vw,2.15rem); font-weight:300; line-height:1.42; letter-spacing:-.02em; }
.testimonial-content cite { display:block; font-size:1rem; font-style:normal; font-weight:700; }
.testimonial-org { display:block; margin-top:7px; color:var(--forest); font-size:.84rem; font-weight:400; line-height:1.45; }
.testimonial-person { display:flex; align-items:center; justify-content:center; gap:14px; text-align:center; }
.testimonial-avatar { position:relative; width:52px; height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--forest); font-size:.9rem; font-weight:900; letter-spacing:-.04em; }
.testimonial-avatar img { width:40px; height:40px; object-fit:contain; filter:grayscale(1); opacity:.84; }
.testimonial-avatar img.lut { filter:grayscale(1) invert(1) brightness(.28); }
.carousel-button { position:absolute; z-index:2; top:50%; width:52px; height:52px; border:1px solid var(--line); border-radius:50%; background:rgba(248,247,243,.94); cursor:pointer; font-size:1.2rem; transform:translateY(-50%); transition:background .18s ease,color .18s ease; }
.carousel-prev { left:20px; }
.carousel-next { right:20px; }
.carousel-button:hover { background:var(--ink); color:#fff; }
.carousel-controls { display:flex; justify-content:center; margin-top:28px; }
.carousel-dots { display:flex; align-items:center; justify-content:center; gap:9px; }
.carousel-dot { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(59,58,56,.25); cursor:pointer; }
.carousel-dot[aria-current="true"] { background:var(--gold); transform:scale(1.25); }

.about { display:grid; grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr); min-height:700px; }
/* The photo keeps the section padding as its margin, like the article cards below (Desiana, 2026-09-30); no right margin, the copy column has its own padding. */
.about-media { margin:var(--pad) 0 var(--pad) var(--pad); border-radius:15px; overflow:hidden; }
.about-media img { object-position:center; }
.about-copy { display:flex; flex-direction:column; justify-content:center; padding:var(--pad); }
.about-copy .label { color:var(--brown); }
.about h2 { max-width:720px; margin:0; font-size:clamp(2.6rem,4.35vw,4.8rem); font-weight:400; line-height:.98; letter-spacing:-.05em; text-wrap:balance; }
.about-role { max-width:620px; margin:18px 0 0; color:var(--brown); font-size:clamp(1rem,1.35vw,1.2rem); font-weight:700; line-height:1.35; }
.about-statement { max-width:690px; margin:44px 0 52px; font-size:clamp(1.35rem,2.2vw,2.2rem); font-weight:300; line-height:1.42; letter-spacing:-.025em; }
.credentials { border-top:1px solid var(--line); }
.credential { padding:17px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:.92rem; }
.about-link { display:inline-flex; align-items:center; gap:12px; align-self:flex-start; margin-top:38px; font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }

.insights-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:60px; }
.text-link { display:inline-flex; align-items:center; gap:12px; padding-bottom:5px; border-bottom:1px solid currentColor; font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.insight-grid { display:grid; grid-template-columns:1.25fr .875fr .875fr; gap:var(--gutter); }
.insight { position:relative; min-height:520px; display:block; overflow:hidden; border:0; border-radius:16px; background:#4f4d48; color:#fff; transition:transform .25s ease; }
.insight::after { position:absolute; z-index:1; inset:0; background:linear-gradient(0deg,rgba(22,24,21,.82),rgba(22,24,21,.08) 72%); content:""; }
.insight:hover { transform:translateY(-4px); }
.insight-media { position:absolute; inset:0; height:100%; display:block; overflow:hidden; background:#d7d4cc; }
.insight-media img { transition:transform .4s ease; }
.insight:hover .insight-media img { transform:scale(1.025); }
.insight-body { position:relative; z-index:2; min-height:520px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; color:#fff; }
.insight-date { font-size:.75rem; color:rgba(255,255,255,.76); }
.insight h3 { margin:16px 0 28px; font-size:clamp(1.45rem,2.35vw,2.4rem); font-weight:400; line-height:1.12; letter-spacing:-.035em; }
.insight-body .arrow { align-self:flex-end; }

.faq.section-pad { padding-top:clamp(58px,6vw,92px); padding-bottom:clamp(58px,6vw,92px); }
.faq details { border-top:1px solid var(--ink); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:34px 0; cursor:pointer; list-style:none; font-size:clamp(1.6rem,3vw,3.2rem); font-weight:400; letter-spacing:-.035em; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--gold); font-size:2rem; font-weight:300; }
.faq details[open] summary::after { content:"\2212"; }
.faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:42px 70px; padding:12px 0 42px; }
.faq-item h3 { margin:0 0 12px; font-size:1.1rem; font-weight:700; }
.faq-item p { margin:0; color:var(--muted); font-size:1rem; font-weight:300; line-height:1.65; }

.contact { min-height:600px; display:flex; flex-direction:column; justify-content:space-between; padding:var(--pad); background:#c9956c; }
.contact-top { display:flex; align-items:flex-start; justify-content:space-between; gap:44px; }
.contact h2 { max-width:900px; margin:0; font-size:clamp(3rem,6.2vw,6.6rem); font-weight:400; line-height:.96; letter-spacing:-.055em; }
.contact .circle-link { flex:0 0 92px; width:92px; height:92px; }
.contact-foot { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:30px; padding-top:44px; border-top:1px solid rgba(59,58,56,.35); font-size:.82rem; line-height:1.7; }
.footer-links { display:flex; flex-wrap:wrap; gap:12px 22px; }
.footer-links a { border-bottom:1px solid rgba(59,58,56,.45); }

.lead { min-height:540px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); align-items:end; gap:clamp(32px,4vw,64px); padding:var(--section-space) var(--pad); background:#c9956c; }
.lead h2 { max-width:760px; margin:0; font-size:clamp(2.5rem,4.65vw,5.15rem); font-weight:400; line-height:.99; letter-spacing:-.052em; text-wrap:balance; }
.lead-copy > p:last-child { max-width:620px; margin:30px 0 0; color:rgba(59,58,56,.8); font-size:1.06rem; font-weight:300; line-height:1.62; }
.lead-form form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:10px; border:1px solid rgba(59,58,56,.18); border-radius:14px; background:rgba(248,247,243,.94); box-shadow:0 18px 42px rgba(59,58,56,.12); }
.lead-form input,.lead-form button { min-height:62px; border:0; background:transparent; color:var(--ink); }
.lead-cta-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:22px 34px; border-radius:10px; background:var(--ink); color:#fff; cursor:pointer; font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; transition:background .2s ease; }
.lead-cta-button:hover { background:#232220; }
.lead-form input { min-width:0; padding:0 18px; font-size:1.08rem; }
.lead-form input::placeholder { color:rgba(59,58,56,.62); }
.lead-form button { display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:0 22px; border-radius:10px; background:var(--ink); color:#fff; cursor:pointer; font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.screen-reader-text { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-footer { display:grid; grid-template-columns:minmax(280px,1.35fr) repeat(3,minmax(150px,.65fr)); gap:clamp(40px,6vw,100px); padding:clamp(82px,10vw,150px) var(--pad) 34px; background:#343330; color:rgba(255,255,255,.8); }
.site-footer .wordmark { margin-bottom:34px; }
.footer-lead p { max-width:420px; margin:0; font-size:clamp(1.05rem,1.45vw,1.25rem); font-weight:300; line-height:1.62; }
.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:12px; font-size:.92rem; line-height:1.6; }
.footer-column h2 { margin:0 0 18px; color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.footer-column address { margin-top:12px; font-style:normal; }
.footer-column a:hover { color:#fff; }
.photo-credits { grid-column:1 / -1; color:rgba(255,255,255,.65); font-size:.76rem; line-height:1.6; }
.photo-credits summary { display:inline-block; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.photo-credits p { max-width:960px; margin:12px 0 0; }
.photo-credits a { text-decoration:underline; text-underline-offset:2px; }
.footer-bottom { grid-column:1 / -1; display:flex; justify-content:space-between; gap:30px; margin-top:clamp(60px,9vw,130px); padding-top:26px; border-top:1px solid rgba(255,255,255,.18); font-size:.76rem; }

@media (max-width:980px) {
  .approach-grid { grid-template-columns:1fr; }
  .approach-intro { position:static; }
  .audience-panel { grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); }
  .service { grid-template-columns:44px 1fr 24px; }
  .service p { display:none; }
  .project-main { width:48%; }
  .project-plan { left:52%; width:22%; }
  .project-quality { width:24%; }
  .testimonial-slide { grid-template-columns:minmax(190px,.52fr) minmax(0,1.48fr); }
  .about { grid-template-columns:38% 1fr; }
  .insight-grid { grid-template-columns:1fr 1fr; }
  .insight:first-child { grid-column:1 / -1; min-height:300px; }
  .site-footer { grid-template-columns:1.2fr repeat(3,1fr); gap:38px; }
}

@media (max-width:900px) {
  .nav { grid-template-columns:1fr auto; }
  .desktop-nav { display:none; }
  .nav-actions { display:none; }
  .menu-button { display:flex; }
  .hero-menu { display:block; }
  .site-footer { grid-template-columns:1fr 1fr 1fr; }
  .footer-lead { grid-column:1 / -1; max-width:620px; }
}

@media (max-width:680px) {
  :root { --radius:16px; --gutter:7px; --pad:24px; --section-space:76px; }
  .page { padding:var(--gutter); }
  .hero { min-height:720px; }
  .hero-media img { object-position:60% center; }
  .hero-shade { background:linear-gradient(90deg,rgba(27,27,24,.78),rgba(27,27,24,.42)),linear-gradient(0deg,rgba(25,25,22,.42),transparent 55%); }
  .nav { padding:18px; }
  .wordmark { font-size:1.6rem; }
  .hero-menu { top:84px; right:18px; width:calc(100% - 36px); }
  .hero-copy { min-height:650px; padding:72px 24px 42px; }
  .hero h1 { font-size:clamp(3rem,14vw,4.4rem); }
  .rotating-word { min-width:0; }
  .hero-bottom { align-items:flex-start; flex-direction:column; margin-top:32px; }
  .hero .circle-link { width:78px; height:78px; flex-basis:78px; font-size:.78rem; }
  .trust-inner { padding:66px 24px; }
  .trust .trust-label { margin-bottom:32px; }
  .logo { min-height:52px; }
  .logo img { max-width:130px; height:40px; }
  .logo.vayla img { max-width:160px; height:52px; transform:scale(1.05); }
  .approach-intro { text-align:left; }
  .approach-list { grid-template-columns:1fr; gap:0; padding-top:48px; }
  .approach-list::before { top:98px; bottom:50px; left:31px; width:1px; height:auto; }
  .approach-list a { min-height:100px; flex-direction:row; gap:22px; text-align:left; }
  .approach-number { flex:0 0 64px; }
  .audience-intro,.audience-intro-copy { position:relative; top:auto; min-height:580px; }
  .audience-intro-copy { padding:38px 24px; }
  .audience-stack { --audience-card-height:auto; --audience-title-band:auto; }
  .audience-hold { display:none; }
  .audience-card { position:relative; top:auto; height:auto; margin-bottom:7px; }
  .audience-spacer { display:none; }
  .audience-panel { height:auto; min-height:0; grid-template-columns:1fr; box-shadow:none; }
  .audience-copy { min-height:0; gap:18px; padding:34px 24px 30px; }
  .audience-media { height:310px; margin:0 7px 7px; }
  .services-head { align-items:flex-start; flex-direction:column; margin-bottom:44px; }
  .service { grid-template-columns:34px 1fr 20px; gap:13px; padding:26px 0; }
  .project-field { display:grid; grid-template-columns:1fr; gap:7px; min-height:0; margin-top:42px; }
  .project-card { position:relative; inset:auto; width:100%; height:420px; }
  .project-plan,.project-quality { height:360px; }
  .projects-action { position:static; margin-top:26px; }
  .testimonials-head { align-items:flex-start; flex-direction:column; }
  .testimonial-slide,.testimonial-content { min-height:500px; }
  .testimonial-content { padding:54px 66px 42px; }
  .testimonial-content blockquote { margin:28px 0 40px; font-size:1.28rem; }
  .carousel-button { width:44px; height:44px; }
  .carousel-prev { left:10px; }
  .carousel-next { right:10px; }
  .about { grid-template-columns:1fr; }
  .about-media { height:520px; margin:var(--pad) var(--pad) 0; }
  .about-copy { padding:70px 24px 76px; }
  .about h2 { font-size:clamp(2.45rem,11vw,4rem); }
  .about-statement { margin-top:36px; }
  .insights-head { align-items:flex-start; flex-direction:column; }
  .insight-grid { grid-template-columns:1fr; }
  .insight:first-child { grid-column:auto; }
  .insight { min-height:300px; }
  .faq-grid { grid-template-columns:1fr; gap:30px; }
  .contact { min-height:680px; }
  .contact-top { flex-direction:column; }
  .contact-foot { grid-template-columns:1fr; gap:18px; }
  .lead { min-height:620px; grid-template-columns:1fr; align-content:space-between; gap:40px; }
  .lead-form form { grid-template-columns:1fr; }
  .lead-form input { min-height:56px; border:1px solid rgba(59,58,56,.24); border-radius:10px; background:var(--white); }
  .lead-form button { min-height:54px; justify-content:space-between; padding-right:18px; padding-left:18px; }
  .lead-cta-button { min-height:54px; width:100%; justify-content:space-between; padding-right:18px; padding-left:18px; }
  .site-footer { grid-template-columns:1fr 1fr; gap:52px 28px; padding:78px 24px 28px; }
  .footer-lead { grid-column:1 / -1; }
  .footer-bottom { flex-direction:column; grid-column:1 / -1; }
}

.hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:30px; }
.cta-button { display:inline-flex; align-items:center; gap:12px; padding:17px 30px; border-radius:999px; background:var(--gold); color:#20180a; font-size:.82rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; transition:transform .2s ease; }
.cta-button:hover { transform:translateY(-2px); }
.cta-link { display:inline-flex; align-items:center; gap:10px; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.5); color:#fff; font-size:.82rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.approach-intro-note { max-width:600px; margin:20px 0 0; color:var(--muted); font-size:1.02rem; font-weight:300; line-height:1.6; }
.approach-step { min-height:132px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.approach-step p { margin:0; max-width:230px; color:var(--muted); font-size:.92rem; font-weight:300; line-height:1.55; }
.about-body { margin:0 0 16px; color:var(--muted); font-size:1.05rem; font-weight:300; line-height:1.6; max-width:640px; }
.insight-body p { margin:0 0 20px; color:rgba(255,255,255,.82); font-size:.92rem; font-weight:300; line-height:1.5; max-width:32ch; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* WordPress integration (not part of the Claude Design export). */
/*
 * The design was drawn against browser defaults. GeneratePress and theme.json
 * change some of those defaults on every page, so restore them here. The
 * `html <element>` selectors (specificity 0,0,2) beat GeneratePress's bare
 * element rules but lose to every class-based rule from the design.
 */
body.nexpert-front-page { font-size:16px; line-height:normal; }
/* WordPress adds the class "page" to <body> on static pages (including a static
   front page); the design's .page frame rule must not apply to the body itself. */
body.page { width:auto; margin:0; padding:0; }
html :is(h1,h2,h3,h4,h5,h6) { line-height:inherit; }
html p { margin:1em 0; }
html address { margin-bottom:0; }
html blockquote { padding:0; border-left:0; font-style:normal; }
html button { padding:1px 6px; }
.nexpert-skip-link { position:absolute; left:-9999px; top:0; z-index:100000; padding:12px 18px; border-radius:999px; background:var(--paper, #fff); color:var(--ink, #3b3a38); }
.nexpert-skip-link:focus { left:16px; top:16px; }
.screen-reader-text { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* 0.5.3 header search: magnifier before the language link opens a panel. */
.search-toggle { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:999px; background:transparent; color:inherit; cursor:pointer; transition:background .18s ease; }
.nav-search { position:absolute; z-index:5; top:76px; right:28px; width:min(460px,calc(100% - 56px)); padding:10px; border-radius:16px; background:var(--white,#fff); color:var(--ink); box-shadow:0 24px 70px rgba(0,0,0,.2); }
.nav-search[hidden] { display:none; }
.nav-search .search-form,.hero-menu .search-form,.header-menu .search-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; max-width:none; margin:0; padding:0; border:0; background:transparent; }
.nav-search input,.hero-menu .search-form input,.header-menu .search-form input { min-width:0; min-height:48px; padding:0 14px; border:1px solid rgba(59,58,56,.24); border-radius:10px; background:#fff; color:var(--ink); font:inherit; font-size:1rem; }
.nav-search button,.hero-menu .search-form button,.header-menu .search-form button { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border:0; border-radius:10px; background:var(--ink); color:#fff; cursor:pointer; font:inherit; font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.hero-menu .search-form,.header-menu .search-form { margin-bottom:8px; }
.admin-bar .nav-search { top:calc(76px + 32px); }
@media (max-width:900px) { .nav-search { display:none; } }
.search-toggle:hover { background:rgba(255,255,255,.14); }
.admin-bar .nav-search { top:calc(var(--gutter, 16px) + 76px); }

/* 0.5.5 booking panel: heading at the FAQ heading size, the button centred
   against the heading block, the six points as a plain ruled grid. */
.lead { min-height:0; grid-template-columns:minmax(0,1fr) auto; align-items:center; row-gap:clamp(36px,4vw,56px); }
.lead h2 { max-width:none; font-size:clamp(1.6rem,3vw,3.2rem); line-height:1.08; letter-spacing:-.035em; }
.lead .lead-copy > p.lead-intro { max-width:620px; margin:clamp(18px,2vw,26px) 0 0; color:var(--ink); font-size:1.06rem; font-weight:400; line-height:1.6; }
.lead-list { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(24px,3vw,44px); margin:0; padding:0; list-style:none; color:var(--ink); font-size:1.02rem; font-weight:400; line-height:1.5; }
.lead-list li { margin:0; padding:16px 0 20px; border-top:1px solid rgba(59,58,56,.28); }
@media (max-width:980px) {
  .lead { grid-template-columns:1fr; align-items:start; }
  .lead-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* One column: keep the intro next to its list, the button after it. */
  .lead-list { order:2; }
  .lead-form { order:3; }
}
@media (max-width:680px) {
  .lead { min-height:0; row-gap:28px; }
  .lead-list { grid-template-columns:1fr; }
  .lead-list li { padding:12px 0 14px; }
}

/* 0.5.9 (Desiana, 2026-09-30) */
/* "Ideoita sujuvampaan projektityöhön" at the FAQ heading size. */
#insights .section-title { font-size:clamp(1.6rem,3vw,3.2rem); line-height:1.08; letter-spacing:-.035em; }
/* "Kaikki projektit" as a pill like the navbar's "Ota yhteyttä", in dark on gold. */
.pill-link { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 18px; border:1px solid rgba(59,58,56,.72); border-radius:999px; color:var(--ink); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:background .18s ease,color .18s ease; }
.pill-link:hover { background:var(--ink); color:#fff; }
/* Approach: step descriptions appear on hover where hovering exists
   (touch screens keep them visible). */
@media (hover:hover) and (pointer:fine) {
  .approach-step p { opacity:0; transform:translateY(-4px); transition:opacity .2s ease,transform .2s ease; }
  .approach-list li:hover .approach-step p { opacity:1; transform:none; }
}
/* Approach on phones, where the steps stack (Desiana, 2026-09-30): room
   between the steps, and no connecting line, which ran through the step text. */
@media (max-width:680px) {
  .approach-list { gap:44px; }
  .approach-list::before { display:none; }
}

/* Mobile menu (Desiana, 2026-10-01): the button stays above the open panel
   and turns into "Sulje" with an X; the logged-in admin-bar offset that
   pulled the panel up over the button is removed (the panel is positioned
   inside its own panel, so the admin bar does not change its offset). */
.menu-button { position:relative; z-index:6; }
.menu-button[aria-expanded="true"] .menu-icon { gap:0; }
.menu-button[aria-expanded="true"] .menu-icon i:first-child { transform:translateY(.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-icon i:last-child { transform:translateY(-.5px) rotate(-45deg); }

/* Footer social icons under "Tietosuojaseloste" (Desiana, layout D1, 2026-10-01). */
.footer-social { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.footer-social a { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.4); border-radius:50%; color:#fff; transition:background .18s ease,color .18s ease,border-color .18s ease; }
.footer-social a:hover,.footer-social a:focus-visible { border-color:#fff; background:#fff; color:#343330; }