/* =============================================================================
   SHARED STYLESHEET
   Project  : O2I-style Website
   Pages    : o2i-page.html, contact.html

   TABLE OF CONTENTS
   -----------------
   1.  CSS Variables
   2.  Reset & Base
   3.  Layout utility
   4.  Header
       4a. Logo
       4b. Top nav links
       4c. Phone, Search & Contact button
   5.  Service nav bar & dropdowns
   6.  Section heading
   7.  Tab nav
   8.  Breadcrumb
   9.  Main content area
       9a. Article (left column)
       9b. TOC box (middle column)
       9c. Quote box (right column)
   10. Contact page
       10a. Contact form
       10b. Contact sidebar
   11. Footer
   12. Responsive / Media queries
   ============================================================================= */


/* =============================================================================
   1. CSS VARIABLES
   ============================================================================= */

:root {
  /* --- Brand colours --- */
  --color-primary:        #1a6fa3;  /* teal blue — headings, links, accents  */
  --color-primary-dark:   #155d8a;  /* darker teal — hover states            */
  --color-primary-light:  #2196c9;  /* lighter teal — active tabs, borders   */
  --color-accent:         #f5a100;  /* orange — buttons, highlights          */
  --color-accent-dark:    #d48f00;  /* darker orange — button hover          */
  --color-danger:         #220754;  /* red — logo, required markers          */

  /* --- Neutrals --- */
  --color-dark:           #1c0202;
  --color-text:           #444;
  --color-text-light:     #666;
  --color-muted:          #888;
  --color-border:         #ddd;
  --color-border-light:   #eee;
  --color-bg:             #fff;
  --color-bg-subtle:      #f7f7f7;
  --color-bg-blue:        #eef5fc;

  /* --- Service bar --- */
  --color-svc-bar:        #500b0b;
  --color-svc-bar-hover:  #555;

  /* --- Footer --- */
  --color-footer-bg:      #1a2a3a;
  --color-footer-bottom:  #111e2b;

  /* --- Typography --- */
  --font-base:  'Open Sans', Arial, sans-serif;
  --font-mono:  monospace;

  /* --- Misc --- */
  --max-width:      1180px;
  --radius:         2px;
  --transition:     0.15s ease;
  --transition-med: 0.2s ease;
}


/* =============================================================================
   2. RESET & BASE
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
}

a {
  text-decoration: none;
  color: var(--color-primary);
}

a:hover {
  color: var(--color-accent);
}

ul {
  list-style: none;
}

/* Offset anchor targets so sticky header doesn't obscure them */
[id] {
  scroll-margin-top: 130px;
}


/* =============================================================================
   3. LAYOUT UTILITY
   ============================================================================= */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}


/* =============================================================================
   4. HEADER
   ============================================================================= */

.top-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0 8px;
}

.top-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ---- 4a. Logo ---- */

.logo-wrap {
  min-width: 200px;
}

.logo-name {
  display: block;
  font-size: 30px;
  font-weight: 800;
  font-style: italic;
  color: var(--color-danger);
  line-height: 1;
  letter-spacing: -0.5px;
}

.logo-name span {
  color: var(--color-danger);
}

.logo-slogan {
  display: block;
  font-size: 11.5px;
  color: var(--color-muted);
  margin-top: 3px;
}

/* ---- 4b. Top nav links ---- */

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.top-links {
  display: flex;
  align-items: center;
}

.top-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
  padding: 0 11px;
  border-right: 1px solid #ccc;
  line-height: 1;
  transition: color var(--transition);
}

.top-links a:first-child {
  border-left: 1px solid #ccc;
}

.top-links a:hover {
  color: var(--color-primary);
}

/* ---- 4c. Phone, Search & Contact button ---- */

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.phone-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-wrap .ph-icon {
  font-size: 20px;
}

.phone-wrap .ph-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark);
  white-space: nowrap;
}

.search-wrap {
  display: flex;
  border: 1px solid var(--color-border);
}

