/*
Theme Name: Rounded Boxes Lite
Description: Minimal rebuild of the old Contao "Rounded Boxes" theme family (eeouk.com / kindersponsorplan.nl), built fresh for WordPress. Not a pixel copy, same rounded-card layout and colour feel.
Version: 1.0
Author: Holo
*/

:root{
  --accent: #346599;
  --accent-dark: #244a73;
  --accent2: #5a8fae;
  --card-bg: #ffffff;
  --text: #444;
  --bg: #f2f2f2;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
}
/* Body links use --accent-dark, not --accent: on kindersponsorplan.nl's own
   real newsletter-sampled palette, --accent (the coral/red UI colour) only
   clears 4.11:1 against the card background tint -- under the 4.5:1 AA
   minimum for normal text. --accent-dark clears it everywhere on all 3
   sites' current colours with a wide margin, and is already the site's own
   second brand colour (already used for every heading), not a new one. */
a{color:var(--accent-dark);text-decoration:none;}
a:hover{color:var(--accent);text-decoration:underline;}
/* Inline links inside real body copy need a non-colour way to tell them
   apart from the surrounding text (WCAG 1.4.1) -- an underline, not just a
   colour change that can fail contrast against the paragraph text around
   it. Nav items, tiles/cards, buttons and the CTA band already have their
   own distinct shape/background, so this is scoped to actual prose. */
.box a{text-decoration:underline;}
/* Typography scale: one clear step per level, with enough line-height on
   headings themselves (not just body text) that a two-line h1 doesn't look
   cramped -- the old flat 26/20/16 scale read closer to "slightly bigger
   text" than a real hierarchy a visitor could skim. */
h1,h2,h3,h4{font-family:"Trebuchet MS",Helvetica,Arial,sans-serif;color:var(--accent-dark);font-weight:bold;line-height:1.25;}
h1{font-size:34px;margin:0 0 .5em 0;}
h2{font-size:24px;margin-top:1.3em;margin-bottom:.5em;}
h3{font-size:18px;margin-top:1.1em;margin-bottom:.4em;}
h4{font-size:16px;margin-top:1em;margin-bottom:.4em;}
p{margin:0 0 1.1em 0;}
blockquote{
  margin:1.2em 0;
  padding:4px 0 4px 20px;
  border-left:4px solid var(--accent2);
  font-style:italic;
  color:var(--text);
}
blockquote p:last-child{margin-bottom:0;}
img{max-width:100%;height:auto;}
/* Plain inline content photos were the one place left with hard square
   corners -- every other image treatment in this theme (hero, tiles,
   cards, the logo's own white mount) is already rounded, and the theme's
   own name is literally "Rounded Boxes". A small, consistent radius on
   ordinary in-page photos finishes that, rather than leaving them as the
   one visually inconsistent exception. */
.box img{border-radius:8px;}

/* Real pages embed a YouTube video (WordPress's own oEmbed auto-embed, not
   hand-written markup) with a fixed 500px width baked into the generated
   <iframe> -- fine on desktop, a genuine horizontal-overflow bug on any
   narrower viewport (found by checking a page's real mobile screenshot
   width, not assumed: the rendered page was 532px wide on a 375px mobile
   viewport). Scoped to the actual video-embed domains, not every iframe
   sitewide -- childrensrelief.nl's real Google Maps embeds already set
   their own width:100%/height:400 deliberately and shouldn't be forced
   into a 16:9 box that doesn't suit a map. */
.box iframe[src*="youtube.com"],
.box iframe[src*="youtube-nocookie.com"],
.box iframe[src*="vimeo.com"]{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9;
  max-width:100%;
}

#site-header{
  background:var(--accent);
  color:#fff;
  padding:14px 0;
}
#site-header .inside{
  width:1060px;max-width:100%;margin:0 auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  position:relative;
}
#site-header a.site-title{
  color:#fff;font-size:24px;font-weight:bold;text-decoration:none;
}
/* flex-shrink:0 -- the logo keeps its own natural width always; only the
   nav (min-width:0 below) gives up room when the row is tight. */
