/* NOCTRA / Edition 06 — editorial refinements and production UI */
:root{--quiet:#aaa6a3;--frost:#ebe8e2;--thin:rgba(240,235,228,.16)}
[hidden]{display:none!important}
.skip-link{position:fixed;left:16px;top:-100px;z-index:999;background:#f2eee6;color:#131315;padding:13px 18px;font-weight:700;transition:top .2s}
.skip-link:focus{top:16px}
body{font-feature-settings:"kern" 1}
main{min-height:35vh}
.site-header .brand{transition:opacity .2s}.site-header .brand:hover{opacity:.75}
.nav-contact{transition:color .2s,border-color .2s}.nav-contact:hover{color:#f1e6d6;border-color:#f1e6d6}
.footer-links a:focus-visible,.desktop-nav a:focus-visible{outline-offset:6px}
.site-footer{border-top:1px solid rgba(255,255,255,.09)}
.page-hero .container{position:relative}
.page-hero:before{border-color:rgba(230,224,216,.13)}
.page-hero .lead{letter-spacing:-.014em}
/* Brand hero: never obscure content, keep motion minimal */
.hero-brand-scene{opacity:.9}
.hero-brand-mark{filter:drop-shadow(0 0 68px rgba(255,255,255,.08))}
.hero-brand-word{font-weight:400;font-family:'DM Sans',Arial,sans-serif;letter-spacing:-.09em;opacity:.35}
.hero-brand-sweep{mix-blend-mode:screen}
/* Subtle editorial benefits between manifesto and portfolio */
.value-strip{border-top:1px solid var(--thin);border-bottom:1px solid var(--thin);background:#101013;padding:30px 0}
.value-strip-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.value-strip-inner>div{display:flex;flex-direction:column;gap:13px;padding:10px 22px 10px 0;position:relative}
.value-strip-inner>div:not(:last-child):after{content:'';position:absolute;right:8px;top:3px;bottom:3px;width:1px;background:var(--thin)}
.value-strip .fine{color:#a99f94;font-size:9px;letter-spacing:.16em}
.value-strip strong{font-size:clamp(16px,1.4vw,20px);font-weight:500;letter-spacing:-.035em}
.case-demo-link{display:inline-flex;margin-top:16px;border-bottom:1px solid #a8a19c;padding-bottom:7px;font-size:12px;font-weight:700;color:#272323;text-transform:uppercase;letter-spacing:.08em;transition:opacity .2s}
.case-demo-link:hover{opacity:.6}
/* Quote wizard — minimal, informative, usable, accessible */
.quote-wizard{border:1px solid rgba(239,233,223,.2);padding:clamp(23px,3.2vw,51px);background:linear-gradient(145deg,#161619,#0c0c0f 72%);position:relative;min-width:0}
.quote-wizard:before{content:'';position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);pointer-events:none}
.wizard-meta{display:flex;justify-content:space-between;align-items:center;color:#c8c0b7;gap:12px}
.wizard-fraction{font-variant-numeric:tabular-nums;color:#e6e1d9}
.wizard-track{margin:19px 0 16px;height:2px;background:#484346;overflow:hidden}
.wizard-track-fill{display:block;width:33.3333%;height:100%;background:#e8dfd4;transition:width .45s cubic-bezier(.22,.8,.25,1)}
.wizard-labels{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#716d70;margin-bottom:48px}
.wizard-labels .active{color:#f1eee9}
.wizard-panel h3{font-size:clamp(32px,3.1vw,51px);line-height:1.1;font-weight:400;letter-spacing:-.065em;margin-bottom:14px;max-width:600px}
.wizard-help{color:#a9a3a4;line-height:1.8;margin-bottom:36px;max-width:550px}
.quote-wizard .form-group{margin-bottom:28px}
.quote-wizard .form-group label{color:#d1c9c1}
.quote-wizard input:not([type=checkbox]):not([type=hidden]),.quote-wizard select,.quote-wizard textarea{min-height:50px;background:transparent;border:1px solid #514e50;padding:11px 14px;border-radius:0;transition:border-color .2s,background-color .2s;outline:0}
.quote-wizard input:focus,.quote-wizard textarea:focus,.quote-wizard select:focus{border-color:#ded6ca!important;background:#ffffff06}
.quote-wizard select{padding-right:30px}
.quote-wizard textarea{min-height:150px;resize:vertical}
.quote-wizard .form-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.quote-wizard .quote-extras{margin:8px 0 30px}
.quote-wizard .quote-chip{border-radius:0;min-height:50px}
.wizard-dynamic:not(.is-active){display:none}
.wizard-inline-notice{font-size:13px;line-height:1.8;color:#b6afa8;border-left:1px solid #968b7c;padding:5px 0 5px 19px;margin:10px 0 32px}
.wizard-footer{border-top:1px solid var(--thin);padding-top:22px;margin-top:22px;display:flex;align-items:center;justify-content:flex-end;gap:20px;flex-wrap:wrap}
.wizard-footer .btn{min-width:155px}
.wizard-back{border:0;background:transparent;color:#e8e4de;padding:10px 1px;font-size:12px;text-transform:uppercase;letter-spacing:.13em}
.wizard-back:hover{text-decoration:underline;text-underline-offset:6px}
.wizard-step-caption{font-size:11px;color:#999092;letter-spacing:.08em;margin-right:auto}
.wizard-error{border:1px solid #8b6764;background:#372120;color:#ffd9d3;padding:13px 17px;margin:15px 0;font-size:13px;line-height:1.65}
.wizard-summary{background:#211f20;border:1px solid #4e4949;padding:24px 25px;display:grid;gap:9px;margin-bottom:30px}
.wizard-summary strong{font-size:22px;font-weight:500;letter-spacing:-.035em}
.wizard-summary span:last-child{font-size:12px;color:#aaa29e}
.quote-wizard .privacy-confirm{margin:20px 0}
.quote-promises{display:grid;gap:18px;margin:30px 0 38px}
.quote-promises>div{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--thin);padding-top:15px}
.quote-promises strong{font-size:16px;font-weight:500;color:#ebe7e1}
.quote-promises span{font-size:13px;color:#aaa4a5}
.quote-wizard .form-message{margin-top:18px;line-height:1.8}
/* Pricing editorial explainer */
.pricing-explainer{padding:115px 0 125px;background:#111114;border-top:1px solid var(--thin);border-bottom:1px solid var(--thin)}
.section-eyeline{display:flex;justify-content:space-between;gap:20px;margin-bottom:65px;color:#a9a3a1}
.pricing-explainer-grid{display:grid;grid-template-columns:1fr 1fr;gap:9vw}
.pricing-explainer h2{font-size:clamp(54px,6vw,98px);line-height:1;letter-spacing:-.08em;font-weight:400}
.pricing-explainer h2 .serif{color:#c7bcae}
.pricing-explainer p{color:#bbb5b3;line-height:1.9;font-size:17px;margin:7px 0 30px}
.pricing-choice{border-top:1px solid var(--thin);margin:27px 0 33px}
.pricing-choice>div{padding:18px 0;display:grid;grid-template-columns:30px 1fr;column-gap:12px;border-bottom:1px solid var(--thin)}
.pricing-choice span{color:#aaa49c;font-size:11px}
.pricing-choice strong{font-size:17px;font-weight:500}
.pricing-choice small{grid-column:2;color:#918c8d;font-size:12px}
/* Interactive concept frames */
.portfolio-live{margin:125px 0 55px;padding-top:75px;border-top:1px solid var(--thin)}
.portfolio-live-head{max-width:900px;margin-bottom:63px}
.portfolio-live-head h2{font-size:clamp(49px,6.2vw,91px);letter-spacing:-.078em;font-weight:400;line-height:1;margin:24px 0}
.portfolio-live-head p{color:#aaa6a5;line-height:1.8;max-width:640px;font-size:16px}
.preview-showcase{display:grid;grid-template-columns:minmax(225px,.69fr) minmax(0,1.31fr);gap:5vw;align-items:center;margin-bottom:115px}
.preview-showcase.alt .preview-showcase-copy{order:2}.preview-showcase.alt .browser-window{order:1}
.preview-showcase-copy .fine{color:#b7aba1}
.preview-showcase-copy h3{font-size:clamp(48px,5vw,85px);line-height:1;letter-spacing:-.08em;margin:25px 0}
.preview-showcase-copy p{font-size:17px;line-height:1.8;color:#aaa7a7;max-width:400px;margin-bottom:30px}
.preview-actions{display:flex;flex-direction:column;align-items:flex-start;gap:26px;margin-bottom:34px}
.preview-showcase-copy small{display:block;color:#8d8a88;letter-spacing:.1em;font-size:10px}
.browser-window{border:1px solid #5f5a5c;box-shadow:0 45px 100px #0009;background:#1b1b20;min-width:0}
.browser-chrome{height:42px;background:#252329;display:flex;align-items:center;justify-content:space-between;padding:0 14px;gap:15px;font-size:10px;letter-spacing:.11em;color:#aaa3a2;white-space:nowrap}
.browser-dots{display:flex;gap:6px}.browser-dots i{height:7px;width:7px;border-radius:50%;background:#777177;display:inline-block}
.browser-dots i:nth-child(2){opacity:.6}.browser-dots i:nth-child(3){opacity:.3}
.preview-device{display:flex;gap:5px}
.preview-device button{border:1px solid #5c575b;background:transparent;color:#a9a1a5;width:29px;height:26px;display:grid;place-items:center;font-size:16px;padding:0}
.preview-device button.active{background:#dfd7cd;color:#18181a;border-color:#dfd7cd}
.browser-stage{height:420px;overflow:hidden;display:flex;align-items:stretch;justify-content:center;background:#101013;position:relative}
.browser-stage iframe{display:block;border:0;width:100%;height:100%;background:#121214;transition:width .45s cubic-bezier(.22,.8,.25,1),box-shadow .45s}
.browser-window.mobile-mode .browser-stage{padding:12px}
.browser-window.mobile-mode iframe{width:min(390px,100%);box-shadow:0 0 30px #000a;flex-shrink:0}
.browser-stage:focus-within{outline:2px solid #ded8d0;outline-offset:-2px}
.case-demo-cta{border-top:1px solid var(--thin);border-bottom:1px solid var(--thin);padding:70px 0;background:#141316}
.case-demo-cta .container{display:flex;align-items:center;justify-content:space-between;gap:30px}
.case-demo-cta h2{font-size:clamp(39px,4vw,68px);line-height:1;letter-spacing:-.07em;margin:18px 0}
.case-demo-cta p{max-width:650px;color:#a49fa0;line-height:1.8;margin:0}
.case-demo-cta .btn{flex-shrink:0}
/* Studio process pages */
.process-teaser{background:#111114;padding:95px 0;border-top:1px solid var(--thin)}
.process-teaser-row{display:grid;grid-template-columns:1.2fr 1fr;gap:9vw;align-items:end;margin-top:34px}
.process-teaser h2{font-size:clamp(50px,5.5vw,90px);line-height:1.02;letter-spacing:-.075em;margin:0;font-weight:400}
.process-teaser h2 em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:#cbbfb2}
.process-teaser p{color:#b5b0af;font-size:17px;line-height:1.9;margin-bottom:30px}
.process-overview{background:#0b0b0d}
.process-timeline{border-top:1px solid var(--thin)}
.process-milestone{display:grid;grid-template-columns:90px 1fr minmax(130px,.29fr);align-items:start;gap:32px;border-bottom:1px solid var(--thin);padding:49px 0}
.process-no{font-size:17px;color:#b7a99c;letter-spacing:.04em;padding-top:10px}
.process-milestone h2{font-size:clamp(34px,4.2vw,61px);line-height:1.1;letter-spacing:-.065em;font-weight:400;margin-bottom:17px}
.process-milestone p{font-size:16px;color:#b6b0b0;line-height:1.85;max-width:670px;margin-bottom:0}
.process-milestone small{color:#a99f96;font-size:11px;line-height:1.6;letter-spacing:.05em;text-transform:uppercase;padding-top:12px}
.process-promise{background:#e2ded7;color:#161517;padding:105px 0}
.process-promise .fine{color:#716b66}
.process-promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin-top:35px}
.process-promise h2{font-size:clamp(52px,6.5vw,98px);letter-spacing:-.075em;line-height:1.05;font-weight:400}
.process-promise .serif{color:#756f69}
.process-promise p{font-size:18px;line-height:1.8;color:#605b58;margin:0 0 25px}
/* Care page offers need three matching packages */
.care-pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.care-pricing-grid .price-card{padding:33px 29px;min-height:540px}
.care-pricing-grid .price-main h3{font-size:clamp(38px,3vw,55px)}
.care-pricing-grid .price-main .amount{font-size:clamp(38px,3.2vw,58px)}
/* Shared clarity/trust content */
footer .footer-top{gap:7vw}
footer .footer-links a{line-height:2.25}
.faq-item summary{display:flex;justify-content:space-between;gap:20px;align-items:center;cursor:pointer;padding:26px 0;color:#e6e1da;font-size:clamp(16px,1.75vw,24px);letter-spacing:-.02em;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:'+';font:300 28px Georgia,serif;color:#c8c0b6;transition:transform .2s}
.faq-item details[open] summary:after{transform:rotate(45deg)}
.faq-item details .answer{padding-bottom:30px;max-width:850px}
@media(max-width:1150px){
  .preview-showcase{grid-template-columns:.8fr 1.2fr;gap:35px}
  .care-pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-milestone{grid-template-columns:60px 1fr 130px;gap:20px}
}
@media(max-width:850px){
  .value-strip-inner{grid-template-columns:1fr;gap:0}
  .value-strip-inner>div{padding:17px 0;border-bottom:1px solid var(--thin)}
  .value-strip-inner>div:last-child{border-bottom:0}
  .value-strip-inner>div:after{display:none}
  .value-strip strong{font-size:19px}
  .pricing-explainer{padding:85px 0}
  .pricing-explainer-grid,.process-teaser-row,.process-promise-grid{grid-template-columns:1fr;gap:20px}
  .pricing-explainer p{font-size:15px}
  .section-eyeline{margin-bottom:35px}
  .preview-showcase{grid-template-columns:1fr;gap:30px;margin-bottom:95px}
  .preview-showcase.alt .preview-showcase-copy,.preview-showcase.alt .browser-window{order:initial}
  .preview-showcase-copy h3{margin:16px 0}
  .preview-showcase-copy p{max-width:650px}
  .preview-actions{flex-direction:row;align-items:center;flex-wrap:wrap}
  .process-milestone{grid-template-columns:50px 1fr;gap:14px}
  .process-milestone small{grid-column:2;padding-top:0}
  .case-demo-cta .container{display:block}
  .case-demo-cta .btn{margin-top:25px}
}
@media(max-width:600px){
 .quote-wizard{padding:26px 20px}
 .wizard-labels{margin-bottom:30px;font-size:9px;letter-spacing:.06em}
 .quote-wizard .form-two-col{grid-template-columns:1fr;gap:0}
 .wizard-footer{gap:10px}.wizard-footer .btn{min-width:135px;padding:0 15px;gap:18px}
 .wizard-step-caption{font-size:10px}
 .portfolio-live{margin-top:80px;padding-top:45px}
 .browser-stage{height:340px}
 .browser-chrome{font-size:9px}
 .browser-chrome>span{max-width:110px;overflow:hidden;text-overflow:ellipsis}
 .preview-actions{flex-direction:column;align-items:flex-start}
 .pricing-explainer h2{font-size:clamp(45px,11vw,66px)}
 .pricing-explainer .section-eyeline span:last-child{display:none}
 .care-pricing-grid{grid-template-columns:1fr}
 .process-milestone{padding:32px 0}
 .process-milestone h2{font-size:36px}
 .process-milestone p{font-size:14px}
 .process-milestone .process-no{font-size:13px}
 .process-teaser h2,.process-promise h2{font-size:clamp(43px,11vw,65px)}
 .process-teaser{padding:72px 0}
 .process-promise{padding:76px 0}
 .case-demo-cta{padding:55px 0}
}
@media(prefers-reduced-motion:reduce){
  .wizard-track-fill,.browser-stage iframe,.site-header .brand,.nav-contact,.skip-link{transition:none!important}
}
/* Consistent logo-led visual language: no decorative orbital rings */
.page-hero:before{content:'';position:absolute;right:3%;top:22%;width:min(31vw,430px);height:min(31vw,430px);border:none!important;border-radius:0!important;background:url('mark-white.png') center/contain no-repeat;opacity:.045;pointer-events:none}
.symbol-panel:after{display:none!important}
.end-cta:before{width:min(34vw,440px);height:min(34vw,440px);left:auto;right:2%;top:12%;border:0!important;border-radius:0!important;box-shadow:none!important;background:url('mark-white.png') center/contain no-repeat;opacity:.09}
@media(max-width:760px){.page-hero:before{width:52vw;height:52vw;right:-8%;top:19%;opacity:.03}.end-cta:before{width:60vw;height:60vw;right:-15%;top:8%;opacity:.06}}
/* Portfolio iframes load only when visitors ask — reliable poster in local previews */
.browser-stage iframe[hidden]{display:none!important}
.browser-poster{position:absolute;inset:0;overflow:hidden}
.browser-poster-art{position:absolute;inset:0;overflow:hidden}
.browser-poster .art-auto .auto-word{font-size:clamp(54px,5vw,102px)}
.browser-poster .art-lvi .lvi-word{font-size:clamp(48px,4vw,86px)}
.browser-poster-cta{position:absolute;inset:auto 0 0;display:flex;align-items:flex-end;justify-content:space-between;gap:25px;padding:28px 30px 25px;background:linear-gradient(0deg,rgba(5,5,8,.95),rgba(5,5,8,.66) 62%,transparent);z-index:2}
.browser-poster-cta button{border:1px solid #e9e4dd;background:#e9e4dd;color:#151517;padding:14px 18px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;cursor:pointer}
.browser-poster-cta button:hover{background:#cfc9bf}
.browser-poster-cta span{max-width:230px;font-size:11px;line-height:1.6;color:#d1c8c0}
.browser-stage.is-playing .browser-poster{display:none}
.browser-stage.is-playing iframe{display:block}
@media(max-width:600px){.browser-poster-cta{padding:18px;align-items:flex-start;flex-direction:column;gap:11px}.browser-poster-cta span{font-size:10px}.browser-poster-cta button{font-size:10px;padding:12px 14px}}
.notfound-hero{min-height:100svh;display:flex;align-items:center}
.notfound-hero .container{padding-top:80px}
.notfound-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:45px}
@media(max-width:600px){.notfound-hero{min-height:760px}.notfound-actions .btn{width:100%}}
/* Narrow phones (320–360px): keep long Finnish words and CTAs inside viewport */
@media(max-width:360px){
 .page-hero h1{font-size:clamp(48px,14vw,58px)}
 .service-block-main h2{font-size:clamp(37px,11.5vw,46px);overflow-wrap:anywhere}
 .service-block .btn,.end-cta .btn,.service-supplement .btn{max-width:100%;white-space:normal;gap:14px;padding:12px 15px}
}

/* NORDFIX / Edition 07 — real concept preview replaces placeholder cover */
.work-art.art-lvi,.browser-poster-art.art-lvi{background:#18332e url('nordfix-cover.webp') center center/cover no-repeat!important}
.art-lvi::before,.art-lvi::after{display:none!important}
.art-lvi .architecture,.art-lvi .lvi-word,.art-lvi .lvi-top,.art-lvi .lvi-bottom{display:none!important}

/* NORDFIX EDITION 08: photographic editorial redesign instead of illustrated forms. */
.work-art.art-lvi,.browser-poster-art.art-lvi{
 background:#162634 url('https://images.unsplash.com/photo-1749532125405-70950966b0e5?auto=format&fit=crop&w=1400&q=82') center 46% / cover no-repeat!important;
}
.work-art.art-lvi:before,.browser-poster-art.art-lvi:before{
 content:'';display:block!important;position:absolute;inset:0;
 background:linear-gradient(0deg,rgba(10,26,38,.84),transparent 70%)!important;
 z-index:1;pointer-events:none
}
.work-art.art-lvi .lvi-word,.browser-poster-art.art-lvi .lvi-word{
 display:block!important;position:absolute;bottom:14%;left:7%;z-index:3;
 color:#fff!important;text-shadow:0 3px 28px rgba(0,0,0,.65);
 font-size:clamp(46px,4.9vw,96px)!important;line-height:.93!important
}
.work-art.art-lvi .lvi-top,.browser-poster-art.art-lvi .lvi-top{
 display:block!important;z-index:3;position:absolute;top:9%;left:7%;color:white!important;
 letter-spacing:.18em;font-size:10px
}
.work-art.art-lvi .lvi-bottom,.browser-poster-art.art-lvi .lvi-bottom{
 display:block!important;z-index:3;position:absolute;bottom:6%;left:7%;color:white!important;font-size:9px
}