/* Powered by Reason — Sandra theme.
 *
 * Ported from the static PBR site. Values are lifted from the original
 * stylesheet rather than re-derived, so the rendering matches.
 *
 * NO PALETTE is declared in theme.json: this is a theme for one client, so the
 * Background control is deliberately absent from every block and the colours
 * below are the design, not a default. The variables here are ordinary CSS
 * custom properties — the engine never reads them.
 *
 * NO JAVASCRIPT: a theme may ship only css/fonts/images. The original mobile
 * menu was jQuery-driven, so the nav stacks below 1024px instead of collapsing
 * behind a hamburger.
 */

:root {
  --pbr-orange:  #ef6b49;
  --pbr-magenta: #b72c63;
  --pbr-blue:    #008dd4;
  --pbr-blue-dk: #0a6a9e;
  --ink:         #333333;
  --body:        #666666;
  --muted:       #999999;
  --rule:        #d9d9d9;
  --wash:        #f5f5f5;
  --dark:        #333333;
  --darker:      #262626;
  --wrap:        940px;
  --font: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@font-face {
  font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/source-sans-pro-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('fonts/source-sans-pro-700.woff2') format('woff2');
}

/* ---- reset ---- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address,
cite, code, del, dfn, em, img, ins, q, small, strong, sub, sup, var, b, i, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{ margin:0; padding:0; border:0; outline:0; font-size:100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block; }
:focus { outline:0; }
.clearfix:after { content:""; display:block; clear:both; visibility:hidden; font-size:0; height:0; }
.clear { clear:both; display:block; font-size:0; height:0; line-height:0; width:100%; }

/* ---- base ---- */
html { height:100%; font-size:100%; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font); font-size:15px; line-height:20px;
  color: var(--body); background:#ffffff; text-align:left;
}
::selection { background: var(--pbr-orange); color:#fff; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight:400; color: var(--ink); }
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b,
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight:700; }
h2 { font-size:28px; line-height:34px; }
h3 { font-size:20px; line-height:26px; }
h4 { font-size:18px; line-height:23px; }
h6 { font-size:13px; line-height:19px; }
p { font-size:15px; margin-top:20px; }
strong, b, dt { font-weight:bold; }
a { text-decoration:none; color: var(--pbr-orange); cursor:pointer; }
a:hover { color: var(--ink); }
img { max-width:100%; height:auto; display:inline-block; vertical-align:top; border:0; }
ul { margin-top:20px; margin-left:30px; list-style:disc; }
ol { margin-top:20px; margin-left:30px; list-style:decimal; }
ul li, ol li { line-height:20px; margin-top:5px; }
pre { border:1px dashed grey; padding:10px; overflow:auto; margin:20px 0; }
.colored { color: var(--pbr-orange); }
.subtitle { color: var(--muted); margin-top:5px; }

.wrapper { width: var(--wrap); margin:0 auto; }
.left-float { float:left; }
.right-float { float:right; }
.seperator { width:100%; height:1px; background: var(--rule); margin-top:20px; }
.title { border-bottom:1px solid var(--rule); text-transform:uppercase; margin:0 0 30px; }
.title span { border-bottom:1px solid var(--pbr-orange); display:inline-block; padding-bottom:10px; margin-bottom:-1px; }