#site-header .branding{display:block;max-width:100%;flex:0 0 auto;}
/* The real logos are now proper transparent-background PNG cutouts --
   background removed and re-cropped tight to the mark itself -- so they
   sit directly on the header colour like an ordinary logo, no card. */
#site-header .custom-logo-link{
  display:inline-block;
  line-height:0;
}
#site-header .custom-logo-link img{
  display:block;
  max-height:48px;
  max-width:100%;
  width:auto;
  height:auto;
}

/* Default, always-safe nav: always visible (no toggle, nothing to open),
   stacked under the logo, wrapping onto as many rows as it needs at the
   current width. Works with no JS at all. The "nav-inline" layout below is
   a progressive-enhancement upgrade, applied only once the header script
   has measured that the full real menu fits in a single row beside the
   logo -- until then, or if it never fits (e.g. childrensrelief.nl's 9
   items + Doneer), every item stays visible here, just wrapped. */
nav#main-nav{display:block;align-self:stretch;}
nav#main-nav ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px;
  justify-content:center;
}
nav#main-nav li{margin:0;}
nav#main-nav a{
  display:block;white-space:nowrap;padding:6px 10px;font-size:13px;color:#fff;border-radius:6px;
}
nav#main-nav a:hover{background:rgba(255,255,255,0.15);text-decoration:none;}
/* Direct-child combinator only -- this item's own <a> gets the CTA pill
   look, but when it also has real dropdown children (e.g. kindersponsorplan.nl's
   "Doneren") a plain descendant selector here would reach into its .sub-menu
   and turn ordinary dropdown items into oversized purple pills too,
   inconsistent with every other site's dropdown (found 2026-11-03). */
nav#main-nav li.nav-cta-item>a{
  display:inline-block;
  background:var(--accent2);color:#fff;font-weight:bold;
  border-radius:20px;padding:6px 16px;
}
nav#main-nav li.nav-cta-item>a:hover{background:var(--accent2);opacity:0.85;}

/* Inline row: applied by the header script only once it has measured that
   the logo + full menu actually fit on one line without wrapping. Same
   look eeouk.com/kindersponsorplan.nl already had. Logo stays left; the nav
   group sits on the right (justify-content:flex-end), standard logo-left
   nav-right header layout. */
#site-header.nav-inline .inside{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;}
#site-header.nav-inline .branding{max-width:70%;}
#site-header.nav-inline nav#main-nav{flex:1 1 auto;min-width:0;align-self:center;}
#site-header.nav-inline nav#main-nav ul{
  flex-wrap:nowrap;justify-content:flex-end;gap:2px;
}
#site-header.nav-inline nav#main-nav a{padding:7px 8px;font-size:13px;white-space:nowrap;}
#site-header.nav-inline nav#main-nav li.nav-cta-item>a{padding:7px 14px;}

/* Off-screen clone used only to measure the inline-row width the real nav
   would need, without flexbox shrinking hiding how much space is really required.
   Must track the .nav-inline sizing above -- it measures against the same
   padding/font-size the nav would actually render at once inline. */
nav.nav-measure{
  position:fixed !important;left:-99999px !important;top:0 !important;
  display:block !important;visibility:hidden !important;
}
nav.nav-measure>ul{display:inline-flex !important;flex-wrap:nowrap !important;gap:2px !important;margin:0 !important;}
nav.nav-measure a{white-space:nowrap !important;padding:7px 8px !important;font-size:13px !important;}
nav.nav-measure li.nav-cta-item>a{padding:7px 14px !important;}
/* The measurement clone must only measure the top-level row -- without this,
   "ul" above would also match nested .sub-menu dropdowns and force them
   visible/inline, wildly inflating the measured width and making the fit
   check always fail. */
nav.nav-measure .sub-menu{display:none !important;}

