:root{
  --bg:#0b1220;
  --card:#ffffff;
  --ink:#0e1726;
  --muted:#5b657a;
  --brand:#1e90ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f6f8fb;color:var(--ink);}
.container{max-width:1100px;margin:0 auto;padding:28px}
.header{display:flex;align-items:center;gap:16px}
.header img{height:54px;width:auto}
.brand{font-size:1.5rem;font-weight:800;letter-spacing:.4px}
.hero{margin:28px 0;padding:24px;border-radius:16px;background:linear-gradient(135deg,#e8f0ff, #f7fbff)}
.hero h1{margin:0 0 8px 0;font-size:2rem}
.hero p{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:22px}
.card{background:var(--card);border-radius:16px;box-shadow:0 8px 24px rgba(2,8,20,.06);overflow:hidden;border:1px solid #eef1f6}
.card img{display:block;width:100%;height:160px;object-fit:cover}
.card .pad{padding:14px 16px}
.card h3{margin:2px 0 8px 0;font-size:1.05rem}
.card ul{list-style:none;padding:0;margin:0;color:var(--muted);font-size:.95rem}
.card li{padding:3px 0;border-top:1px dashed #eef1f6}
.card li:first-child{border-top:0}
.card .actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.table-wrap{overflow:auto;background:#fff;border-radius:14px;border:1px solid #eef1f6;box-shadow:0 8px 24px rgba(2,8,20,.05);margin-top:30px}
table{width:100%;border-collapse:collapse;font-size:.98rem}
th,td{padding:12px 14px;border-bottom:1px solid #f0f2f7;text-align:left}
th{background:#f8faff;font-weight:700}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef6ff;color:#0a58ca;border:1px solid #d7eaff;font-weight:600;font-size:.8rem}
.footer{margin:40px 0 10px 0;color:var(--muted);font-size:.9rem}
.cta{display:inline-block;margin-top:10px;background:var(--brand);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700}
.btn{display:inline-block;border:none;background:var(--brand);color:#fff;padding:12px 14px;border-radius:10px;font-weight:700;cursor:pointer;text-decoration:none}
.btn.secondary{background:#0e1726;color:#fff}
.form{background:#fff;border:1px solid #eef1f6;border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(2,8,20,.05)}
label{display:block;font-weight:600;margin:10px 0 6px 0}
input[type="text"], input[type="email"], select, textarea{
  width:100%;padding:10px 12px;border:1px solid #dfe5ef;border-radius:10px;font-size:1rem;background:#fcfdff
}
textarea{min-height:120px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.row{grid-template-columns:1fr}}
.form-note{color:var(--muted);font-size:.95rem;margin-top:8px}
.email-inline{font-weight:700}
.enquiry-anchor{scroll-margin-top:80px}
.mailto{display:inline-flex;align-items:center;gap:8px}
.success{padding:10px 12px;border:1px solid #86efac;background:#ecfdf5;color:#065f46;border-radius:10px;margin:10px 0;display:none}
.error{padding:10px 12px;border:1px solid #fecaca;background:#fef2f2;color:#7f1d1d;border-radius:10px;margin:10px 0;display:none}
/* Info sections */
.info{margin:22px 0;padding:20px;border-radius:16px;background:linear-gradient(135deg,#eef6ff,#ffffff)}
.info h2{margin:0 0 8px 0;font-size:1.5rem}
.info p{margin:0;color:var(--muted)}
@media (prefers-color-scheme: dark){
  html,body{background:var(--bg);color:#e9eefc}
  .hero{background:linear-gradient(135deg,#0f1a33,#0b1220)}
  .table-wrap, .card, .form{background:#0f1628;border-color:#1b2440}
  th{background:#0b1220}
  input[type="text"], input[type="email"], select, textarea{background:#0b1220;color:#e9eefc;border-color:#1b2440}
  .info{background:linear-gradient(135deg,#0f1a33,#0b1220)}
}


/* --- Normalize card heights and align buttons --- */
.grid{align-items:stretch}
.card{display:flex;flex-direction:column;height:100%}
.card .pad{display:flex;flex-direction:column;flex:1}
.card .actions{margin-top:auto;padding-top:10px;display:flex;gap:8px;flex-wrap:wrap}


/* --- Uniform CTA sizing across <button> and <a> --- */
.btn{
  font-size:14px;
  line-height:1;             /* normalize cross-element */
  padding:12px 14px;
  border-radius:10px;
  display:inline-flex;       /* vertical centering */
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;        /* avoid multi-line growth */
  appearance:none;           /* reset native button styling */
  -webkit-appearance:none;
}
.btn.secondary{font-size:14px; line-height:1; padding:12px 14px}


/* ===== Force light theme regardless of device dark mode ===== */
:root{ color-scheme: light; }
/* Override any prior dark-mode styles */
@media (prefers-color-scheme: dark){
  html,body{background:#f6f8fb;color:#0e1726}
  .hero{background:linear-gradient(135deg,#e8f0ff,#f7fbff)}
  .table-wrap, .card, .form{background:#fff;border-color:#eef1f6}
  th{background:#f8faff}
  input[type="text"], input[type="email"], select, textarea{background:#fcfdff;color:#0e1726;border-color:#dfe5ef}
}

/* ===== Mobile layout polish ===== */
@media (max-width: 700px){
  .container{padding:16px}
  .hero{padding:16px}
  .grid{gap:12px}
  .card img{height:200px; object-fit:cover}
  .btn{font-size:15px}                 /* slightly larger tap targets */
  .card .actions .btn{flex:1 1 48%;}   /* side-by-side CTAs on mobile */
}


/* ===== Force light theme across the board (override any dark prefs) ===== */
:root{ color-scheme: light; }
@media (prefers-color-scheme: dark){
  html,body{background:#f6f8fb!important;color:#0e1726!important}
  .hero{background:linear-gradient(135deg,#e8f0ff,#f7fbff)!important}
  .table-wrap, .card, .form{background:#fff!important;border-color:#eef1f6!important}
  th{background:#f8faff!important}
  input[type="text"], input[type="email"], select, textarea{background:#fcfdff!important;color:#0e1726!important;border-color:#dfe5ef!important}
  /* Previously missed: info cards */
  .info{background:linear-gradient(135deg,#eef6ff,#ffffff)!important;color:#0e1726!important;border-color:#eef1f6!important}
}

/* ===== Mobile full-width polish ===== */
@media (max-width: 700px){
  .container{padding-left:0; padding-right:0}
  .hero, .info, .table-wrap, #enquiry .form{margin-left:0; margin-right:0; border-radius:0}
  .grid{grid-template-columns:1fr; gap:12px}
  .card img{height:220px; object-fit:cover}
  .btn{font-size:15px}
  .card .actions .btn{flex:1 1 48%}
}


/* Guard against horizontal overflow on small screens */
html, body { overflow-x: hidden; }


/* === Mobile header logo padding & sizing === */
@media (max-width: 700px){
  .header{padding:10px 16px}
  .header img{height:48px; display:block}
}

/* === Mobile: give Quick Enquiry (and 'Prefer email?') the same side padding as info boxes === */
@media (max-width: 700px){
  #enquiry{padding-left:16px; padding-right:16px}
  #enquiry .section-title{padding-left:0; padding-right:0}
  #enquiry .form-note{margin-top:8px}
}