@charset "utf-8";
/* ============ ALL CSS IN ONE EXT. SHEET ============ */

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color:#111; }
a { color:#0033cc; text-decoration:none; }
a:hover { color:#d41f55; }
.page-wrapper { max-width:1200px; margin:0 auto; background:#fff; }

/* ===== Header ===== */
.header {
  background:#805500; color:#fff; padding:16px 20px 22px;
  display:flex; justify-content:center;
}
.header .post-container{ width:100%; max-width:1000px; margin:0 auto; }
.headline { font:700 28px/1.2 Verdana, Geneva, sans-serif; margin:0 0 8px; color:#fff; text-align:center; }

.header-bar {
  display:grid; grid-template-columns:auto auto; grid-template-areas:"brand blurb";
  gap:8px 24px; align-items:start; justify-content:center;
}
.brand-line { grid-area:brand; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.brand-text { font:700 20px/1.2 Verdana, Geneva, sans-serif; color:#fff; }
.brand-badge img { width:118px; height:auto; display:block; }

.header .post-content { grid-area:blurb; margin:0; }
.header .post-content p { margin:0; line-height:1.35; font-weight:bold; color:#fff; text-align:center; }
.text-red-text { color:#ff0000; }

.nav-row { margin-top:14px; display:flex; justify-content:center; }

/* ===== Vars ===== */
:root{
  --navH:44px;
  --navActive:#996600;
  --btnBg:#ffc766;
  --btnBorder:#cc7a00;
  --thumbH:240px;
}

/* ===== Menu ===== */
#css3menu0, #css3menu0 ul { list-style:none; margin:0; padding:0; }
#css3menu0 { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; background:transparent; padding:0; position:relative; z-index:50; }
#css3menu0 a::before, #css3menu0 a::after, #css3menu0 span::before, #css3menu0 span::after, #css3menu0 label::before, #css3menu0 label::after { content:none !important; }
#css3menu0 > li.switch { display:none; }
#css3menu0 > li.switch > label.menu-toggle { display:block; cursor:pointer; user-select:none; color:#111; font-weight:700; height:var(--navH); line-height:var(--navH); padding:0 14px; background:#fff; border:1px solid rgba(0,0,0,.15); border-radius:999px; }
#css3menu0 > li { position:relative; }
#css3menu0 > li > a {
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--navH); padding:0 16px; border-radius:999px;
  background:var(--btnBg); border:1px solid var(--btnBorder);
  color:#111; font-weight:700; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition: background .15s ease, color .15s ease, transform .03s ease;
}
#css3menu0 > li > a:hover { background:#ffb84d; }
#css3menu0 > li > a:active { transform: translateY(1px); }
#css3menu0 li ul {
  display:none; position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; border:1px solid #ccc; border-radius:8px; padding:6px 0; z-index:1000; box-shadow:0 8px 16px rgba(0,0,0,.18);
}
#css3menu0 li:hover > ul, #css3menu0 li:focus-within > ul { display:block; }
#css3menu0 li ul li a, #css3menu0 li ul li .menu-spacer { display:block; padding:0 12px; height:36px; line-height:36px; color:#111; }
#css3menu0 li ul li a:hover { background:#f3f3f3; }

#css3menu0 > li:hover > a,
#css3menu0 > li:focus-within > a,
#css3menu0 > li > a:active,
#css3menu0 > li > a:focus,
#css3menu0 > li > a.current,
#css3menu0 > li.active > a,
#css3menu0 > li > a[aria-current="page"] {
  background:var(--navActive) !important; border-color:var(--navActive) !important; color:#fff !important;
}
#css3menu0 li:hover > ul, #css3menu0 li:focus-within > ul, #css3menu0 li.active > ul, #css3menu0 li > a.current + ul, #css3menu0 li > a[aria-current="page"] + ul {
  background:var(--navActive) !important; border-color:var(--navActive) !important;
}
#css3menu0 li:hover > ul a, #css3menu0 li:focus-within > ul a, #css3menu0 li.active > ul a, #css3menu0 li > a.current + ul a, #css3menu0 li > a[aria-current="page"] + ul a {
  color:#fff !important; border-top:1px solid rgba(255,255,255,.15);
}
#css3menu0 li:hover > ul a:hover, #css3menu0 li:focus-within > ul a:hover { background:rgba(255,255,255,.15) !important; }

.menu-spacer { color:transparent; pointer-events:none; }

/* Mobile menu / header stack */
.c3m-switch-input { display:none; }
@media (max-width:900px){
  .header-bar { grid-template-columns:1fr !important; grid-template-areas:"brand" "blurb"; justify-content:center; }
  .brand-line { display:block; white-space:normal; text-align:center; }
  .brand-text { display:block; margin-bottom:6px; }
  .brand-badge { display:inline-block; }
  .header .post-content { margin-top:6px; }
  #css3menu0 { display:block; }
  #css3menu0 > li.switch { display:block; text-align:center; margin-bottom:6px; }
  #css3menu0 > li.topmenu, #css3menu0 > li.toplast { display:none; }
  #css3menu-switcher:checked ~ #css3menu0 > li.topmenu,
  #css3menu-switcher:checked ~ #css3menu0 > li.toplast { display:block; }
  #css3menu0 > li > a { display:block; border-radius:10px; margin:6px 10px; text-align:center; height:48px; line-height:48px; }
  #css3menu0 li ul { position:static; display:none; border:0; border-radius:0; padding:0; background:#ff9900; box-shadow:none; }
  #css3menu0 li:hover > ul { display:none !important; }
  #css3menu0 > li > a:focus + ul,
  #css3menu0 > li > a:active + ul,
  #css3menu0 > li:focus-within > ul { display:block !important; }
  #css3menu0 li ul li a, #css3menu0 li ul li .menu-spacer { padding:0 22px; height:44px; line-height:44px; }
  #css3menu0 > li:hover > a, #css3menu0 > li:focus-within > a { background:var(--navActive); color:#fff; }
}

/* ===== Content layout ===== */
.title-container { text-align:center; }
.title-container p { text-align:left; max-width:800px; margin:0 auto; }

.grid-container {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
  padding:10px;
}

.grid1col { display:flex; flex-direction:column; align-items:center; text-align:center;
  border:none; outline:none; border-radius:8px; padding:16px; background:#ffffff; }
.header-grid { background:transparent !important; }
.gridinsideCol { display:flex; flex-direction:column; align-items:center; }

.image-card { width:100%; display:block; text-decoration:none; color:inherit; position:relative; }
.gallery-photo {
  display:block; width:100% !important; height:var(--thumbH) !important;
  object-fit:contain !important; background:#f6f6f6; border-radius:6px; border:0 !important;
}

/* ===== Footer ===== */
footer { background:#f0f0f0; padding:20px 0; }
.grid1col-offset { display:flex; flex-direction:column; align-items:center; text-align:center; border:1px solid #ccc; border-radius:8px; padding:20px; }
.gridinsideCol-offset { display:flex; flex-direction:column; align-items:center; margin-top:10px; }
hr { border:none; border-top:1px solid #000; height:1px; margin:10px 0; }
.font20PT { font-size:20px; } .font14PT { font-size:14px; }

/* ===== Hero utilities ===== */
.grid-span-all { grid-column:1 / -1; }
.fullwidth-block { padding:0; background:transparent; border:0; }
.hero-image { margin:16px 0; }
.hero-image img { display:block; width:100%; height:auto; }
.hero-image figcaption { font-size:14px; text-align:center; margin-top:6px; }
.content-left { width:100%; max-width:800px; margin:0 auto; text-align:left; }
.content-left p, .content-left ul, .content-left ol, .content-left h2, .content-left h3 { text-align:left; }

.text-center { text-align:center; }
.stack { display:flex; flex-direction:column; gap:14px; }
.caption { font-size:14px; opacity:.9; }
.content-narrow { width:100%; max-width:800px; margin:0 auto; }
.divider { border:none; border-top:1px solid #000; height:1px; margin:10px 0; }
.header-grid-no-border { border:none; padding:0; }
.align-center { text-align:center; }
.intro { max-width:800px; margin:0 auto; text-align:left; }

/* =========================================================
   2x600px comparison strip (Flexbox) — inside 1200px wrapper
   ========================================================= */
.compare-flex-2{
  display:flex;
  flex-wrap:wrap;         /* stacks on narrow screens */
  gap:0;
  justify-content:center; /* centers the two 600px panels */
  align-items:flex-start;
  padding:0;
  margin:0 0 10px 0;
}

.compare-flex-2 .panel{
  flex: 0 0 600px;        /* fixed 600px column */
  max-width:600px;
  margin:0;
  padding:0;
  background:transparent;
}

.compare-flex-2 .panel img{
  display:block;
  width:100%;             /* fills 600px column */
  height:auto;
  border:0;
  background:transparent;
  object-fit:contain;
}

.compare-flex-2 .image-title{
  font-weight:700;
  text-align:center;
  margin:8px 0 16px;
}

/* Stack when wrapper isn’t wide enough for 2×600 */
@media (max-width:1240px){
  .compare-flex-2{ padding:6px; }
  .compare-flex-2 .panel{
    flex:1 1 100%;
    max-width:100%;
  }
}
/* ======  This is commented out === */
/* ======  This is commented out === */
/* ========== Compare-Flex-1 (single image per viewport row) ========== */
/* Container that stacks fullscreen rows */
.compare-flex-1 {
  display: flex;
  flex-direction: column;
  gap: 0;                /* no gutters between frames */
}

/* One image per row, sized to fill the viewport */
.cf1-row {
  position: relative;
  width: 100%;
  min-height: 100vh;     /* fallback for older browsers */
  min-height: 100dvh;    /* modern, ignores URL bar shrink/expand */
  display: grid;
  place-items: center;   /* center image both axes */
  overflow: hidden;      /* hide any accidental overflow on odd assets */
  background: #ffffff;   /* keep your site’s white background */
}

/* The actual media (img/video/svg). No cropping; fit inside row. */
.cf1-row > img,
.cf1-row > picture > img,
.cf1-row > video,
.cf1-row > svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;           /* preserve aspect ratio */
  height: auto;          /* preserve aspect ratio */
  object-fit: contain;   /* show the whole image without cropping */
  display: block;
}

/* Optional: simple caption support (if you want labels under images) */
.cf1-caption {
	position: absolute;
	left: 2px;
	right: 0;
	bottom: 1px;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 1.3;
	background: rgba(255,255,255,.85); /* readable on busy images */
	text-align: center;
}
/* Order form card borders */
.order-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  background: #fff;            /* keeps card white on gray sections */
}

/* Optional: a tiny hover lift (remove if you don’t want it) */
.order-card:hover {
  border-color: var(--btnBorder);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}


/* Remove default whitespace around figures to keep tight frames */
.compare-flex-1 figure { margin: 0; }

/* ======  This is commented out === */
/* ======  This is commented out === */