.search-wrap input {
  padding: 7px 10px;
  border: none;
  outline: none;
  width: 165px;
  font-size: 13px;
  color: var(--color-muted);
  font-family: inherit;
  background: var(--color-bg);
}

.search-wrap button {
  background: #f0f0f0;
  border: none;
  border-left: 1px solid var(--color-border);
  padding: 7px 10px;
  cursor: pointer;
  font-size: 14px;
}

.contact-btn {
  background: var(--color-accent);
  color: var(--color-bg) !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 20px;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background var(--transition-med);
}

.contact-btn:hover {
  background: var(--color-accent-dark);
  color: var(--color-bg);
}


/* =============================================================================
   5. SERVICE NAV BAR & DROPDOWNS
   ============================================================================= */

.service-bar {
  background: var(--color-svc-bar);
  position: relative;
  z-index: 500;
}

.service-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Home icon (plain anchor, not inside .svc-item) */
.service-bar-inner > a.svc-home {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  padding: 10px 14px;
  color: var(--color-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  transition: background var(--transition);
}

.service-bar-inner > a.svc-home:hover {
  background: var(--color-svc-bar-hover);
  color: var(--color-bg);
}

/* Each service item wrapper */
.svc-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* Top-level label link */
.svc-item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 13px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-bg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition);
}

.svc-item:hover > a {
  background: var(--color-svc-bar-hover);
}

/* "More Services" item — pinned to the right */
.svc-more-wrap {
  margin-left: auto;
  border-right: none !important;
}

.svc-more-wrap > a.svc-more {
  background: var(--color-primary-light);
}

.svc-more-wrap:hover > a.svc-more {
  background: var(--color-primary-dark);
}

/* Dropdown panel */
.svc-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--color-bg);
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  z-index: 600;
  padding: 6px 0;
}

/* Right-align the last dropdown to prevent viewport overflow */
.svc-dropdown-right {
  left: auto;
  right: 0;
}

.svc-item:hover .svc-dropdown {
  display: block;
}

/* Dropdown links */
.svc-dropdown a {
  display: block;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--color-dark);
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--color-border-light);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
}

.svc-dropdown a:last-child {
  border-bottom: none;
}

.svc-dropdown a:hover {
  background: var(--color-bg-blue);
  color: var(--color-primary);
  padding-left: 20px;
}


/* =============================================================================
   6. SECTION HEADING
   ============================================================================= */

.section-heading-row {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 16px 0;
}

.section-heading-row h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* =============================================================================
   7. TAB NAV
   ============================================================================= */

.tab-nav {
  border-bottom: 3px solid var(--color-primary-light);
  margin-top: 10px;
}

.tab-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tab-nav-inner a {
  display: inline-block;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -3px;
  transition: background var(--transition), color var(--transition);
}

.tab-nav-inner a:hover {
  color: var(--color-primary);
}

.tab-nav-inner a.active {
  background: var(--color-primary-light);
  color: var(--color-bg);
  border-color: var(--color-primary-light);
}

.tab-nav-inner a.active:hover {
  color: var(--color-bg);
}


/* =============================================================================
   8. BREADCRUMB
   ============================================================================= */

.breadcrumb {
  border-bottom: 1px solid var(--color-border-light);
  padding: 8px 0;
}

.breadcrumb-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
  font-size: 12.5px;
  color: var(--color-muted);
}

.breadcrumb-inner a {
  color: var(--color-muted);
  transition: color var(--transition);
}

.breadcrumb-inner a:hover {
  color: var(--color-primary);
}

.breadcrumb-inner .bc-link {
  color: var(--color-primary);
  font-weight: 600;
}


/* =============================================================================
   9. MAIN CONTENT AREA
   ============================================================================= */

.main-wrap {
  background: var(--color-bg);
  padding: 24px 0 56px;
}

.main-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 260px 290px;
  gap: 28px;
  align-items: start;
}

/* ---- 9a. Article (left column) ---- */

.article h1 {
  font-size: 27px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 16px;
  line-height: 1.25;
}

.article h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 26px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e5e5;
}

