:root{
   /* Warm professional palette */
   --bg: #f2fbff;         /* warm off-white */
   --paper: #ffffff;
   --ink: #1f2328;        /* deep charcoal */
   --muted: #5a6169;      /* muted text */
   --mutedblue: #5a88aa;  /* muted blue text */
   --slate: #2f3e46;      /* deep slate accent */
   --slate2: #24323a;     /* darker slate hover */
   --kicker: #003255;     /* darker blue accent */
   --gold: #b9973e;       /* muted gold (sparingly) */
   --line: rgba(31,35,40,.10);
   --primary:#1f3c63;
   --primary-dark:#162c49;
   --accent:#2f5d94;
   --light:#f5f7fb;
   --white:#ffffff;
   --text:#2f3440;
   --border:#d9e2ec;

   --radius: 18px;
   --shadow: 0 14px 40px rgba(0,0,0,.14);

   --container: 1100px;

   --bar-h: 36px;         /* fixed contact bar height */
   --z: 9999;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
   margin: 0;
   background: var(--bg);
   color: var(--ink);
   font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   line-height: 1.5;
   padding-top: var(--bar-h); /* make room for fixed bar */
}

a{ color: inherit; }
.wrap{ max-width: var(--container); margin: 0 auto; padding: 24px; }
.card{
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
}

/* ===== Fixed Contact Bar + Panel ===== */
#pws-contact-bar{
position: fixed;
top: 0; left: 0; right: 0;
height: var(--bar-h);
z-index: var(--z);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
background: rgba(47, 62, 70, 0.96); /* slate */
color: #fff;
user-select: none;
cursor: pointer;
backdrop-filter: blur(6px);
font-size: 13px;
}
#pws-contact-bar:focus{ outline: 2px solid rgba(255,255,255,.45); outline-offset: -2px; }
.bar-left{ display:flex; align-items:center; gap:10px; }
.bar-dot{
   width: 8px; height: 8px; border-radius: 999px;
   background: var(--gold);
   box-shadow: 0 0 0 3px rgba(199,161,74,.25);
}
.bar-text{ opacity: .95; }
.bar-cta{
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 999px;
   background: rgba(255,255,255,.12);
}

#pws-contact-panel-inline{
left: 0; right: 0;
display: none;
padding: 10px 14px;
}

#pws-contact-panel{
position: fixed;
top: var(--bar-h);
left: 0; right: 0;
z-index: var(--z);
display: none;
padding: 10px 14px;
}
#pws-contact-panel.is-open{ display: block; }
.panel-inner{
   max-width: var(--container);
   margin: 0 auto;
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: 0 16px 50px rgba(0,0,0,.20);
   overflow: hidden;
}
.panel-head{
   display:flex; align-items:center; justify-content: space-between;
   padding: 12px 14px;
   background: rgba(247,245,242,.8);
   border-bottom: 1px solid var(--line);
}
.panel-head strong{ font-family: "Merriweather", serif; font-weight: 700; }
#pws-contact-close{
border: 0; background: transparent;
font-size: 18px; cursor: pointer;
padding: 4px 10px;
color: var(--ink);
}
.panel-grid{
   display: grid;
   grid-template-columns: 1fr 1fr 1.4fr;
   gap: 12px;
   padding: 14px;
}
.panel-item{
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 10px 12px;
   background: #fff;
}
.panel-label{ font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.panel-value{ font-size: 15px; }
.panel-value a{ text-decoration: underline; text-underline-offset: 3px; }
.panel-small{
   padding: 0 14px 14px 14px;
   font-size: 12.5px;
   color: var(--muted);
}

.panel-form input, .panel-form textarea{
   width: 100%;
   border: 1px solid rgba(31,35,40,.18);
   border-radius: 12px;
   padding: 9px 10px;
   font: inherit;
   margin: 6px 0;
   background: #fff;
}
.panel-form button{
   width: 100%;
   border: 0;
   border-radius: 12px;
   padding: 10px 12px;
   background: var(--slate);
   color: #fff;
   font-weight: 700;
   cursor: pointer;
}
.panel-form button:hover{ background: var(--slate2); }

@media (max-width: 900px){
   :root{ --bar-h: 40px; }
   .bar-text{ display:none; }
   .panel-grid{ grid-template-columns: 1fr; }
}

/* ===== Header / Hero ===== */
header{ padding: 18px 0 8px; }
.topline{
   display:flex; align-items:center; justify-content: space-between;
   gap: 16px;
   padding: 18px 22px;
}
.brand{
   display:flex; flex-direction: column; gap: 2px;
}
.brand-name{
   font-family: "Merriweather", serif;
   font-size: 20px;
   font-weight:bold;
   color: #000080;
   letter-spacing: .2px;
}
.brand-tag{
   color: var(--muted);
   font-size: 13.5px;
}
.tiny-links{
   display:flex; gap: 12px; flex-wrap: wrap;
   color: var(--muted);
   font-size: 13px;
}
.tiny-links a{ text-decoration: none; border-bottom: 1px dashed rgba(90,97,105,.5); }
.tiny-links a:hover{ color: var(--ink); border-bottom-color: rgba(31,35,40,.6); }

.hero{
   display:grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 18px;
   padding: 36px 22px;
   align-items: stretch;
}
.hero-left{
   padding: 10px 6px;
}
.hero h1{
   max-width: 22ch;
   margin: 0 0 10px 0;
   font-family: "Merriweather", serif;
   font-size: 38px;
   line-height: 1.15;
   letter-spacing: .2px;
}
.hero p.lead{
   margin: 0 0 12px 0;
   font-size: 18px;
   color: var(--ink);
}
.hero p.support{
  margin: 0 0 18px 0;
  color: var(--muted);
  font-size: 15.5px;
  max-width: 60ch;
}
.hero p.subtle-link{
  margin: 0 0 18px 0;
  color: var(--mutedblue);
  font-size: 15.5px;
  max-width: 60ch;
}
.hero-actions{
   display:flex;
   gap: 12px;
   flex-wrap: wrap;
   align-items:center;
   margin-top: 8px;
}
.btn{
   display:inline-flex; align-items:center; justify-content:center;
   padding: 11px 14px;
   border-radius: 14px;
   border: 1px solid transparent;
   text-decoration: none;
   font-weight: 700;
   cursor: pointer;
   transition: transform .08s ease, background .12s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
   background: var(--slate);
   color: #fff;
}
.btn-primary:hover{ background: var(--slate2); }
.btn-ghost{
   background: transparent;
   border-color: rgba(47,62,70,.28);
   color: var(--slate);
}
.btn-ghost:hover{ background: rgba(47,62,70,.06); }

.hero-right{
   border-radius: var(--radius);
   border: 1px solid var(--line);
   overflow:hidden;
   background:
   radial-gradient(1200px 420px at 20% 20%, rgba(199,161,74,.18), transparent 55%),
   radial-gradient(900px 380px at 80% 30%, rgba(47,62,70,.12), transparent 55%),
   linear-gradient(180deg, rgba(247,245,242,.4), rgba(255,255,255,.95));
   position: relative;
   min-height: 270px;
}
.hero-right .img{
   position:absolute; inset: 0;
   background-size: cover;
   background-position: center;
   opacity: .92;
   filter: saturate(1.02) contrast(1.03);
}
.hero-right .overlay{
   position:absolute;
   inset: 0;
   background:
   linear-gradient(
      110deg,
      rgba(255,255,255,0.25) 0%,
      rgba(255,255,255,0.15) 18%,
      rgba(255,255,255,0.05) 35%,
      rgba(255,255,255,0.00) 55%
   ),
   linear-gradient(
      90deg,
      rgba(255,255,255,.85),
      rgba(255,255,255,.25)
   );
   pointer-events:none;
}
.hero-right .caption{
   position:absolute; left: 14px; right: 14px; bottom: 12px;
   font-size: 13px;
   color: rgba(31,35,40,.75);
   display:flex; gap: 10px; align-items:center; flex-wrap: wrap;
}
.pill{
   display:inline-flex; align-items:center; gap:8px;
   padding: 6px 10px;
   border-radius: 999px;
   border: 1px solid rgba(31,35,40,.10);
   background: rgba(255,255,255,.7);
   backdrop-filter: blur(6px);
}
.pill b{ color: var(--slate); }

@media (max-width: 980px){
   .hero{ grid-template-columns: 1fr; }
   .hero h1{ font-size: 34px; }
   .hero-right{ min-height: 220px; }
   .hero-right .overlay{ background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.22)); }
}