/* Dropdown submenus: pure CSS, hover (mouse) / focus-within (keyboard).
   Nested under a top-level item by rbl_nav_inject_section_dropdowns() in
   functions.php, mirroring the real page's own children -- same ones
   page.php's "In this section" shows in-content, just also offered one
   click away in the header. No toggle button: an earlier version added one
   for touch devices, but it sat inline next to the link, and on a menu
   with many dropdown items its width wasn't counted by the header script's
   row-fit measurement, letting the row overflow and bleed left over the
   logo (childrensrelief.nl, 2026-11-03). Touch users reach the same
   children via the parent page's own in-content listing instead. */
nav#main-nav li.menu-item-has-children{position:relative;}
nav#main-nav .sub-menu{
  display:none;
  flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:0;
  position:absolute;top:100%;left:0;
  min-width:200px;max-width:90vw;
  background:var(--accent-dark);
  border-radius:6px;
  padding:6px;
  /* No margin-top: :hover on the parent <li> only holds while the pointer
     is over the <li> box or a DOM descendant of it -- a margin here (even
     a few px) is empty space belonging to neither, so crossing it drops
     :hover and the submenu closes before the pointer ever reaches it.
     Flush (top:100%, no margin) keeps the hoverable area contiguous from
     the link straight into the submenu, every time (job 2026-11-03). */
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
  z-index:50;
}
nav#main-nav .sub-menu li{width:100%;}
nav#main-nav .sub-menu a{display:block;white-space:normal;padding:8px 12px;font-size:13px;border-radius:4px;}
/* The CTA item is always forced last (rbl_nav_cta_last() in functions.php).
   On childrensrelief.nl/eeouk.com its "Doneer"/"Donate" link has no real
   dropdown children, so this never matches there -- but on
   kindersponsorplan.nl "Doneren" is a real page with children, making it
   both the literal last <li> and the only one with a .sub-menu in that
   position. left:0 (above) grows the submenu rightward, which is fine for
   every other dropdown but pushes this one off the viewport's right edge --
   confirmed at mobile/tablet/desktop alike, not just the 1440px case job
   170b01 first flagged. Flip just this one dropdown to grow from its own
   right edge instead; every other dropdown, on every site, is unaffected. */
nav#main-nav li.menu-item-has-children:last-child .sub-menu{left:auto;right:0;}
nav#main-nav li.menu-item-has-children:hover>.sub-menu,
nav#main-nav li.menu-item-has-children:focus-within>.sub-menu{
  display:flex;
}

#container{width:1060px;margin:24px auto;display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;}
#main{flex:1;min-width:280px;}

/* #606060 is the lightest grey that still clears 4.5:1 against every
   card-bg tint any of the 3 sites' Customizer colour settings currently
   use (white, pale blue, pale purple, pale yellow) -- #888 only managed
   3.14:1 on the paler tints and failed WCAG AA. */
