/* Site styles. Loaded after tokens.css and bundle.css, in the same place the
   prototype's inline <style> block sat. Do not override design tokens here. */

/* ---- The prototype's <style> block from design/index.html, unchanged ---- */
body{margin:0;background:#000000;font-family:"Merriweather",Georgia,serif}
a{color:#2f717a}a:hover{color:#973f26}
/* Smooth scrolling waits for site.js to add .lp-smooth after load, so a page
   that opens on a #hash (e.g. /?checkout=error#pricing) jumps straight there
   instead of visibly scrolling down from the top. */
html.lp-smooth{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html,html.lp-smooth{scroll-behavior:auto}}
/* Responsive: the design is drawn at 1440px; these rules reflow it for tablets and phones. */
@media (max-width: 900px){
.lp-sec{padding-left:32px!important;padding-right:32px!important}
.lp-2col{column-gap:40px!important;gap:40px!important}
.lp-stack-md{flex-direction:column!important;align-items:stretch!important}
}
@media (max-width: 760px){
.lp-sec{padding-left:20px!important;padding-right:20px!important}
.lp-2col{grid-template-columns:minmax(0,1fr)!important;row-gap:32px!important}
.lp-2col--form{row-gap:0!important}
.lp-flip > :first-child{order:2}
.lp-stack{flex-direction:column!important;align-items:stretch!important}
.lp-card{padding:28px 24px!important}
.lp-card-strip{margin:-28px -24px 8px!important;padding:20px 24px!important}
.lp-dialog{padding:28px 20px!important}
}

/* ---- Interaction states the design system's React components set in JS ----
   Values from design/ds/bundle.js. The resting styles are inline on each
   element (copied from the rendered prototype), so these need !important. */

/* Button: hoverVariants */
.lp-btn--solid:hover{background:var(--color-accent-hover)!important;border-color:var(--color-accent-hover)!important;color:var(--color-text-inverse)!important}
.lp-btn--outline:hover{border-color:var(--color-accent-hover)!important;color:var(--color-accent-hover)!important}
.lp-btn--link:hover{color:var(--color-link-hover)!important}
/* Button: pressed state (not on link buttons) */
.lp-btn:not(.lp-btn--link):active{transform:var(--press-scale)}
.lp-btn[disabled]{opacity:.5!important;pointer-events:none}

/* Accordion question: link colour on hover */
.lp-faq__q:hover{color:var(--color-link)!important}

/* Input and Textarea: white background and a 2px focus ring while focused */
/* Contact overlay fields: white on #f8f6f1 needs a visible edge. #858b8c gives 3.5:1 on white and 3.2:1 on the overlay (WCAG 1.4.11 asks for 3:1). */
[aria-labelledby="contact-title"] .lp-field{border:1px solid #858b8c!important}
.lp-field[aria-invalid="true"]{box-shadow:0 0 0 2px var(--color-error)!important}
.lp-field:focus{background:var(--color-pure-white)!important;box-shadow:0 0 0 2px var(--color-focus)!important}

/* ---- Element swaps: keep the computed look identical to the prototype ----
   Checkout buttons are <button>s where the prototype had <a>s, so they take
   the surrounding line-height like the link did. */
.lp-btn--submit{line-height:inherit;margin:0}
/* Private-workshop openers are <a>s where the prototype had <button>s. */
.lp-btn--as-button{line-height:normal}
.lp-textbtn{text-underline-offset:auto;text-decoration-thickness:auto}

/* ---- States ---- */
[hidden]{display:none!important}
.lp-dialog [tabindex="-1"]:focus{outline:none}

/* Honeypot: hidden from people and screen readers */
.lp-honeypot{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Messages: checkout error, enquiry sent or failed, form errors */
.lp-alert{padding:16px 20px;border-radius:var(--radius-s);font-size:var(--text-medium);line-height:1.6}
.lp-alert a{color:inherit}
.lp-alert--error{background:var(--color-error-bg);color:var(--color-error)}
.lp-alert--success{background:var(--color-success-bg);color:var(--color-success)}