VÄRILUOKAT: Taustat ja ikonit
============================ */ .bg-sand { background-color: #f4efe8; }
.bg-sage { background-color: #e0e5db; }
.bg-blush { background-color: #f3e7e5; } .icon-golden i { color: #b9955d; }
.icon-terracotta i { color: #ba7b55; }
.icon-olive i { color: #6c6642; }
.icon-canyon i { color: #dbaF9c; }
.icon-deep i { color: #4d4c2a; } @media (max-width: 768px) {
.card-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.panel-row-style {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 4vw !important;
padding-right: 4vw !important;
}
#faq-brand .container {
padding-left: 0;
padding-right: 0;
}
}
#pl-2028 .so-panel {
margin-bottom: 0px;
}
.container {
width: 100%;
margin-inline: auto;
padding-inline: clamp(1rem, 2vw, 2rem);
max-width: 100%;
box-sizing: border-box !important;
}
@media (max-width: 900px) { .panel-row-style,
.so-panel,
.panel-grid,
.panel-grid-cell {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
}
.portfolio-hero {
min-height: 320px;
padding: 80px 20px;
display: flex;
align-items: center;
}
.portfolio-hero .web-hero__inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
} .portfolio-hero .web--eyebrow {
display: block;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #7a8a6a; margin-bottom: 12px;
} .portfolio-hero h1 {
font-size: clamp(32px, 4vw, 44px);
line-height: 1.2;
margin-bottom: 20px;
} .portfolio-hero .lead {
max-width: 720px;
margin: 0 auto;
font-size: 18px;
line-height: 1.6;
opacity: 0.9;
} @media (max-width: 768px) {
.portfolio-hero {
padding: 60px 20px;
min-height: auto;
}
}
.services-page {
font-family: 'Jost', sans-serif;
color: #333;
line-height: 1.7;
} .services-page .hero {
min-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
padding: 6rem 1.5rem;
text-align: center;
background:
linear-gradient(rgba(249,247,244,0.92), rgba(249,247,244,0.92)),
url(https://images.unsplash.com/photo-1542744094-3a31f272c490?w=1600);
background-size: cover;
background-position: center;
}
.services-page .hero-content {
max-width: 820px;
}
.services-page .hero-eyebrow {
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.75rem;
color: #b58b4c;
margin-bottom: 1rem;
}
.services-page h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.4rem, 4vw, 3.6rem);
margin-bottom: 1.5rem;
color: #5e514a;
}
.services-page .hero p {
font-size: 1.15rem;
margin-bottom: 2.5rem;
} .services-page .btn {
display: inline-block;
padding: 1rem 2.8rem;
border-radius: 50px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0.5rem;
text-decoration: none;
}
.services-page .btn-primary {
background: #b58b4c;
color: #fff;
}
.services-page .btn-secondary {
border: 2px solid #5e514a;
color: #5e514a;
}
.services-page .btn-white {
background: #fff;
color: #b58b4c;
} .services-page .split-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
max-width: 1400px;
margin: 0 auto;
padding: 6rem 1.5rem;
align-items: center;
}
.services-page .split-image img {
width: 100%;
height: 520px;
object-fit: cover;
border-radius: 12px;
}
.services-page .split-content h2 {
font-family: 'Playfair Display', serif;
font-size: 2.4rem;
margin-bottom: 1.5rem;
}
.services-page .split-content h3 {
color: #b58b4c;
font-size: 1.2rem;
margin-bottom: 1rem;
} .services-page .section {
padding: 6rem 1.5rem;
}
.services-page .section-eyebrow {
text-align: center;
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.75rem;
color: #b58b4c;
margin-bottom: 1rem;
}
.services-page .section-title {
font-family: 'Playfair Display', serif;
font-size: 2.8rem;
text-align: center;
margin-bottom: 2rem;
}
.services-page .section-subtitle {
max-width: 720px;
margin: 0 auto 3rem;
text-align: center;
} .services-page .packages-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
max-width: 1200px;
margin: 0 auto;
}
.services-page .package-card {
background: #fff;
padding: 2.5rem;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.services-page .package-price {
font-size: 2rem;
color: #b58b4c;
margin: 1rem 0;
} .services-page .timeline {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.services-page .timeline-step {
background: #fff;
padding: 2.5rem 2rem;
border-radius: 16px;
text-align: center;
box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}
.services-page .timeline-number {
width: 56px;
height: 56px;
margin: 0 auto 1.5rem;
border-radius: 50%;
background: #b58b4c;
color: #fff;
font-weight: 600;
font-size: 1.3rem;
display: flex;
align-items: center;
justify-content: center;
}
.services-page .faq {
max-width: 900px;
margin: 0 auto;
}
.services-page .faq-item {
border-bottom: 1px solid #e6e2dd;
padding: 1.5rem 0;
}
.services-page .faq-question {
font-weight: 600;
position: relative;
padding-right: 2rem;
}
.services-page .faq-question::after {
content: "+";
position: absolute;
right: 0;
top: 0;
font-size: 1.4rem;
color: #b58b4c;
}
.services-page .faq-answer {
margin-top: 1rem;
color: #555;
} .services-page .final-cta {
background: #b58b4c;
color: #fff;
text-align: center;
padding: 6rem 1.5rem;
}
.services-page .final-cta h2 {
font-family: 'Playfair Display', serif;
font-size: 2.8rem;
margin-bottom: 1.5rem;
color: #fff;
}
.services-page .final-cta p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 3rem;
} @media (max-width: 900px) {
.services-page .split-section {
grid-template-columns: 1fr;
}
.services-page .packages-grid,
.services-page .timeline {
grid-template-columns: 1fr;
}
}
.deliverables-list {
list-style: none;
padding: 0;
margin: 0;
}
.deliverables-list li {
position: relative;
padding-left: 1.6rem;
margin-bottom: 1.1rem;
line-height: 1.7;
}
.deliverables-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--golden-ochre);
font-weight: 600;
}
.deliverables-note {
color: var(--muted-brown);
font-size: 0.95rem;
max-width: 680px;
}
.deliverables-meta {
border-top: 1px solid rgba(0,0,0,0.08);
padding-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 0.9rem;
}
@media (max-width: 640px) {
.brand-deliverables {
padding: 4rem 1.5rem;
}
}
.portfolio-carousel {
max-width: 1200px;
margin: 40px auto;
padding: 0 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.portfolio-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(94, 81, 74, 0.08);
transition: all 0.3s;
}
.portfolio-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(94, 81, 74, 0.15);
} .portfolio-image {
width: 100%;
aspect-ratio: 4/3;
background: #f3eeea;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-style: italic;
font-size: 14px;
}
.portfolio-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.portfolio-text {
padding: 30px 25px;
}
.portfolio-text h3 {
font-size: 22px;
margin-bottom: 12px;
color: var(--muted-brown);
}
.portfolio-text p {
font-size: 15px;
color: var(--text-medium);
line-height: 1.7;
}
.portfolio-link {
display: inline-block;
margin-top: 50px;
text-decoration: none;
font-size: 16px;
transition: all 0.3s;
}
.portfolio-link:hover {
text-decoration: none;
} .portfolio-site-link {
display: inline-block;
color: #B76E79;
text-decoration: none;
font-size: 0.9rem;
border-bottom: 1px solid transparent;
transition: border-color 0.3s;
}
.portfolio-site-link:hover {
border-bottom-color: #B76E79;
} @media (max-width: 1024px) {
.portfolio-carousel {
grid-template-columns: repeat(2, 1fr);
}
} @media (max-width: 640px) {
.portfolio-carousel {
grid-template-columns: 1fr;
}
}
.brand-packages-section {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.packages-intro {
text-align: center;
margin-bottom: 80px; margin-left: auto;
margin-right: auto;
}
.packages-intro h2 {
margin-bottom: 25px;
font-family: var(--font-heading);
line-height: 1.1;
}
.packages-intro p {
font-family: var(--font-body);
line-height: 1.8;
text-align: left;
width: 100%;
}
.brand-package {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-bottom: 0;
min-height: 600px;
}
.brand-package:nth-child(even) .package-image {
order: 2;
}
.brand-package:nth-child(even) .package-content {
order: 1;
}
.package-image {
background-size: cover;
background-position: center;
min-height: 600px;
}
.package-content {
padding: 80px 70px;
display: flex;
flex-direction: column;
justify-content: center;
background: white;
}
.package-content h3 {
font-size: 28px;
margin-bottom: 20px;
line-height:1.2;
color: var(--muted-brown);
}
.package-price-tag {
font-size: 1.25rem;
color: var(--rose-gold);
letter-spacing: 0;
text-transform: none;
margin-bottom: 25px;
display: block;
font-weight: 500;
font-family: var(--font-heading);
}
.package-content p {
font-size: 16px;
color: var(--text-medium);
line-height: 1.8;
margin-bottom: 30px;
}
.package-includes {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid var(--sand-beige);
}
.includes-heading {
font-size: 1rem;
letter-spacing: 0;
text-transform: none;
color: var(--muted-brown);
font-weight: 600;
font-style: italic;
font-family: var(--font-heading);
margin-bottom: 20px;
}
.includes-list {
list-style: none;
padding: 0 0 20px 0;
margin: 0;
}
.includes-list li {
padding: 8px 0;
padding-left: 25px;
position: relative;
font-size: 15px;
color: var(--text-medium);
line-height: 1.6;
}
.includes-list li::before {
content: "✓";
position: absolute;
left: 5px;
color: var(--golden-ochre);
font-weight: 600;
}
.packages-footer {
background: var(--sand-beige);
padding: 50px 60px;
border-radius: 0;
margin-top: 0;
text-align: center;
}
.packages-footer p {
font-size: 17px;
color: var(--muted-brown);
line-height: 1.8;
margin: 0;
max-width: 900px;
margin: 0 auto;
} @media (max-width: 968px) {
.brand-package { grid-template-columns: 1fr; }
.brand-package:nth-child(even) .package-image { order: 1; }
.brand-package:nth-child(even) .package-content { order: 2; }
.package-image { min-height: 400px; }
.package-content { padding: 50px 30px; }
} .contact-form-section {
padding: 100px 40px;
background: var(--sand-beige);
}
.contact-form-section h2 {
text-align: center;
font-size: 44px;
margin-bottom: 20px;
}
.contact-intro {
text-align: center;
font-size: 18px;
color: var(--text-medium);
max-width: 700px;
margin: 0 auto 60px;
}
.form-container {
max-width: 850px;
margin: 0 auto;
background: white;
padding: 55px 50px;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(94, 81, 74, 0.08);
}
.form-section {
margin-bottom: 45px;
}
.form-section h3,
.form-section legend {
font-size: 24px;
color: var(--muted-brown);
margin-bottom: 25px;
font-family: var(--font-heading);
font-weight: 400;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 10px;
font-weight: 500;
color: var(--text-dark);
font-size: 15px;
}
.required {
color: var(--terracotta);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 15px 18px;
border: 2px solid rgba(94, 81, 74, 0.1);
border-radius: 8px;
font-family: var(--font-body);
font-size: 15px;
background: var(--linen-white);
transition: all 0.3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--golden-ochre);
box-shadow: 0 0 0 3px rgba(181, 139, 76, 0.1);
background: white;
}
.form-group textarea {
min-height: 140px;
resize: vertical;
}
.radio-group,
.checkbox-group {
display: flex;
flex-direction: column;
gap: 15px;
}
.radio-option,
.checkbox-option {
background: var(--linen-white);
padding: 18px 20px;
border-radius: 8px;
border: 2px solid rgba(94, 81, 74, 0.1);
transition: all 0.3s;
cursor: pointer;
}
.radio-option:hover,
.checkbox-option:hover {
border-color: var(--golden-ochre);
background: white;
}
.radio-option input,
.checkbox-option input {
margin-right: 12px;
accent-color: var(--golden-ochre);
}
.radio-option label,
.checkbox-option label {
cursor: pointer;
display: flex;
flex-direction: column;
gap: 5px;
}
.radio-option small {
font-size: 13px;
color: var(--text-medium);
}
.highlight-box {
background: var(--linen-white);
padding: 25px 30px;
border-radius: 8px;
border-left: 4px solid var(--golden-ochre);
font-size: 15px;
color: var(--text-medium);
}
.submit-button {
width: 100%;
padding: 18px 40px;
background: var(--golden-ochre);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
font-family: var(--font-body);
cursor: pointer;
transition: all 0.3s;
}
.submit-button:hover {
background: var(--terracotta);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(181, 139, 76, 0.3);
} .after-packages--hero {
background: var(--blush);
padding: 0;
}
.after-packages-inner { margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
min-height: unset; }
.after-packages-content {
padding: 2.5rem 3rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.after-packages-content .eyebrow {
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rose-gold);
display: inline-block;
margin-bottom: 1rem;
}
.after-packages-content h3 {
font-size: clamp(1.9rem, 3vw, 2.4rem);
font-weight: 500;
margin-bottom: 1.2rem;
}
.after-packages-content .lead {
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 1.8rem;
color: var(--muted-brown);
}
.after-packages-list {
list-style: none;
padding: 0;
margin: 0 0 2.5rem;
}
.after-packages-list li {
position: relative;
padding-left: 1.4rem;
margin-bottom: 0.8rem;
font-size: 0.95rem;
}
.after-packages-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--golden-ochre);
}
.cta-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn--primary {
background: var(--terracotta);
color: var(--linen-white);
padding: 0.85rem 2rem;
border-radius: 10px;
text-decoration: none;
font-size: 0.85rem;
}
.btn--primary:hover {
background: var(--golden-ochre);
}
.btn--secondary {
background: transparent;
border: 1px solid var(--terracotta);
color: var(--muted-brown);
padding: 0.85rem 2rem;
border-radius: 10px;
text-decoration: none;
font-size: 0.85rem;
}
.btn--secondary:hover {
background: var(--terracotta);
color: var(--linen-white);
}
@media (max-width: 768px) {
.cta-buttons {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
.cta-buttons a {
max-width: 280px; width: 90%;
text-align: center;
margin: 0 auto;
}
}
.after-packages-image {
position: relative;
overflow: hidden;
}
.after-packages-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 900px) {
.after-packages-inner {
grid-template-columns: 1fr;
}
.after-packages-image {
order: -1;
}
} .services-cards {
max-width: 1000px;
margin: 60px auto;
padding: 0 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.service-simple-card {
background: white;
padding: 40px 35px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(94, 81, 74, 0.08);
}
.service-simple-card h3 {
font-size: 24px;
margin-bottom: 18px;
hyphens: none;
overflow-wrap: normal;
word-break: normal;
}
.service-simple-card p {
font-size: 16px;
color: var(--text-medium);
margin-bottom: 20px;
hyphens: none;
overflow-wrap: normal;
word-break: normal;
}
.full-width-section.bg-cream h2,
.full-width-section.bg-cream p {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.full-width-section.bg-cream h2 {
margin-bottom: 20px;
text-align: left;
}
.full-width-section.bg-cream p {
margin-bottom: 20px;
text-align: left;
}
.full-width-section.bg-canyon {
background: #f3eeea;
padding: 80px 40px;
}
.full-width-section h2 {
text-align: center;
font-family: var(--font-heading);
font-size: 2.2rem;
color: #2d2d2d;
margin-bottom: 1rem;
}
.full-width-section > p {
text-align: left;
max-width: 800px;
margin: 0 auto 3rem;
color: #5e514a;
font-size: 1.05rem;
line-height: 1.7;
} .nsportfolio-carousel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
@media (max-width: 768px) {
.nsportfolio-carousel {
grid-template-columns: 1fr;
gap: 20px;
}
} .nsportfolio-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
transition: transform 0.3s, box-shadow 0.3s;
}
.nsportfolio-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
} .nsportfolio-image {
width: 100%;
height: 220px;
background: #f9f7f6;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.nsportfolio-image img {
width: 100%;
height: 100%;
object-fit: cover;
} .nsportfolio-image:empty::before {
content: '[Kuva tulossa]';
color: #999;
font-style: italic;
font-size: 0.9rem;
} .nsportfolio-text {
background: #E8D5D0;
padding: 20px;
text-align: center;
}
.nsportfolio-text h3 {
font-family: var(--font-heading);
font-size: 1.3rem;
color: #2d2d2d;
margin-bottom: 8px;
font-weight: 500;
}
.nsportfolio-text p {
color: #5e514a;
font-size: 0.95rem;
margin-bottom: 12px;
line-height: 1.5;
}
.nsportfolio-link {
display: inline-block;
padding: 12px 28px;
background: transparent;
color: #2d2d2d;
border: 2px solid #2d2d2d;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s;
font-size: 0.95rem;
}
.nsportfolio-link:hover {
background: #2d2d2d;
color: white;
} @media (max-width: 768px) {
.full-width-section {
padding: 60px 20px;
}
.full-width-section h2 {
font-size: 1.8rem;
}
.nsportfolio-image {
height: 200px;
}
.nsportfolio-text {
padding: 18px;
}
.nsportfolio-text h3 {
font-size: 1.2rem;
}
} .portfolio-link {
display: inline-block;
color: #B76E79;
text-decoration: none;
font-size: 0.9rem;
margin-bottom: 10px;
border-bottom: 1px solid transparent;
transition: border-color 0.3s;
}
.portfolio-link:hover {
border-bottom-color: #B76E79;
} .nsportfolio-text ul {
list-style: none;
padding: 0;
margin: 12px 0 0;
}
.nsportfolio-text li {
padding: 6px 0 6px 20px;
position: relative;
font-size: 0.9rem;
color: #5e514a;
line-height: 1.5;
}
.nsportfolio-text li::before {
content: '→';
position: absolute;
left: 0;
color: #b7c5a6;
font-weight: 600;
} .nsportfolio-link {
display: inline-block;
padding: 12px 28px;
background: transparent;
color: #2d2d2d;
border: 2px solid #2d2d2d;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s;
font-size: 0.95rem;
}
.nsportfolio-link:hover {
background: #2d2d2d;
color: white;
} @media (max-width: 768px) {
.full-width-section {
padding: 60px 20px;
}
.full-width-section h2 {
font-size: 1.8rem;
}
.nsportfolio-image {
height: 220px;
}
.nsportfolio-text {
padding: 20px;
}
.nsportfolio-text h3 {
font-size: 1.2rem;
}
} .process-nettisivuthorizontal {
max-width: 1100px;
margin: 60px auto;
padding: 0 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 50px;
}
.process-nettisivuitem {
text-align: center;
}
.process-nettisivunumber {
width: 70px;
height: 70px;
background: var(--blush);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 28px;
color: var(--terracotta);
margin: 0 auto 20px;
font-weight: 500;
}
.process-nettisivuitem h4 {
font-size: 18px;
margin-bottom: 12px;
word-break: normal;
hyphens: none;
}
.process-nettisivuitem p {
font-size: 14px;
color: var(--text-medium);
} .pricing-simple {
max-width: 720px;
margin: 20px auto 0 auto;
padding: 20px 15px;
border-top: 1px solid var(--golden-ochre-light);
border-bottom: none;
text-align: center;
background: transparent;
}
.pricing-simple p {
margin: 0 0 12px 0;
font-family: var(--font-body);
color: var(--editorial-text);
font-size: 1rem;
}
.pricing-simple .service-name {
font-weight: 500;
color: var(--editorial-soft);
margin-right: 6px;
}
.pricing-simple strong {
font-family: var(--font-heading);
font-size: 1.25rem;
color: var(--muted-brown);
}
.pricing-title {
font-family: var(--font-heading);
font-size: 1.2rem;
text-align: center;
margin-bottom: 20px;
color: var(--muted-brown);
} .flagship-service {
padding: 80px 40px;
background: white;
}
.flagship-card {
max-width: 850px;
margin: 0 auto;
background: var(--sand-beige);
border-radius: 8px;
padding: 50px;
text-align: center;
position: relative;
}
.flagship-image-circle {
width: 180px;
height: 180px;
border-radius: 50%;
background: url(https://images.unsplash.com/photo-1586281380349-632531db7ed4?w=400&auto=format&fit=crop&q=80) center/cover;
margin: -110px auto 30px;
border: 8px solid white;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.flagship-card h2 {
font-size: clamp(2rem, 3.5vw, 2.5rem);
margin-bottom: 15px;
color: var(--deep-olive);
}
.flagship-price {
font-family: var(--font-heading);
font-size: 2rem;
color: var(--rose-gold);
margin-bottom: 5px;
}
.flagship-price-label {
font-size: 0.85rem;
color: var(--text-medium);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 25px;
display: block;
}
.flagship-description {
max-width: 650px;
margin: 0 auto 35px;
}
.flagship-description p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--text-medium);
}
.flagship-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
text-align: left;
margin: 35px 0;
}
.flagship-details h4 {
font-size: 1rem;
margin-bottom: 15px;
color: var(--deep-olive);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.flagship-details ul {
list-style: none;
}
.flagship-details ul li {
padding: 6px 0 6px 20px;
position: relative;
line-height: 1.6;
color: var(--text-medium);
font-size: 0.95rem;
}
.flagship-details ul li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--sage-brush);
font-weight: 700;
}
.flagship-details ul.not-included li::before {
content: '×';
color: var(--text-medium);
}
.flagship-note {
background: rgba(183, 110, 121, 0.1);
padding: 15px 20px;
border-radius: 4px;
margin: 25px 0;
}
.flagship-note p {
margin: 0;
font-size: 0.9rem;
}
.btn-flagship {
display: inline-block;
padding: 14px 40px;
background: var(--deep-olive);
color: white;
text-decoration: none;
font-size: 0.95rem;
border-radius: 4px;
transition: all 0.3s;
margin-top: 10px;
}
.btn-flagship:hover {
background: var(--sage-brush);
} .premium-service {
padding: 80px 40px;
background: var(--linen-white);
}
.premium-card {
max-width: 850px;
margin: 0 auto;
background: white;
border-radius: 8px;
padding: 50px;
text-align: center;
position: relative;
border: 2px solid var(--sage-brush-light);
}
.premium-image-circle {
width: 180px;
height: 180px;
border-radius: 50%;
background: url(https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&auto=format&fit=crop&q=80) center/cover;
margin: -110px auto 30px;
border: 8px solid white;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.premium-card h2 {
font-size: clamp(1.8rem, 3vw, 2.2rem);
margin-bottom: 15px;
color: var(--deep-olive);
}
.premium-price {
font-family: var(--font-heading);
font-size: 1.8rem;
color: var(--rose-gold);
margin-bottom: 5px;
}
.premium-price-label {
font-size: 0.85rem;
color: var(--text-medium);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 25px;
display: block;
}
.premium-description {
max-width: 650px;
margin: 0 auto 30px;
}
.premium-description p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--text-medium);
}
.premium-benefits {
text-align: left;
max-width: 600px;
margin: 30px auto;
}
.premium-benefits ul {
list-style: none;
}
.premium-benefits ul li {
padding: 10px 0 10px 25px;
position: relative;
line-height: 1.7;
color: var(--text-dark);
font-size: 0.95rem;
}
.premium-benefits ul li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--sage-brush);
font-weight: 700;
}
.premium-highlight {
background: rgba(183, 197, 166, 0.12);
padding: 15px 20px;
border-radius: 4px;
margin: 25px 0;
}
.premium-highlight p {
margin: 0;
font-style: italic;
color: var(--deep-olive);
font-size: 0.95rem;
}
.btn-premium {
display: inline-block;
padding: 14px 40px;
background: var(--deep-olive);
color: white;
text-decoration: none;
font-size: 0.95rem;
border-radius: 4px;
transition: all 0.3s;
margin-top: 10px;
}
.btn-premium:hover {
background: var(--sage-brush);
}  .partnership-badge {
position: absolute;
top: -15px;
right: 50px;
background: var(--rose-gold);
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 3px 10px rgba(183, 110, 121, 0.3);
z-index: 10;
}
.partnership-image {
background: url(https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=800&auto=format&fit=crop&q=80) center/cover;
min-height: 400px;
border-radius: 6px;
box-shadow: 0 6px 20px rgba(107, 101, 67, 0.15);
}
.partnership-role {
background: rgba(183, 110, 121, 0.12);
padding: 15px 20px;
border-radius: 4px;
margin-bottom: 25px;
}
.partnership-role p {
margin: 0;
font-size: 0.95rem;
color: var(--deep-olive);
font-weight: 500;
}
.partnership-service {
padding: 80px 40px;
background: var(--sand-beige);
}
.partnership-container {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 50px;
align-items: start;
}
.partnership-content h2 {
font-size: clamp(2rem, 3.5vw, 2.8rem);
margin-bottom: 25px;
color: var(--deep-olive);
}
.partnership-content p {
font-size: 1.05rem;
line-height: 1.85;
margin-bottom: 20px;
color: var(--text-medium);
}
.partnership-content strong {
color: var(--rose-gold);
}
.partnership-details {
background: white;
padding: 40px;
border-radius: 4px;
}
.partnership-details h3 {
font-size: 1.5rem;
margin-bottom: 25px;
color: var(--deep-olive);
}
.partnership-details ul {
list-style: none;
margin-bottom: 30px;
}
.partnership-details ul li {
padding: 10px 0 10px 25px;
position: relative;
line-height: 1.7;
color: var(--text-medium);
font-size: 0.95rem;
}
.partnership-details ul li::before {
content: '→';
position: absolute;
left: 0;
color: var(--sage-brush);
font-weight: 600;
}
.partnership-pricing {
background: var(--sand-beige);
padding: 20px;
border-radius: 4px;
text-align: center;
margin-bottom: 25px;
}
.partnership-pricing-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-medium);
margin-bottom: 8px;
}
.partnership-pricing-amount {
font-family: var(--font-heading);
font-size: 1.8rem;
color: var(--rose-gold);
margin-bottom: 5px;
}
.partnership-pricing-note {
font-size: 0.85rem;
color: var(--text-medium);
} .partnership-service {
padding: 80px 40px;
background: var(--linen-white);
}
.partnership-card {
max-width: 750px;
margin: 0 auto;
background: white;
border-radius: 8px;
padding: 45px 40px;
text-align: center;
border: 2px solid var(--sage-brush-light);
}
.partnership-image-circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: url(https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=400&auto=format&fit=crop&q=80) center/cover;
margin: -95px auto 25px;
border: 6px solid white;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.partnership-card h2 {
font-size: clamp(1.8rem, 3vw, 2.2rem);
margin-bottom: 12px;
color: var(--deep-olive);
}
.partnership-description {
max-width: 650px;
margin: 0 auto 30px;
}
.partnership-description p {
font-size: 1rem;
line-height: 1.75;
color: var(--text-medium);
}
.partnership-benefits {
text-align: left;
max-width: 500px;
margin: 0 auto 20px;
}
.partnership-benefits h4 {
font-size: 1rem;
margin-bottom: 15px;
color: var(--deep-olive);
font-weight: 500;
text-align: center;
}
.partnership-benefits ul {
list-style: none;
}
.partnership-benefits ul li {
padding: 8px 0 8px 25px;
position: relative;
line-height: 1.6;
color: var(--text-dark);
font-size: 0.9rem;
}
.partnership-benefits ul li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--sage-brush);
font-weight: 700;
}
.partnership-highlight {
background: var(--sand-beige);
padding: 12px 18px;
border-radius: 4px;
margin: 20px 0;
}
.partnership-highlight p {
margin: 0;
font-style: italic;
color: var(--deep-olive);
font-size: 0.9rem;
}
.partnership-price-box {
background: rgba(183, 197, 166, 0.12);
padding: 20px;
border-radius: 4px;
margin: 25px auto;
max-width: 300px;
}
.partnership-price {
font-family: var(--font-heading);
font-size: 1.7rem;
color: var(--rose-gold);
margin-bottom: 5px;
}
.partnership-price-label {
font-size: 0.85rem;
color: var(--text-medium);
text-transform: uppercase;
letter-spacing: 1px;
display: block;
}
.btn-partnership {
display: inline-block;
padding: 12px 35px;
background: var(--deep-olive);
color: white;
text-decoration: none;
font-size: 0.9rem;
border-radius: 4px;
transition: all 0.3s;
margin-top: 10px;
}
.btn-partnership:hover {
background: var(--sage-brush);
}
.viestinta-start-here {
padding: 3rem 1rem;
background: var(--linen-white);
}
.viestinta-start-card {
max-width: 700px;
margin: 0 auto;
text-align: center;
background: white;
padding: 3rem 2.5rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 2px solid var(--rose-gold);
}
.viestinta-start-badge {
display: inline-block;
background: var(--rose-gold);
color: white;
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.viestinta-start-card h2 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: var(--muted-brown);
margin-bottom: 1rem;
}
.viestinta-start-card p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--text-medium);
margin-bottom: 2rem;
}
.viestinta-start-btn {
display: inline-block;
background: var(--rose-gold);
color: white;
padding: 1rem 3rem;
border-radius: 0;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
letter-spacing: 0.3px;
}
.viestinta-start-btn:hover {
background: var(--sage-brush);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
.viestinta-start-card {
padding: 2rem 1.5rem;
}
.viestinta-start-card h2 {
font-size: 1.6rem;
}
.viestinta-start-btn {
width: 100%;
min-height: 48px;
}
}
.viestinta-small-services {
margin-top: 3rem;
padding: 3rem 1rem;
background: var(--linen-white);
}
.viestinta-small-intro {
text-align: center;
margin-bottom: 3rem;
}
.viestinta-small-intro h2 {
font-family: var(--font-heading);
font-size: 2rem;
color: var(--muted-brown);
margin-bottom: 1rem;
}
.viestinta-small-intro p {
font-size: 1.05rem;
color: var(--text-medium);
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.viestinta-small-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
}
.viestinta-small-card {
background: white;
border-radius: 12px;
padding: 2.5rem 2rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.viestinta-small-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.viestinta-small-header {
text-align: center;
margin-bottom: 1.5rem;
}
.viestinta-small-icon {
width: 60px;
height: 60px;
background: var(--sand-beige);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.viestinta-small-icon i {
font-size: 1.5rem;
color: var(--rose-gold);
}
.viestinta-small-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: var(--muted-brown);
margin: 0;
font-weight: 400;
} .viestinta-small-pitch {
font-size: 0.95rem;
color: var(--text-dark);
margin-bottom: 1rem;
line-height: 1.6;
}
.viestinta-small-benefit {
font-size: 0.9rem;
color: var(--text-medium);
margin-bottom: 1.25rem;
line-height: 1.5;
font-style: italic;
}
.viestinta-small-list {
list-style: none;
padding: 0;
margin: 0 0 auto 0;
flex-grow: 1;
}
.viestinta-small-list li {
padding: 0.4rem 0;
padding-left: 1.5rem;
position: relative;
font-size: 0.9rem;
color: var(--text-dark);
line-height: 1.6;
}
.viestinta-small-list li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--sage-brush);
font-weight: 600;
} .viestinta-small-footer {
margin-top: 2rem;
text-align: center;
}
.viestinta-small-price {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--muted-brown);
font-weight: 400;
margin-bottom: 1.25rem;
display: block;
}
.viestinta-small-price-note {
font-size: 0.85rem;
color: var(--text-medium);
font-style: italic;
}
.viestinta-small-btn {
display: inline-block;
background: var(--sage-brush);
color: white;
padding: 0.9rem 2.5rem;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
text-align: center;
}
.viestinta-small-btn:hover {
background: var(--rose-gold);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
.viestinta-small-services {
padding: 2rem 0.5rem;
}
.viestinta-small-intro h2 {
font-size: 1.6rem;
}
.viestinta-small-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.viestinta-small-card {
padding: 2rem 1.5rem;
}
.viestinta-small-price {
font-size: 1.6rem;
}
.viestinta-small-btn {
width: 100%;
min-height: 48px;
}
}