/* UI refinements: original brand palette and typefaces retained. */
.collage-tile img.collage-cell { width:100%; height:100%; object-fit:cover; }
.skip-link { position:fixed; top:8px; left:16px; transform:translateY(-180%); z-index:300; background:var(--card); color:var(--petrol); padding:12px 20px; border-radius:12px; }
.skip-link:focus { transform:none; }
.faq { border-bottom:1px solid var(--border); }
.faq h2 { margin-bottom:14px; }
.faq-intro { text-align:center; color:var(--text-light); margin-bottom:32px; }
.faq-list { max-width:800px; margin:auto; display:grid; gap:12px; }
.faq-list details { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:0 24px; }
.faq-list summary { cursor:pointer; padding:20px 28px 20px 0; font-weight:600; color:var(--petrol-dark); position:relative; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:'+'; position:absolute; right:0; font-size:1.3rem; top:15px; color:var(--terracotta); }
.faq-list details[open] summary::after { content:'−'; }
.faq-list details p { padding-bottom:22px; font-size:.93rem; line-height:1.8; }
.gallery-quote { display:flex; justify-content:center; align-items:center; min-height:42px; padding:8px 4px; color:var(--petrol); background:var(--card); font-size:.76rem; font-weight:600; text-decoration:none; border-top:1px solid var(--border); }
.gallery-quote:hover { background:var(--bg-alt); }
.catalog-item:has(.gallery-quote)::after { top:8px; bottom:auto; }
.plan-reference { display:flex; align-items:center; gap:16px; padding:12px; border:1px solid var(--border); border-radius:12px; margin-bottom:22px; background:var(--bg-alt); font-size:.9rem; }
.plan-reference img { width:76px; height:92px; object-fit:cover; border-radius:8px; }
.lightbox .lightbox-quote { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); }
.lightbox .lightbox-quote:hover { transform:translateX(-50%) translateY(-2px); }
.lightbox .lightbox-caption { bottom:84px; }
.lightbox .lightbox-img { max-height:calc(100dvh - 190px); }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-bottom:14px; }
.footer-links a { color:var(--petrol); text-underline-offset:4px; }
.form-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.form-help { font-size:.82rem; color:var(--text-light); line-height:1.6; margin:12px 0 18px; }
.form-message .btn { margin-top:14px; }
body { overflow-x: clip; }
button, input, textarea, select { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 5px; }
[hidden] { display: none !important; }
.container { max-width: 1200px; padding-inline: 32px; }
.header { backdrop-filter: blur(18px); }
.nav { height: 84px; gap: 24px; position: relative; }
.logo { flex-shrink: 0; letter-spacing: .045em; }
.logo-img { height: 44px; border-radius: 8px; }
.nav-links { gap: 22px; align-items: center; }
.nav-links a { font-size: .88rem; color: var(--text); position: relative; padding-block: 12px; white-space: nowrap; }
.nav-links a::after { content: ''; position: absolute; bottom: 6px; left: 0; width: 100%; height: 2px; background: var(--terracotta); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; font-size: .92rem; line-height: 1.3; padding: 13px 24px; transition: background .2s, box-shadow .2s, transform .2s; }
.btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:not(:disabled):active { transform: translateY(0); }
.btn-primary::after, .price-card .btn::after { content: '↗'; font-size: 1.1em; }
.btn:disabled { cursor: not-allowed; opacity: .6; box-shadow: none; }
.menu-toggle { display: none; }
.hero { padding: 80px 0 56px; }
.hero-content { margin-bottom: 44px; }
.hero-content h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); max-width: 880px; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.hero-content p { margin-bottom: 24px; line-height: 1.65; }
.hero-collage { width: 100%; margin: 0; gap: 12px; border-radius: 22px; overflow: hidden; }
.collage-tile { height: clamp(210px, 25vw, 330px); border-radius: 12px; }
section { padding: 88px 0; }
section h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.2; margin-bottom: 40px; text-wrap: balance; }
.feature-grid { gap: 14px; counter-reset: steps; }
.feature-grid .feature-card { padding: 26px 20px; position: relative; counter-increment: steps; }
.feature-card::after { content: '0' counter(steps); position: absolute; top: 22px; right: 18px; font-size: .75rem; letter-spacing: .1em; color: var(--terracotta); }
.feature-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--bg-alt); display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 22px; }
.feature-card h3 { font-size: 1.12rem; line-height: 1.4; margin-bottom: 12px; }
.feature-card p { font-size: .87rem; line-height: 1.8; }
.feature-card, .price-card, .contact-form { border-radius: 20px; }
.about { border-top: 1px solid var(--border); }
.about-grid { padding-bottom: 0; max-width: 820px; }
.about-subtitle { font-size: .8rem; letter-spacing: .11em; text-transform: uppercase; }
.about-text > p:not(.about-subtitle) { font-size: 1.06rem; line-height: 1.9; }
.about-points { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.about-points li { padding: 10px 16px; font-size: .85rem; border-radius: 999px; }
.pricing-grid { align-items: stretch; gap: 22px; }
.price-card { display: flex; flex-direction: column; padding: 32px 26px; text-align: left; }
.price-card.featured { transform: none; border-width: 1px; border-top: 4px solid var(--terracotta); padding-top: 29px; }
.price-card h3 { font-size: 1.5rem; }
.price { font-size: clamp(1.75rem, 2.7vw, 2.3rem); letter-spacing: -.04em; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.price-card ul { font-size: .9rem; line-height: 1.7; }
.price-card li { position: relative; padding: 7px 0 7px 20px; }
.price-card li::before { position: absolute; left: 0; }
.price-card .btn { margin-top: auto; width: 100%; }
.contact-grid { gap: 28px; padding-bottom: 0; }
.contact-card { border-radius: 16px; padding: 18px 22px; }
a.contact-card::after { content: '↗'; margin-left: auto; color: var(--terracotta); }
.contact-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; background: var(--bg-alt); border-radius: 12px; font-size: 1.25rem; }
.contact-card p { font-size: .88rem; }
.contact-note { padding: 22px; margin-bottom: 26px; }
.contact-form { padding: 30px; box-shadow: none; }
.field input, .field textarea, .field select { min-height: 48px; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; }
.contact-form .field label, .modal-form .field label { font-size: .86rem; margin-bottom: 8px; color: var(--text); }
.cta { padding: 72px 0; }
.cta h2 { max-width: 700px; margin: 0 auto 16px; }
.footer { padding: 30px 0; }
.catalog-header { padding: 64px 0 32px; }
.catalog-header h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -.025em; }
.catalog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 48px; }
.filter-button { cursor: pointer; padding: 10px 22px; min-height: 44px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text); transition: background .2s, transform .2s; }
.filter-button:hover { transform: translateY(-2px); border-color: var(--petrol); }
.filter-button[aria-pressed='true'] { background: var(--petrol); color: var(--card); border-color: var(--petrol); }
.catalog-category { margin-bottom: 56px; }
.catalog-category > h2 { font-size: 1.7rem; border-bottom-width: 1px; padding-bottom: 16px; margin-bottom: 24px; }
.catalog-subcats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.catalog-subcategory { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 20px; background: var(--card); }
.catalog-subcategory h3 { font-size: 1.1rem; margin-bottom: 16px; }
.catalog-sub-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.photo-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.catalog-sub-photos .catalog-item img, .photo-strip .catalog-item img { height: auto; aspect-ratio: 4/5; }
.catalog-item { position: relative; cursor: zoom-in; }
.catalog-item img { transition: transform .35s; }
.catalog-item::after { content: '↗'; position: absolute; bottom: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--petrol); pointer-events: none; box-shadow: var(--shadow); }
.modal-box { border-radius: 22px; padding: 32px; }
.modal-close { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-alt); top: 10px; right: 10px; }
.lightbox-img { max-width: calc(100vw - 160px); }
.lightbox-caption { position: absolute; bottom: 18px; left: 15%; right: 15%; text-align: center; color: var(--card); font-size: .9rem; }
@media (max-width: 1000px) {
  .nav { height: 76px; gap: 14px; }
  .nav > .btn { margin-left: auto; }
  .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 46px; height: 46px; background: var(--card); border: 1px solid var(--border); border-radius: 50%; color: var(--petrol); cursor: pointer; order: 3; flex-shrink: 0; }
  .menu-toggle span { width: 18px; height: 2px; background: currentColor; transition: transform .2s; }
  .menu-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links { display: none; position: absolute; top: calc(100% + 8px); left: 20px; right: 20px; background: var(--card); padding: 14px; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
  .nav-links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: 14px 16px; border-radius: 10px; }
  .nav-links a:hover { background: var(--bg-alt); }
  .nav-links a::after { display: none; }
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .container { padding-inline: 20px; }
  .nav { gap: 10px; }
  .logo { font-size: 1.05rem; gap: 7px; }
  .logo-img { height: 34px; max-width: 48px; }
  .nav > .btn { padding: 10px 12px; font-size: .72rem; min-height: 42px; }
  .nav > .btn::after { display: none; }
  .menu-toggle { width: 42px; height: 42px; }
  .hero { padding: 48px 0 36px; }
  .hero-content h1 { font-size: clamp(2rem, 7.5vw, 3rem); }
  .hero-content p { font-size: 1rem; }
  .hero-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-radius: 16px; }
  .collage-tile { height: 190px; }
  section { padding: 56px 0; }
  section h2 { margin-bottom: 28px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid .feature-card { padding: 22px 16px; }
  .feature-card:last-child { grid-column: 1 / -1; }
  .pricing-grid, .catalog-subcats { grid-template-columns: 1fr; }
  .about-text > p:not(.about-subtitle) { font-size: .95rem; }
  .about-points { gap: 8px; }
  .about-points li { font-size: .78rem; }
  .contact-grid { gap: 20px; }
  .contact-form, .modal-box { padding: 24px; }
  .photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .catalog-filters { gap: 8px; margin-bottom: 32px; }
  .filter-button { padding-inline: 15px; font-size: .85rem; }
  .catalog-subcategory { padding: 16px; }
  .lightbox { padding: 12px; }
  .lightbox-img { max-width: calc(100vw - 24px); max-height: 75vh; }
  .lightbox-nav { top: auto; bottom: 16px; transform: none; }
  .lightbox-caption { bottom: 28px; }
}
@media (max-width: 370px) { .nav > .btn { display: none; } .menu-toggle { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