/* ---- buttons ---- */
a.y-button {
  display:inline-block; font-family: var(--font-ui); font-weight:700;
  text-align:center; border-radius:3px; margin-bottom:5px;
}
a.medium-button { font-size:14px; padding:10px 20px; }
a.default-button1 { color:#ffffff; background: var(--pbr-orange); }
a.default-button1:hover { background: var(--ink); }
a.link-moreinfo {
  font-family: var(--font); font-weight:700; font-size:14px; display:inline-block;
  line-height:20px; padding-right:20px;
  background: transparent url('img/arrowright-grey.png') right center no-repeat;
}
a.link-moreinfo:hover { color: var(--ink); }

/* ---- menu (slot) ---- */
#top { min-height:40px; width:100%; background: var(--wash); }
#top .top-info { font-family: var(--font); color: var(--muted); font-size:14px; line-height:40px; }
#top .top-info span.phone-highlight { font-weight:700; color: var(--pbr-orange); }
#top .top-social { line-height:40px; }
#top .top-social a { display:inline-block; vertical-align:middle; color: var(--muted); }
#top .top-social a:hover { color: var(--pbr-orange); }
header { background:#ffffff; }
#logo { padding:40px 0; }
#logo img { display:block; height:56px; width:auto; }
.menu { position:relative; }
nav#main-nav { z-index:50; display:block; }
nav#main-nav ul { position:relative; margin:0; padding:0; list-style:none; }
nav#main-nav ul li { position:relative; float:left; margin:0 0 0 20px; padding:0; }
nav#main-nav ul li a {
  display:block; font-family: var(--font); font-weight:400; font-size:17px;
  line-height:40px; color: var(--ink); padding:40px 0;
}
nav#main-nav ul li a:hover, nav#main-nav ul li a[aria-current] { color: var(--pbr-orange); }

/* The collapse button. Hidden by default and shown only once the script has
   added `js-nav` — a button with no behaviour behind it is worse than a nav
   that simply stacks. The icon is the original site's sprite, same position. */
.menu-toggle {
  display: none; width: 40px; height: 40px; margin: 40px 0; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
.menu-toggle span {
  display: block; width: 40px; height: 40px;
  background: transparent url('img/sprites.png') -480px -60px no-repeat;
}
.menu-toggle:focus-visible { outline: 2px solid var(--pbr-orange); outline-offset: 2px; }

/* Second-level nav. Values are the originals from the static site; :focus-within
   is added so the dropdown is reachable by keyboard, which the jQuery version
   never was. */
nav#main-nav ul li.has-children { position: relative; }
nav#main-nav ul li .sub-menu {
  position: absolute; top: 80px; left: 0; z-index: 47; display: none;
  width: 210px; margin: 0; padding: 0; list-style: none;
  background: #ffffff; border-top: 3px solid var(--pbr-orange);
  box-shadow: rgba(0,0,0,0.2) 0 0 2px;
}
nav#main-nav ul li.has-children:hover > .sub-menu,
nav#main-nav ul li.has-children:focus-within > .sub-menu { display: block; }
nav#main-nav ul .sub-menu li { float: none; margin: 0; padding: 4px 20px; border-top: 1px solid var(--rule); }
nav#main-nav ul .sub-menu li:first-child { border-top: none; }
nav#main-nav ul .sub-menu li a { padding: 0; color: var(--muted); font-size: 14px; line-height: 26px; }
nav#main-nav ul .sub-menu li a:hover,
nav#main-nav ul .sub-menu li a[aria-current] { color: var(--pbr-orange); }

/* ---- page title (magenta band) ---- */
#page-title { width:100%; padding:30px 0; background: var(--pbr-magenta); }
#page-title .title-name { width:65%; }
#page-title h3 { color:#fff; font-size:1.8em; }
#page-title h6 { color:#fff; font-size:1.3em; margin-top:10px; font-weight:600; }

/* ---- hero ---- */
.hero { background: var(--pbr-blue); padding:82px 0 22px 0; }
.hero h1 {
  color:#ffffff; font-size:56px; line-height:60px; font-weight:700; margin:0;
  max-width:780px; letter-spacing:-0.015em; text-wrap:balance;
}
.hero .hero-lead {
  color:#ffffff; font-size:20px; line-height:30px; margin:24px 0 0 0;
  max-width:660px; text-wrap:pretty;
}
.hero .hero-lead p { margin:0; font-size:inherit; line-height:inherit; }
.hero .hero-lead p + p { margin-top:12px; }
.hero .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:32px; }
.hero a.hero-cta {
  display:inline-block; font-family: var(--font-ui); font-size:14px; font-weight:700;
  color: var(--pbr-blue-dk); background:#ffffff; border-radius:3px; padding:14px 26px;
}
.hero a.hero-cta:hover { background: var(--ink); color:#ffffff; }
.hero a.hero-link {
  display:inline-flex; align-items:center; gap:7px; color:#ffffff;
  font-size:15px; font-weight:600;
}
.hero a.hero-link:hover { color:#ffffff; text-decoration:underline; }
.hero a.hero-link svg { display:block; }
.hero .hero-meta {
  margin:56px 0 0 0; padding:18px 0 0 0; color:#ffffff; opacity:0.85;
  font-size:14px; font-weight:600; line-height:20px;
  border-top:1px solid rgba(255,255,255,0.32);
}

/* ---- body layout ---- */
#main { display:block; }
.main-inner { margin-top:30px; }
.main-inner p { line-height:1.6em; margin-bottom:10px; }
.main-inner .intro-row { margin-bottom:40px; }
.column { float:left; padding-bottom:60px; margin-right:20px; }
.one-full { width:100%; float:none; margin-right:0; }
.two-third { width:620px; }
.one-fourth { width:220px; }

/* ---- service cards (feature_list) ---- */
.pbr-cards { display: flex; flex-wrap: wrap; gap: 0; }
.iconbox { flex: 1 1 0; min-width: 0; background: var(--wash); margin: 0; }
.box-inner { padding:20px; }
.iconbox .icon {
  width: 45px; height: 45px; margin: 0 auto;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.icon-wordpress { background-image: url('img/icon-wordpress.png'); }
.icon-knowledge { background-image: url('img/icon-knowledge.png'); }
.icon-technical { background-image: url('img/icon-technical.png'); }
.icon-design    { background-image: url('img/icon-design.png'); }
.iconbox h1, .iconbox h2, .iconbox h3, .iconbox h4, .iconbox h5, .iconbox h6 { text-align:center; margin-top:20px; }
.iconbox p { font-family: var(--font-ui); font-weight:400; color: var(--muted); }
.box-color h1, .box-color h2, .box-color h3, .box-color h4, .box-color h5, .box-color h6 { color:#ffffff; }
.box-color p { color:#ffffff; }
.box-color .seperator { background:#ffffff; opacity:0.15; }
.iconbox a.link-moreinfo { float:right; margin-top:20px; }
.box-color a.link-moreinfo { color:#ffffff; background: transparent url('img/arrowright-white.png') right center no-repeat; }
.box-color a.link-moreinfo:hover { color:#ffffff; text-decoration:underline; }
.box-scale { -webkit-transition:all .1s ease-in-out; transition:all .1s ease-in-out; }
.box-scale:hover { -webkit-transform:scale(1.1); transform:scale(1.1); }

/* ---- highlight / cta ---- */
.highlight-field { box-sizing: border-box; background: var(--wash); margin-bottom:60px; padding:30px 20px; }
.highlight-grey-bordered { border:10px solid var(--rule); }
.column .highlight-field { margin-bottom:0; margin-top:20px; }
.column .highlight-field:first-child { margin-top:0; }
.highlight-button { margin-top:20px; }

/* ---- entry list ---- */
.blog_post_excerpt {
  padding:30px; margin-bottom:20px; background-color: var(--wash);
  box-shadow:1px 1px 5px rgba(0,0,0,0.2);
}
.blog_post_excerpt h3 a { color: var(--pbr-orange); }
.blog_post_excerpt h3 a:hover { color: var(--ink); }
.post-meta { font-weight:600; margin-top:10px; }

/* ---- one entry, as its own page ---- */
.pbr-entry .entry-body { padding-bottom:20px; }
.pbr-entry .entry-image { margin:20px 0 0; }

/* ---- footer (slot) ---- */
footer { background: var(--dark); padding-top:60px; color: var(--muted); margin-top:40px; }
/* The CTA is floated, so it escapes .column and the column's own padding
   lands above it. Put the space on the container instead. */
footer .footer-inner { padding-bottom:60px; }
footer .column { padding-bottom:0; }
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { color:#ffffff; }
footer .title { border-bottom:1px solid #4d4d4d; padding-bottom:10px; }
footer a { color:#ffffff; }
.copyright { background: var(--darker); padding:10px 0; font-size:12px; color:#666; }

/* ---- the body row ---------------------------------------------------------
   Every block is its own row, which is exactly why a sidebar cannot be its own
   block: two blocks are two rows, and a float in one cannot sit beside the
   other. So a body row owns BOTH columns — the same two floats the static site
   used, cleared at the end.

   The aside keeps its third even when empty, so article pages line up. Full
   width is the default; this is opt-in per block. */
.pbr-row__body  { float: left;  width: 620px; }
.pbr-row__aside { float: right; width: 300px; }
.pbr-row__aside > .highlight-field { margin-bottom: 0; }

/* Self-populating post list in an entry sidebar. */
.pbr-aside-posts { margin-top: 30px; }
.pbr-row__aside > .highlight-field + .pbr-aside-posts { margin-top: 30px; }
.pbr-aside-posts .title { margin-bottom: 16px; font-size: 13px; }
.pbr-aside-posts ul { margin: 0; padding: 0; list-style: none; }
.pbr-aside-posts li { margin: 0 0 14px; padding: 0; line-height: 20px; }
.pbr-aside-posts li a { font-weight: 600; font-size: 14px; }
.pbr-aside-posts li time { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* ---- accordion -------------------------------------------------------------
   Was jQuery (.toggle-inner{display:none} slid open); now <details>/<summary>,
   which needs no script. Values below are the originals — 60px title, the
   sprite icon, the 80px text indent. */
.accordion { margin-top: 20px; }
.pbr-row__body > .accordion:first-child { margin-top: 0; }
details.toggle { margin-top: 10px; }
details.toggle:first-child { margin-top: 0; }
.toggle > .toggle-title {
  display: block; position: relative; min-height: 60px; width: 100%;
  background: var(--wash); cursor: pointer; list-style: none;
}
.toggle > .toggle-title::-webkit-details-marker { display: none; }
.toggle > .toggle-title::marker { content: ""; }
.toggle .toggle-title .toggle-icon {
  position: absolute; top: 0; left: 0; height: 100%; width: 60px;
  border-right: 1px solid var(--rule);
}
.toggle .toggle-title .toggle-icon span {
  display: block; height: 60px; width: 60px;
  background: url('img/sprites.png') -120px 0 no-repeat;
}
.toggle .toggle-title .toggle-name {
  display: block; font-family: var(--font-ui); font-weight: 700;
  font-size: 14px; line-height: 20px; color: var(--muted);
  padding: 20px 20px 20px 80px;
}
.toggle > .toggle-title:hover .toggle-name { color: var(--pbr-orange); }
.toggle[open] > .toggle-title .toggle-name { color: var(--pbr-orange); }
.toggle[open] > .toggle-title .toggle-icon {
  background-color: var(--pbr-orange); border-right-color: var(--pbr-orange);
}
.toggle[open] > .toggle-title .toggle-icon span { background-position: -180px 0; }
.toggle .toggle-inner { padding: 10px 20px 10px 80px; }
.toggle .toggle-inner p:first-child { margin-top: 10px; }
.toggle > .toggle-title:focus-visible { outline: 2px solid var(--pbr-orange); outline-offset: -2px; }

/* ---- 1024 and below ---- */
@media only screen and (max-width:1024px) {
  :root { --wrap:640px; }
  .wrapper { width:640px; }
  .two-third { width:640px; }
  .one-fourth { width:580px; }
  .iconbox { margin-right:0; }
    .highlight-field { margin-top:20px; }
  .highlight-button { float:none; width:100%; margin-top:20px; }

  /* One row: brand left, collapse button right, and the nav wrapping to a
     full-width line beneath them. Floats cannot express that, so the header
     becomes a flex row at this width only — desktop keeps its floats. */
  .header-inner { display: flex; flex-wrap: wrap; align-items: center; }
  .header-inner .left-float { float: none; width: auto; margin-right: auto; order: 1; }
  .header-inner .menu { float: none; width: 100%; order: 3; }
  .menu-brand { margin: 16px 0; }

  /* Collapse only where a script is present to open it again. Without `js-nav`
     none of this applies and the nav stacks, exactly as it did before the
     theme was allowed a script. */
  .js-nav .menu-toggle { display: block; order: 2; margin: 0; }
  .js-nav #main-nav { display: none; }
  .js-nav .menu.is-open #main-nav { display: block; }
  nav#main-nav ul li { float:none; margin:0; border-top:1px solid var(--rule); }
  nav#main-nav ul li a { padding:10px 0; line-height:26px; }

  /* No pointer, so no dropdown: show the second level indented instead. */
  nav#main-nav ul li .sub-menu {
    position: static; display: block; width: auto;
    border-top: 0; box-shadow: none; padding: 0 0 0 20px;
  }
  nav#main-nav ul .sub-menu li { padding: 0; }
  nav#main-nav ul .sub-menu li a { padding: 6px 0; }

  /* No room beside anything: the two columns stack. */
  .pbr-row__body, .pbr-row__aside { float: none; width: 100%; }
  .pbr-row__aside > .highlight-field { margin-top: 20px; }
  .pbr-row__aside:empty { display: none; }
  .pbr-cards { display: block; }
  .iconbox { width: 100%; margin-bottom: 20px; }

  .hero { padding-top:60px; }
  .hero h1 { font-size:40px; line-height:46px; }
  .hero .hero-lead { font-size:18px; line-height:27px; }
  .hero .hero-meta { margin-top:44px; }
}

/* ---- 680 and below ---- */
@media only screen and (max-width:680px) {
  :root { --wrap:300px; }
  .wrapper { width:300px; }
  #top .top-info, #top .top-social { width:100%; text-align:center; float:none; }
  #page-title .title-name { width:100%; }
  .column { margin-right:0; float:none; }
  .one-full, .two-third { width:100%; }
  .one-fourth { width:240px; }
  footer .left-float, footer .right-float { float:none; text-align:center; }

  .toggle .toggle-title .toggle-name { padding: 18px 12px 18px 60px; }
  .toggle .toggle-title .toggle-icon { width: 40px; }
  .toggle .toggle-title .toggle-icon span { width: 40px; background-position: -80px -60px; }
  .toggle[open] > .toggle-title .toggle-icon span { background-position: -120px -60px; }
  .toggle .toggle-inner { padding: 10px 0 10px 60px; }

  .hero { padding-top:40px; }
  .hero h1 { font-size:28px; line-height:34px; letter-spacing:0; }
  .hero .hero-lead { font-size:16px; line-height:24px; margin-top:18px; }
  .hero .hero-actions { gap:14px; margin-top:24px; }
  .hero a.hero-cta { width:100%; box-sizing:border-box; text-align:center; }
  .hero .hero-meta { margin-top:32px; }
  .main-inner .intro-row { margin-bottom:24px; }
}

/* Logo ships with the theme, so it is referenced from here — assets are
   addressed relatively from the stylesheet, and templates never hand-write
   asset paths. The label stays in the markup for screen readers. */
.menu-brand {
  display:block; width:186px; height:56px; margin:40px 0;
  background: transparent url('img/pbr_logo.png') left center no-repeat;
  background-size: contain;
  text-indent:-9999px; overflow:hidden; white-space:nowrap;
}
@media only screen and (max-width:680px)  { .menu-brand { width:160px; height:48px; } }

/* Service-card colours. The `colour` select is a closed set of four keys, so
   each maps to a class here rather than an inline style. */
.iconbox.card-magenta { background:#b72c63; }
.iconbox.card-pink    { background:#f23a72; }
.iconbox.card-orange  { background:#f67028; }
.iconbox.card-amber   { background:#ffb32f; }

/* CTA block sits alongside body content on wide screens. */
.highlight-content p:first-child { margin-top:0; }