.article p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 14px;
}

.article ul.blist {
  margin: 8px 0 16px 4px;
}

.article ul.blist li {
  position: relative;
  padding: 5px 0 5px 18px;
  font-size: 14px;
  color: var(--color-text);
  border-bottom: 1px dotted #e8e8e8;
}

.article ul.blist li:last-child {
  border-bottom: none;
}

.article ul.blist li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: var(--color-primary);
  font-size: 16px;
  line-height: 1.35;
}

.cta-wrap {
  margin: 28px 0 10px;
}

.cta-wrap a {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 30px;
  border-radius: var(--radius);
  transition: background var(--transition-med);
}

.cta-wrap a:hover {
  background: var(--color-accent-dark);
  color: var(--color-bg);
}

/* ---- 9b. TOC box (middle column) ---- */

.toc-box {
  border: 1px solid #b0d4f0;
  border-top: 3px solid var(--color-primary-light);
  margin-top: 48px;
}

.toc-box h3 {
  background: var(--color-bg-blue);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1px solid #c8dfef;
}

.toc-box ul li {
  border-bottom: 1px solid var(--color-border-light);
}

.toc-box ul li:last-child {
  border-bottom: none;
}

.toc-box ul li a {
  display: block;
  position: relative;
  padding: 8px 14px 8px 24px;
  font-size: 13px;
  color: var(--color-text);
  transition: background var(--transition), color var(--transition);
}

.toc-box ul li a::before {
  content: "•";
  position: absolute;
  left: 11px;
  color: var(--color-primary);
  font-size: 15px;
  line-height: 1.3;
}

.toc-box ul li a:hover {
  background: var(--color-bg-blue);
  color: var(--color-primary);
}

/* ---- 9c. Quote box (right column) ---- */

.quote-box {
  border: 1px solid var(--color-border);
  padding: 20px;
}

.quote-box h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.quote-box .qsub {
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: 16px;
  line-height: 1.5;
}

.quote-box input,
.quote-box textarea {
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  background: var(--color-bg-subtle);
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text);
  outline: none;
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}

.quote-box input:focus,
.quote-box textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-bg);
}

.quote-box textarea {
  resize: vertical;
}

.captcha-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.captcha-row input {
  margin-bottom: 0;
  flex: 1;
}

.captcha-code {
  display: flex;
  align-items: center;
  background: #e2e2e2;
  border: 1px solid #bbb;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-family: var(--font-mono);
  border-radius: var(--radius);
  white-space: nowrap;
  color: var(--color-dark);
}

.quote-box button {
  width: 100%;
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  padding: 11px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  font-family: inherit;
  transition: background var(--transition-med);
}

.quote-box button:hover {
  background: var(--color-accent-dark);
}

.qnote {
  font-size: 11.5px;
  color: var(--color-muted);
  margin-top: 10px;
  line-height: 1.5;
}

.qnote a {
  color: var(--color-primary);
}

.qcontact {
  margin-top: 16px;
  border-top: 1px solid var(--color-border-light);
  padding-top: 14px;
}

.qc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
  margin-bottom: 10px;
  line-height: 1.4;
}

.qc-row .ico {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.qc-row a {
  color: var(--color-primary);
}

/* =============================================================================
    SERVICES PAGE
   ============================================================================= */

.svc-sub-list--pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0;
}

.svc-sub-list--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}


/* =============================================================================
   10. CONTACT PAGE
   ============================================================================= */

.contact-page-wrap {
  background: var(--color-bg);
  padding: 30px 0 60px;
}

.contact-page-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

/* ---- 10a. Contact form ---- */

.contact-form-section h1 {
  font-size: 27px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.contact-form-section .intro {
  font-size: 14px;
  color: var(--color-text-light);
  margin-bottom: 28px;
  line-height: 1.7;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.contact-form .form-row.full {
  grid-template-columns: 1fr;
}

.contact-form label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #555;
  margin-bottom: 5px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--color-text);
  outline: none;
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-bg);
}

