/* Shared Posterbag components. Existing brand colours and original artwork. */
:root { --surface: #f1eee5; --selected: #e4e9df; --radius: 8px; --ease: cubic-bezier(.2,.7,.2,1); }
.button { min-height: 48px; border-radius: var(--radius); font-weight: 600; transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); }
.button-green:hover { background: #23543e; color: var(--cream); border-color: transparent; }
.button:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; box-shadow: 0 0 0 3px var(--cream); }
.button:disabled { cursor: wait; opacity: .65; }
.hero-lifestyle .hero-actions .button { border-radius: var(--radius); }
.text-link, .text-button, .back-link, .form-exit { text-underline-offset: 5px; }
.site-header nav a { position: relative; }
.site-header nav a::after { content: ''; position: absolute; height: 2px; background: currentColor; bottom: 6px; left: 0; right: 0; transform: scaleX(0); transform-origin: left; transition: transform .18s var(--ease); }
.site-header nav a:hover { text-decoration: none; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { transform: scaleX(1); }
.form-field :is(input, textarea, select), .configurator-page select, .enquiry-inputs :is(input, textarea) { border-radius: var(--radius); background: #fffcf5; padding: 12px 14px; transition: border-color .18s, box-shadow .18s; }
.form-field :is(input, textarea, select):focus-visible, .enquiry-inputs :is(input, textarea):focus-visible, .configurator-page select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* Two product comparisons, each retained as one native link. */
.formats-section { background: var(--surface); }
.formats-heading h2 { font: 500 clamp(34px, 4.2vw, 60px)/1.08 var(--body); letter-spacing: -.045em; }
.formats { gap: 48px; }
.formats .format { position: relative; --format-padding: 0px; background: transparent; color: var(--green); border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.formats .format h3 { font: 500 clamp(30px, 3vw, 44px)/1.1 var(--body); letter-spacing: -.04em; margin: 14px 0 24px; }
.formats .format h3 span { display: block; font: 400 14px/1.5 var(--body); letter-spacing: 0; margin-top: 10px; }
.format-bag-stage { background: #faf7ef; }
.format-bag figcaption { font-size: 11px; font-weight: 400; color: var(--muted); }
.formats .format > p { font-size: 14px; max-width: 390px; }
.formats .format .button { background: transparent; color: var(--green); border: 0; border-top: 1px solid var(--line); border-radius: 0; width: 100%; justify-content: space-between; margin-top: 26px; padding: 18px 0 0; font-size: 14px; }

.formats .format .button { text-decoration: underline; text-underline-offset: 5px; }
.format-link:hover .button { text-decoration-thickness: 2px; }
.formats .format .button:focus-visible { outline: none; box-shadow: none; }
.formats .format:has(.format-link:focus-visible) { outline: 3px solid var(--green); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* Calm editorial headings frame the more expressive product imagery. */
.section h2 { font: 500 clamp(32px, 4vw, 56px)/1.12 var(--body); letter-spacing: -.045em; }
.faq-section h2 { font-weight: 700; }

/* Contact leads with the advertiser's goal; bright accents keep dark text. */
.contact-section .contact-heading h2 { font: 700 clamp(36px, 4.1vw, 64px)/1.08 var(--body); letter-spacing: -.055em; }
.contact-heading h2 span { color: var(--accent-text); }
.contact-section .enquiry-form { background: var(--surface); }
.contact-section .button-green { background: var(--lime); color: var(--green); }
.contact-section .button-green:hover { background: var(--green); color: var(--cream); }

.formats .format { padding: 0; }
.format-link { display: flex; flex-direction: column; flex: 1; padding: 16px 0 0; color: inherit; text-decoration: none; min-width: 0; }
.format-link:focus-visible { outline: none; }
.format-link > p { flex: 1; font-size: 14px; margin-bottom: 26px; }
.formats .format .format-link > .button { margin-top: auto; }
.campaign-scope { margin-top: 28px; font-size: 16px; }

/* About Posterbag: purpose and current stage, in the existing brand palette. */
.about-section { background: var(--paper); border-block: 1px solid var(--line); }
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 100px); }
.about-heading h2 { margin: 0; }
.about-copy { min-width: 0; max-width: 560px; }
.about-copy > p { margin-bottom: 22px; }
.about-copy .about-intro { font-size: clamp(20px, 2vw, 26px); line-height: 1.45; letter-spacing: -.025em; }
@media (max-width: 760px) {
  .about-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Discreet, readable access to website and privacy information. */
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom { flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.privacy-note { margin-top: 20px; font-size: 13px; color: var(--muted); }
.privacy-note a { display: inline-block; padding-block: 10px; }
.form-footer { flex-wrap: wrap; gap: 12px 20px; }
.form-footer a { display: inline-flex; align-items: center; min-height: 44px; }