/* === Base === */
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;line-height:inherit;color:#000;background-color:#f4f4f4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}
p{margin:0}
a{color:inherit;text-decoration:inherit}
strong{font-weight:700}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

/* === Utilities subset used across templates === */

/* Layout & flex */
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.flex-1{flex:1 1 0%}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.w-full{width:100%}
.min-h-screen{min-height:100vh}
.mx-auto{margin-left:auto;margin-right:auto}
.container{width:100%;margin-left:auto;margin-right:auto}
.max-w-screen-lg{max-width:1024px}
.max-w-screen-xl{max-width:1280px}
.max-w-prose{max-width:65ch}
.max-w-\[75ch\]{max-width:75ch}

/* Spacing */
.p-6{padding:1.5rem} /* NEW: for the aside panel */
.px-1{padding-left:0.25rem;padding-right:0.25rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.gap-4{gap:1rem}
.gap-12{gap:3rem}
.h-14{height:3.5rem}
.h-20{height:5rem}

/* Typography */
.font-sans{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} /* NEW: body class */
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}             /* NEW: body class */
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.font-semibold{font-weight:600}
.font-medium{font-weight:500}
.leading-relaxed{line-height:1.625}
.tracking-widest{letter-spacing:0.1em}
.text-center{text-align:center}
.text-left{text-align:left}
.text-black{color:#000}
.text-white{color:#fff}

/* Display helpers */
.inline-block{display:inline-block} /* NEW: for the CTA button */

/* Colours (OA.Works palette) */
.bg-\[\#428BCA\]{background-color:#428BCA}
.text-\[\#428BCA\]{color:#428BCA}
.hover\:text-\[\#428BCA\]:hover{color:#428BCA}
.bg-\[\#345484\]{background-color:#345484}
.hover\:bg-\[\#345484\]:hover{background-color:#345484}
.bg-neutral-50\/40{background-color:rgba(250,250,250,0.4)}
.bg-neutral-600{background-color:#4b5563}
.border{border-width:1px}
.border-neutral-200{border-color:#e5e7eb}
.rounded{border-radius:.25rem}
.rounded-lg{border-radius:.5rem}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.05)}

/* Background utilities */
.bg-no-repeat{background-repeat:no-repeat}
.bg-cover{background-size:cover}
.bg-center{background-position:center}

/* Transitions */
.transition,.transition-colors,.transition-opacity{
  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity;
  transition-duration:150ms;
  transition-timing-function:cubic-bezier(0.4,0,0.2,1)
}
.hover\:underline:hover{text-decoration:underline}

/* Groups (for OA.Works logo hover) */
.group:hover .group-hover\:opacity-90{opacity:.9}
.group-hover\:opacity-90{opacity:1}

/* Responsive (only what’s used) */
@media (min-width:1024px){
  .lg\:grid{display:grid;grid-template-columns:minmax(0,1fr) 22rem;align-items:flex-start;gap:3rem}
  .lg\:grid-cols-\[minmax\(0,1fr\)_22rem\]{grid-template-columns:minmax(0,1fr) 22rem}
  .lg\:items-start{align-items:flex-start}
  .lg\:gap-12{gap:3rem}
  .lg\:text-left{text-align:left}
  .lg\:mx-0{margin-left:0;margin-right:0}
  .lg\:flex-row{flex-direction:row}
  .lg\:items-center{align-items:center}
  .lg\:gap-4{gap:1rem}
  .lg\:mt-0{margin-top:0}
  .lg\:sticky{position:sticky}
  .lg\:top-24{top:6rem}
  .lg\:self-start{align-self:flex-start}
}

@media (min-width:1280px){
  .xl\:max-w-screen-xl{max-width:1280px}
}

@media (min-width:1536px){
  .\32 xl\:max-w-\[1100px\]{max-width:1100px}
}