.contact-form textarea {
  resize: vertical;
  min-height: 130px;
}

.contact-form .required {
  color: var(--color-danger);
}

.contact-form .submit-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.contact-form .submit-btn {
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  padding: 12px 36px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  font-family: inherit;
  transition: background var(--transition-med);
}

.contact-form .submit-btn:hover {
  background: var(--color-accent-dark);
}

.contact-form .reset-btn {
  background: #eee;
  color: #555;
  border: 1px solid #ccc;
  padding: 12px 24px;
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--radius);
  font-family: inherit;
  transition: background var(--transition-med);
}

.contact-form .reset-btn:hover {
  background: var(--color-border);
}

.form-note-bottom {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 14px;
  line-height: 1.6;
}

.form-note-bottom a {
  color: var(--color-primary);
}

/* Success message — hidden by default, revealed via JS on submit */
.success-msg {
  display: none;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-left: 4px solid #4caf50;
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 14px;
  color: #2e7d32;
}

/* ---- 10b. Contact sidebar ---- */

.contact-info-box {
  border: 1px solid var(--color-border);
  margin-bottom: 20px;
  overflow: hidden;
}

/* Shared box title style for both sidebar boxes */
.contact-info-box .box-title,
.office-box .box-title {
  background: var(--color-primary);
  color: var(--color-bg);
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 16px;
  letter-spacing: 0.03em;
}

.contact-info-box .box-body {
  padding: 16px;
}

.ci-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
}

.ci-row:last-child {
  border-bottom: none;
}

.ci-row .ci-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.ci-row .ci-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 2px;
}

.ci-row a {
  color: var(--color-primary);
  font-weight: 600;
}

.ci-row a:hover {
  color: var(--color-accent);
}

.office-box {
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.office-card {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

.office-card:last-child {
  border-bottom: none;
}

.office-card strong {
  display: block;
  color: var(--color-primary);
  font-size: 13px;
  margin-bottom: 4px;
}


/* =============================================================================
   11. FOOTER
   ============================================================================= */

.footer {
  background: var(--color-footer-bg);
  color: rgba(255, 255, 255, 0.7);
}

.footer-cols {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 36px 16px 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand-name {
  display: block;
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  color: #fff;
  margin-bottom: 10px;
}

.footer-brand-name span {
  color: var(--color-accent);
}

.footer-cols p {
  font-size: 12.5px;
  line-height: 1.6;
  margin-bottom: 5px;
}

.footer-cols p a {
  color: rgba(255, 255, 255, 0.55);
}

.footer-cols p a:hover {
  color: var(--color-accent);
}

.footer-cols h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-cols ul li {
  margin-bottom: 7px;
}

.footer-cols ul li a {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--transition);
}

.footer-cols ul li a:hover {
  color: var(--color-accent);
}

.footer-bottom {
  background: var(--color-footer-bottom);
  padding: 14px 0;
}

.footer-bottom-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.9;
}

.footer-bottom-inner a {
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--transition);
}

.footer-bottom-inner a:hover {
  color: var(--color-accent);
}


/* =============================================================================
   12. RESPONSIVE / MEDIA QUERIES
   ============================================================================= */

/* Tablet landscape (≤ 1024px) */
@media (max-width: 1024px) {
  .main-inner {
    grid-template-columns: 1fr 260px;
  }

  .quote-box {
    grid-column: 1 / -1;
    max-width: 500px;
  }

  .contact-page-inner {
    grid-template-columns: 1fr;
  }
}

/* Tablet portrait (≤ 768px) */
@media (max-width: 768px) {
  .main-inner {
    grid-template-columns: 1fr;
  }

  .top-links {
    flex-wrap: wrap;
  }

  .service-bar-inner {
    flex-wrap: wrap;
  }

  .service-bar-inner a {
    font-size: 10px;
    padding: 8px 10px;
  }

  .tab-nav-inner {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }

  .phone-wrap .ph-num {
    font-size: 16px;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {
  .header-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .footer-cols {
    grid-template-columns: 1fr;
  }
}