/* ===== Sections ===== */
section{ padding: 18px 0; }
.section-card{ padding: 22px; }
.kicker{
   color: var(--kicker);
   font-weight: 700;
   letter-spacing: .5px;
   text-transform: uppercase;
   font-size: 14px;
   margin-bottom: 8px;
}
h2{
   font-family: "Merriweather", serif;
   font-size: 26px;
   margin: 0 0 10px 0;
   line-height: 1.2;
}
.copy{ color: var(--muted); font-size: 16px; max-width: 75ch; }
.copy strong{ color: var(--ink); }

.bullets{
   margin: 14px 0 0 0;
   padding-left: 18px;
   color: var(--muted);
}
.bullets li{ margin: 6px 0; }

.services{
   display:grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin-top: 16px;
}
.service{
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 14px;
   background: #fff;
}
.service h3{
   margin: 0 0 6px 0;
   font-size: 16px;
   color: var(--ink);
}
.service p{
   margin: 0;
   color: var(--muted);
   font-size: 14.5px;
}
@media (max-width: 1100px){
   .services{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
   .services{ grid-template-columns: 1fr; }
}

.two-col{
   display:grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin-top: 14px;
}
.panel{
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 14px;
   background: #fff;
}
.panel h3{ margin: 0 0 6px 0; font-size: 16px; }
.panel p{ margin: 0; color: var(--muted); }
@media (max-width: 900px){
   .two-col{ grid-template-columns: 1fr; }
}

.quote{
   margin-top: 14px;
   padding: 14px;
   border-left: 4px solid rgba(199,161,74,.85);
   background: rgba(199,161,74,.08);
   border-radius: 14px;
   color: rgba(31,35,40,.85);
}

footer{
   padding: 26px 0 40px;
   color: var(--muted);
   font-size: 13.5px;
}
.footrow{
   display:flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items:center;
   border-top: 1px solid var(--line);
   padding-top: 14px;
}
.footrow a{ text-decoration: none; border-bottom: 1px dashed rgba(90,97,105,.55); }
.footrow a:hover{ color: var(--ink); border-bottom-color: rgba(31,35,40,.65); }

.rank-proof img {
   max-width: 600px;
   border: 1px solid rgba(0,0,0,.1);
   box-shadow: 0 12px 30px rgba(0,0,0,.15);
   border-radius: 8px;
}
#SEOoverlay {display:none;}