/* Suveko visual system: shared roles, sizes and reusable components. */
:root {
 --space-1:8px; --space-2:12px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-7:64px;
 --radius:12px; --radius-card:16px;
 --title-size:clamp(2rem,3.3vw,2.75rem); --heading-size:clamp(1.5rem,2.4vw,2rem);
}
main h2 { font-size: var(--heading-size); line-height: 1.25; letter-spacing: -.025em; margin: 0 0 24px; color: var(--ink); }
main h3 { line-height: 1.35; }
.page-intro { background: var(--brand-light); padding: 44px 0; }
.page-intro h1, .pricing-calculator > .container > h1 { font-size: var(--title-size); line-height: 1.15; letter-spacing: -.035em; color: var(--ink); margin: 0 0 16px; }
.page-intro .lead, .services-lead { font-size: 1.0625rem; line-height: 1.65; color: var(--text-muted); max-width: 66ch; margin: 0; }
.section-space { padding: var(--space-6) 0; }
.btn, .btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:12px 24px; border-radius:var(--radius); font-size:1rem; line-height:1.5; text-align:center; }
.service-tile { display:flex; flex-direction:column; min-width:0; padding:24px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--brand-light); text-decoration:none; transition:border-color .18s,transform .18s; }
.service-tile:hover { border-color:var(--brand); transform:translateY(-2px); }
.service-tile:focus-visible { outline:3px solid var(--link); outline-offset:4px; }
.service-tile .service-icon { display:block; margin:0 0 18px; color:var(--brand); }
.service-tile .service-icon svg { display:block; width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.service-card-top .service-icon { margin:0; }
.service-card-top { margin-bottom:18px; }
.service-tile h3 { margin:0 0 8px; color:var(--ink); font-size:1.0625rem; letter-spacing:-.015em; }
.service-tile p { margin:0 0 20px; font-size:.9375rem; line-height:1.6; color:var(--text-muted); }
.card-action { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; color:var(--link); font-size:.875rem; font-weight:700; }
.card-action > span { font-size:1.25rem; }
.section-cta { padding:44px 0; background:var(--bg); }
.section-cta .container { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.section-cta h2 { margin-bottom:12px; }
.section-cta p { max-width:60ch; margin:0; color:var(--text-muted); }
.section-cta .btn { flex-shrink:0; }
/* Personal company story, with the real portrait early in document order. */
.about-introduction { background:var(--white); }
.about-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px 56px; align-items:start; }
.about-opening { grid-column:1; grid-row:1; }
.about-opening p,.about-description p { max-width:66ch; line-height:1.65; }
.about-opening p { margin:0; }
.about-description { grid-column:1; grid-row:2; }
.about-description h2 { font-size:1.5rem; margin-bottom:16px; }
.about-description p { margin:0 0 20px; }
.about-description p:last-child { margin-bottom:0; }
.founder-portrait { grid-column:2; grid-row:1 / span 2; margin:0; }
.founder-portrait img { width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; object-position:center 35%; border-radius:var(--radius-card); display:block; }
.founder-portrait figcaption { padding-top:16px; }
.founder-portrait h3 { font-size:1.25rem; margin:0 0 4px; }
.founder-role { font-size:.875rem; color:var(--text-muted); margin:0; }
.about-values { background:var(--brand-light); }
.about-values .values-list { display:block; margin:0; max-width:900px; }
.about-values .values-list li { display:grid; grid-template-columns:170px minmax(0,1fr); gap:24px; margin:0; padding:16px 0; border-radius:0; border-bottom:1px solid var(--border); background:transparent; }
.about-values .values-list li:first-child { padding-top:0; }
.about-values .values-list li:last-child { border-bottom:0; padding-bottom:0; }
.about-values .values-list strong { margin:0; }
.about-values .values-list span { color:var(--text-muted); }
/* Calculator presentation only: existing IDs, choices and pricing are retained. */
.calculator { border-radius:var(--radius-card); padding:24px; }
.calculator-step { gap:20px; }
.calculator-field label { min-height:0; line-height:1.5; }
.calculator-window-counts { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.calculator-window-counts label { min-height:54px; display:flex; flex-direction:column; justify-content:flex-start; }
.window-size-hint { display:block; margin-top:4px; color:var(--text-muted); font-size:.8125rem; font-weight:400; line-height:1.4; }
fieldset .calculator-window-counts label { min-height:24px; }
.window-size-guide { display:block; width:100%; max-width:560px !important; margin:0 auto; }
.window-size-guide .guide-sublabel { display:none; }
.calculator-field input,.calculator-field select,form.contact-form input,form.contact-form select { min-height:48px; border-radius:var(--radius); }
.calculator-result { border-radius:var(--radius); background:var(--brand-light); }
.calculator-result-actions .btn,.calculator-result-actions .btn-secondary { min-height:52px; }
.prices-page .price-table-wrap { border-radius:var(--radius-card); }
.prices-page .starting-prices { width:100%; table-layout:auto; }
.prices-page .starting-prices tbody td { font-size:1.25rem; white-space:nowrap; }
.price-amount { white-space:nowrap; }
.prices-page .price-currency { display:inline; margin-left:3px; font-size:.8125rem; white-space:nowrap; }
.prices-page .price-policy { font-size:.875rem; }
/* The contact introduction owns the direct contact links. */
.contact-page .page-intro { padding-bottom:32px; }
.contact-links { display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px; margin:16px 0 0; font-size:.9375rem; }
.contact-links a { color:var(--link); text-underline-offset:4px; }
.contact-content { background:var(--white); }
.contact-grid { gap:40px; }
.contact-content h2 { font-size:1.75rem; margin-bottom:20px; }
.contact-info { border-radius:var(--radius-card); padding:24px; }
.contact-info h3 { font-size:1.125rem; margin-bottom:16px; }
form.contact-form label { margin-top:12px; margin-bottom:6px; }
form.contact-form textarea { min-height:120px; border-radius:var(--radius); }
.enquiry-extras { margin:16px 0; padding:12px 16px; border-radius:var(--radius); }
#enquiry-note,.photo-email-help { font-size:.875rem; line-height:1.6; }
#enquiry-note { margin:16px 0 12px; }
.photo-email-help { margin:0 0 12px; }
.contact-form button[type=submit] { margin-top:12px; }
.contact-direct p { margin-bottom:0; }
.contact-photo img { max-width:420px; height:200px; object-position:center 45%; margin-top:24px; border-radius:var(--radius); }
.enquiry-success { border-radius:var(--radius-card); padding:24px; }
/* The same responsive menu is used throughout the site. */
@media(max-width:900px) {
 .nav-toggle { display:flex; width:44px; height:44px; }
 nav.main-nav { display:none; width:100%; }
 nav.main-nav.open { display:block; }
 nav.main-nav ul { flex-direction:column; align-items:stretch; gap:0; padding-top:12px; margin-top:8px; border-top:1px solid var(--border); }
 nav.main-nav a { display:block; padding:12px 0; }
 nav.main-nav a.lang-link { display:inline-flex; margin-top:8px; padding:8px 12px; }
 .section-cta .container { align-items:flex-start; flex-direction:column; gap:24px; }
 .about-grid { grid-template-columns:minmax(0,1fr) 240px; gap:24px 32px; }
}
@media(max-width:700px) {
 .page-intro { padding:28px 0; }
 .page-intro h1,.pricing-calculator > .container > h1 { font-size:2rem; }
 main h2 { margin-bottom:20px; }
 .section-space { padding:32px 0; }
 .section-cta { padding:32px 0; }
 .section-cta .btn { width:100%; }
 .about-grid { display:flex; flex-direction:column; gap:24px; }
 .about-description { width:100%; }
 .founder-portrait { width:100%; max-width:320px; align-self:flex-start; }
 .founder-portrait img { aspect-ratio:1.2; object-position:center 28%; }
 .about-values .values-list li { grid-template-columns:1fr; gap:5px; padding:14px 0; }
 .about-values .values-list span { font-size:.9375rem; }
 .calculator { padding:18px; }
 .calculator-window-counts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
 .calculator-window-counts label { min-height:54px; }
 fieldset .calculator-window-counts label { min-height:24px; }
 .window-size-guide .guide-label { display:none; }
 .prices-page .price-table-wrap { padding:8px 12px; }
 .prices-page .starting-prices th,.prices-page .starting-prices td { padding:16px 4px; }
 .prices-page .starting-prices thead th { font-size:.75rem; }
 .prices-page .starting-prices tbody th { font-size:.8125rem; }
 .prices-page .starting-prices tbody td { font-size:1rem; }
 .prices-page .price-currency { font-size:.6875rem; margin-left:2px; }
 .prices-page .price-quote { border-radius:var(--radius-card); }
 .prices-page .price-quote .btn { width:100%; justify-self:stretch; }
 .contact-page .page-intro { padding-bottom:24px; }
 .contact-content h2 { font-size:1.5rem; }
 .contact-grid { gap:24px; }
 .contact-info { padding:20px; }
 .contact-form button[type=submit],.enquiry-success .btn { width:100%; }
 .contact-photo img { height:180px; }
}
@media(max-width:560px) {
 .service-tile { display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:12px; padding:16px; }
 .service-tile > .service-icon,.service-card-top { grid-column:1; grid-row:1 / span 3; margin:0; }
 .service-tile .service-icon { margin:0; }
 .service-tile .service-icon svg { width:26px; height:26px; }
 .service-tile h3 { grid-column:2; font-size:1rem; margin-bottom:6px; }
 .service-tile p { grid-column:2; font-size:.90625rem; line-height:1.55; margin-bottom:10px; }
 .service-tile .card-action { grid-column:2; font-size:.875rem; }
}
@media(prefers-reduced-motion:reduce) { .service-tile { transition:none; }.service-tile:hover { transform:none; } }