.breadcrumbs{font-size:13px;color:#606060;margin-bottom:16px;}
.breadcrumbs a{color:#606060;text-decoration:underline;}
.breadcrumbs a:hover{color:var(--accent-dark);}
.breadcrumbs span{color:var(--text);}

nav.sub-pages{margin-top:28px;padding-top:18px;border-top:1px solid #e0e0e0;}
nav.sub-pages h3{margin:0 0 14px 0;font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:#606060;}
.sub-pages-grid{display:flex;flex-wrap:wrap;gap:16px;}
a.sub-page-card{
  flex:1 1 220px;
  max-width:280px;
  display:flex;
  flex-direction:column;
  background:var(--card-bg);
  border:1px solid #c6c6c6;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  color:inherit;
}
/* Exactly 6 sub-page cards: explicit 3 columns so the row count can't drift with
   the grid's available width (e.g. a page with a floated hero photo narrows it) -
   a flex-basis guess would need two different numbers for those two cases. */
.sub-pages-grid.sub-pages-grid-even3{display:grid;grid-template-columns:repeat(3,1fr);}
.sub-pages-grid-even3 a.sub-page-card{max-width:none;}
a.sub-page-card:hover{box-shadow:0 3px 8px rgba(0,0,0,0.12);text-decoration:none;}
.sub-page-card-image{
  display:block;
  height:110px;
  background-color:var(--accent);
  background-size:cover;
  background-position:center;
}
.sub-page-card-image-plain{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  display:flex;
  align-items:center;
  justify-content:center;
}
.sub-page-card-body{display:block;padding:12px 16px;text-align:left;}
.sub-page-card-title{display:block;color:var(--accent-dark);font-size:15px;font-weight:bold;}
.sub-page-card-excerpt{display:block;margin-top:6px;font-size:13px;color:var(--text);}
a.sub-page-card:hover .sub-page-card-title{color:var(--accent);}

.box{
  background:var(--card-bg);
  border:1px solid #c6c6c6;
  border-radius:12px;
  padding:28px 32px;
  margin-bottom:28px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.box h1:first-child,.box h2:first-child{margin-top:0;}

.page-hero-image{
  display:block;
  width:100%;
  max-height:420px;
  object-fit:cover;
  border-radius:10px;
  margin:0 0 24px 0;
}

.news-list{display:flex;flex-direction:column;gap:14px;margin:0 0 20px 0;}
.news-item{
  background:var(--card-bg);
  border:1px solid #e0e0e0;
  border-radius:10px;
  padding:16px 20px;
}
.news-item-title{margin:0 0 8px 0;}
.news-item-title a{color:var(--accent-dark);}
.news-item-title a:hover{text-decoration:none;color:var(--accent);}
.news-item-excerpt{margin:0;font-size:14px;line-height:1.5;}
.news-item-more{white-space:nowrap;font-weight:bold;}

.social-follow{margin:0 0 20px 0;}
.social-follow a{display:inline-flex;align-items:center;gap:8px;color:var(--accent-dark);font-weight:bold;}
.social-follow a:hover{text-decoration:none;color:var(--accent);}
.social-follow-icon{width:32px;height:32px;border-radius:6px;}

.box-hero{padding-top:0;padding-left:0;padding-right:0;}
.box-hero img:first-of-type{
  display:block;
  width:100%;
  margin:0 0 24px 0;
  max-width:none;
  height:380px;
  object-fit:cover;
  border-radius:12px 12px 0 0;
}
.box-hero>h1,.box-hero>h2,.box-hero>h3,.box-hero>h4,.box-hero>h5,.box-hero>h6,.box-hero>p,.box-hero>div{padding-left:32px;padding-right:32px;}
.box-hero>h1{margin-top:0;}
.box-hero>*:last-child{padding-bottom:28px;}

.tiles{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:28px;}
a.tile{
  flex:1 1 220px;
  max-width:300px;
  display:flex;
  flex-direction:column;
  background:var(--card-bg);
  border:1px solid #c6c6c6;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  color:inherit;
  transition:box-shadow .15s ease,transform .15s ease;
}
a.tile:hover{box-shadow:0 6px 16px rgba(0,0,0,0.14);transform:translateY(-2px);text-decoration:none;}
.tile-image{
  display:block;
  height:150px;
  background-color:var(--accent);
  background-size:cover;
  background-position:center;
  transition:transform .25s ease;
}
a.tile:hover .tile-image{transform:scale(1.04);}
.tile-image-plain{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  display:flex;
  align-items:center;
  justify-content:center;
}
.tile-image-plain-initial{
  font-family:"Trebuchet MS",Helvetica,Arial,sans-serif;
  font-size:44px;
  font-weight:bold;
  color:rgba(255,255,255,0.55);
  line-height:1;
}
.tile-body{display:block;padding:16px 18px;text-align:left;}
/* Real <h2>/<h4> elements now (screen-reader heading navigation can reach
   homepage sections and "in this section" cards, not just sighted/mouse
   users scanning a tile grid) -- reset the generic h1-h4 margin/line-height
   so they still sit flush in the card layout exactly as the plain <span>
   they replaced did. */
.tile-title,.sub-page-card-title{margin:0;line-height:1.3;}
.tile-title{display:block;color:var(--accent-dark);font-size:17px;font-weight:bold;}
.tile-excerpt{display:block;margin-top:6px;font-size:13px;color:var(--text);}
a.tile:hover .tile-title{color:var(--accent);}

/* Form styling: these sites' real forms (Contact Form 7 on all 3,
   kindersponsorplan.nl's bank-detail-collecting Machtigingsformulier)
   previously used the browser's bare default input/button chrome --
   inconsistent with the rest of the restyled page and, for the submit
   button specifically, easy to mistake for a disabled control. Field
   labels themselves are unrelated existing markup (already real <label>
   elements), only the visual chrome changes here. */
.box form p{margin-bottom:16px;}
.box form label{display:block;font-weight:bold;margin-bottom:5px;color:var(--accent-dark);}
.box form input[type=text],
.box form input[type=email],
.box form input[type=tel],
.box form input[type=url],
.box form input[type=number],
.box form input[type=date],
.box form textarea,
.box form select{
  width:100%;
  max-width:420px;
  padding:10px 12px;
  border:1px solid #c6c6c6;
  border-radius:6px;
  font-size:15px;
  font-family:inherit;
  background:#fff;
}
.box form input:focus,.box form textarea:focus,.box form select:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.box form input[type=submit],
.box form input.wpcf7-submit{
  display:inline-block;
  background:var(--accent2);
  color:#fff;
  font-weight:bold;
  font-size:15px;
  border:0;
  border-radius:24px;
  padding:12px 28px;
  cursor:pointer;
}
.box form input[type=submit]:hover,.box form input.wpcf7-submit:hover{opacity:.88;}
.wpcf7-not-valid-tip{color:#b00020;font-size:13px;margin-top:4px;display:block;}
.wpcf7-response-output{border-radius:8px;padding:10px 14px;margin-top:16px;}

#site-footer{
  background:#fff;
  border-top:1px solid #ccc;
  padding:18px 0;
  margin-top:24px;
  font-size:13px;
  color:#606060;
}
#site-footer .inside{width:1060px;margin:0 auto;text-align:center;}
#site-footer .footer-org-details{margin-bottom:8px;line-height:1.6;}
#site-footer .footer-utility-links{margin-bottom:10px;font-size:14px;font-weight:bold;}
#site-footer .footer-utility-links a{color:var(--accent-dark);text-decoration:none;}
#site-footer .footer-utility-links a:hover{text-decoration:underline;}
#site-footer .footer-menu-list{list-style:none;margin:0 0 10px 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;}
#site-footer .footer-menu-list a{color:var(--accent-dark);text-decoration:none;}
#site-footer .footer-menu-list a:hover{text-decoration:underline;}
#site-footer a{color:#606060;text-decoration:underline;}
#site-footer a:hover{color:var(--accent-dark);}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:#000;
  color:#fff;
  padding:10px 16px;
  z-index:1000;
}
.skip-link:focus{left:8px;top:8px;}

/* Quick-access row: one-click to the handful of things a new visitor is
   most likely hunting for (donate, projects, ANBI/registration, contact) --
   driven entirely by the real primary-nav items it finds (see
   rbl_quick_links() in functions.php), never invented links. Sits right
   under the hero, above the fold, because that's the single biggest
   navigability gap a tile grid further down the page doesn't solve: a
   visitor who scrolls no further than the hero should still be able to
   reach these. */
.quick-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px 0;}
.quick-links a{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--card-bg);
  border:1px solid #c6c6c6;
  border-radius:24px;
  padding:9px 18px;
  font-size:14px;font-weight:bold;
  color:var(--accent-dark);
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.quick-links a:hover{text-decoration:none;box-shadow:0 3px 8px rgba(0,0,0,0.12);color:var(--accent);}
.quick-links a.quick-link-donate{background:var(--accent2);border-color:var(--accent2);color:#fff;}
.quick-links a.quick-link-donate:hover{color:#fff;opacity:.88;}
.quick-link-icon{font-size:15px;line-height:1;}

/* Trust strip: the organisation's own real registration line (ANBI/RSIN/KVK
   or UK charity number -- whatever is already set in the Customizer's
   footer field), surfaced once near the top of the homepage too, not only
   buried in the footer. Same real text, just shown where a cautious new
   donor actually looks for it first. */
.trust-strip{
  display:block;
  font-size:13px;
  color:var(--text);
  background:var(--card-bg);
  border:1px solid #c6c6c6;
  border-radius:8px;
  padding:10px 16px;
  margin:0 0 20px 0;
  line-height:1.5;
}
.trust-strip p{margin:0;}
.trust-strip a{text-decoration:underline;}

/* CTA band: a repeated, visually distinct donate prompt (same pattern these
   sites' real-world peers all use -- a persistent header button alone isn't
   enough, the ask needs to resurface inline too). Always links to the
   site's own real donate/doneer page; never rendered on that page itself. */
.cta-band{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;
  border-radius:12px;
  padding:24px 28px;
  margin:28px 0;
}
.cta-band-text{font-size:18px;font-weight:bold;margin:0;}
.cta-band a.cta-band-button{
  display:inline-block;
  flex-shrink:0;
  background:var(--accent2);
  color:#fff;
  font-weight:bold;
  font-size:15px;
  padding:12px 26px;
  border-radius:24px;
}
.cta-band a.cta-band-button:hover{text-decoration:none;opacity:.88;}

/* childrensrelief.nl's real Doneren page links straight out to real,
   working Rabobank "betaalverzoek" one-click payment requests (confirmed
   real, already live content -- not invented here). They were rendering as
   plain bold inline text; styled as real buttons instead, since that's
   genuinely the single most important click on the page the rest of this
   restyle was meant to make obvious. Scoped to the real payment domain only
   -- doesn't touch any other link anywhere, and does nothing on eeouk.com/
   kindersponsorplan.nl, which have no such link at all. */
.box a[href*="betaalverzoek.rabobank.nl"]{
  display:inline-block;
  background:var(--accent2);
  color:#fff !important;
  font-weight:bold;
  text-decoration:none !important;
  border-radius:24px;
  padding:12px 24px;
  margin:4px 0 10px 0;
}
.box a[href*="betaalverzoek.rabobank.nl"]:hover{opacity:.88;}
.box a[href*="betaalverzoek.rabobank.nl"] strong,
.box a[href*="betaalverzoek.rabobank.nl"] span{color:#fff !important;}

@media (max-width:1100px){
  #site-header .inside,#container,#site-footer .inside{width:94%;}
}

/* Real pre-existing content on several migrated pages (e.g. kindersponsorplan.nl's
   "Wie zijn wij") floats 3-4 old inline-styled <img> tags left in a row before a
   paragraph of real text. At desktop width there's room for the floats plus a
   normal-width paragraph beside them; at tablet width (and especially after this
   restyle's own wider .box padding) the floats' combined width can land within a
   few px of the *entire* available content width, squeezing the real paragraph
   text into an unreadable sliver next to the last image -- a genuine regression
   this job's own whitespace increase (above) made worse on at least one real page,
   found by actually looking at a tablet screenshot, not assumed. Fix: below 900px,
   stack these old floated images instead of letting them float -- a deliberate,
   content-proportional layout rather than a knife-edge that happens to work only
   at some widths. Scoped to real inline float styles only (`style*="float"`),
   nothing else on the page is touched. */
@media (max-width:900px){
  .box img[style*="float"]{
    float:none !important;
    display:block;
    margin:0 0 12px 0 !important;
    width:auto;
    max-width:100%;
  }
}

@media (max-width:600px){
  body{font-size:15px;}
  h1{font-size:27px;}
  h2{font-size:21px;}
  h3{font-size:17px;}
  .box{padding:20px;}
  .box-hero>h1,.box-hero>h2,.box-hero>h3,.box-hero>h4,.box-hero>h5,.box-hero>h6,.box-hero>p,.box-hero>div{padding-left:20px;padding-right:20px;}
  .box-hero img:first-of-type{height:220px;}
  .cta-band{padding:20px;}
  .cta-band-text{font-size:16px;}
}