/* ============================================================
   Brisbane Bike Rental — brand design system
   ============================================================ */
:root{
  --navy:#0c1b2a;
  --navy2:#142b3f;
  --ink:#17212b;
  --muted:#5b6b70;
  --paper:#f6f8f7;
  --white:#fff;
  --green:#498121; /* nudged 3% darker than the original #508d24 -- white text
    on the original green (used as the primary button/CTA background) only
    hit 4.06:1 contrast, below the 4.5:1 WCAG AA minimum for text this size;
    this shade hits 4.73:1 and is visually near-identical */
  --green-deep:#3f6f1c;
  --green-light:#81c94c;
  --green-tint:#eef6e2;
  --orange:#ff6b35;
  --gold: #c37d09; /* darkened from the brand's original #f5a623 -- that
    lighter gold only hit ~2:1 contrast against white/green-tint
    backgrounds, below the 3:1 WCAG minimum for a meaningful icon */
  --line:#dde4de;
  --shadow: 0 20px 45px -25px rgba(12,27,42,.35);
  --shadow-sm: 0 8px 20px -12px rgba(12,27,42,.25);
  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1180px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Keyboard-only "Skip to content" link -- offscreen until it receives
   focus (Tab from the very top of the page), so keyboard/screen-reader
   users can jump straight past the logo and full nav on every page
   instead of tabbing through them each time. */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:1000;
  background:var(--navy);color:var(--white);
  padding:12px 18px;border-radius:8px;font-weight:700;font-size:.92rem;
  transition:top .15s ease;
}
.skip-link:focus{top:12px;outline:2px solid var(--green);outline-offset:2px}

/* A visible, high-contrast keyboard focus indicator on every interactive
   element (not just form fields) -- relying on each browser's own default
   outline is inconsistent, and it was being switched off entirely for
   form fields below with nothing equivalent put back. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--green);outline-offset:2px;
}
h1,h2,h3,h4{font-family:var(--serif);margin:0 0 .5em;line-height:1.12;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em}
ul{margin:0;padding:0}
.shell{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section-tight{padding:56px 0}
@media (max-width:760px){
  .section{padding:56px 0}
  .section-tight{padding:36px 0}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-deep);
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);display:inline-block;border-radius:2px}
/* On a dark section, --green-deep only hits 2.9:1 against navy (fails WCAG AA
   4.5:1 for small text) -- swap to the lighter tint, which measures 8.6:1. */
.page-hero .eyebrow,.band-dark .eyebrow{color:var(--green-light)}

.lede{font-size:1.15rem;color:var(--muted);max-width:640px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:.95rem;
  border:2px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green);color:var(--white);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--green-deep)}
.btn-dark{background:var(--navy);color:var(--white)}
.btn-dark:hover{background:var(--navy2)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.55);color:var(--white)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-outline-dark{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-outline-dark:hover{background:var(--navy);color:var(--white)}
.btn-block{width:100%}
.btn-sm{padding:10px 18px;font-size:.85rem}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:104px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:88px;width:auto}
.brand .logo-icon{display:none}
.desktop-nav{display:flex;align-items:center;gap:28px}
.desktop-nav a{font-size:.88rem;font-weight:600;color:var(--ink);padding:6px 2px;position:relative}
.desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.desktop-nav a:hover::after,.desktop-nav a.active::after{transform:scaleX(1)}
.desktop-nav a.active{color:var(--green-deep)}
.header-tools{display:flex;align-items:center;gap:14px}
.pill-link{
  display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;
  color:var(--navy);border:1.5px solid var(--line);padding:9px 16px;border-radius:999px;
}
.pill-link:hover{border-color:var(--green)}
.menu-button{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--navy)}
.menu-button svg{width:24px;height:24px;display:block}

.mobile-nav{
  position:fixed;inset:104px 0 0 0;background:var(--white);z-index:999;
  padding:20px 24px 40px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .18s ease, transform .18s ease;
}
.mobile-nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
.mobile-nav a{padding:16px 4px;font-size:1.05rem;font-weight:600;border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:18px}

@media (max-width:900px){
  .desktop-nav{display:none}
  .header-tools .pill-link{display:none}
  .menu-button{display:inline-flex}
  .header-inner{height:76px}
  .brand img{height:56px}
  .mobile-nav{inset:76px 0 0 0}
}

/* Mobile sticky booking bar — persistent CTA so booking is never more than
   a thumb-tap away while browsing on a phone. */
.mobile-cta-bar{display:none}
@media (max-width:760px){
  body{padding-bottom:78px}
  .mobile-cta-bar{
    display:flex;align-items:center;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:998;
    background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(10px);
    border-top:1px solid var(--line);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -12px rgba(12,27,42,.2);
  }
  .mobile-cta-bar .btn{flex:1}
  .mobile-cta-bar .call-fab{
    flex:none;width:48px;height:48px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--navy);color:var(--white);font-size:1.1rem;
  }
  /* rentals.html embeds the live Booqable booking widget, whose own
     floating launcher button is fixed bottom-right with a z-index far
     above ours -- it visually collides with this bar there (confirmed by
     measuring both elements' rects: same bottom-right footprint). This
     bar's job is to route visitors on OTHER pages to the booking page, so
     it's also redundant on the page that already has the widget front and
     center -- hide it there rather than fight the widget's own styling. */
  body.page-rentals .mobile-cta-bar{display:none}
  body.page-rentals{padding-bottom:0}
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(1100px 480px at 85% -10%, #1c3a24 0%, var(--navy) 55%), var(--navy);
  color:var(--white);
}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:76px 0 64px}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);padding:8px 16px;border-radius:999px;font-size:.78rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px;color:var(--green-light);
}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.6rem);color:var(--white);margin-bottom:20px}
.hero h1 em{color:var(--green-light);font-style:normal}
.hero p.lede{color:rgba(255,255,255,.78);font-size:1.15rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-stats{display:flex;gap:32px;margin-top:48px;flex-wrap:wrap}
.hero-stats div strong{display:block;font-family:var(--serif);font-size:1.8rem;color:var(--white)}
.hero-stats div span{font-size:.8rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center}
.hero-art img{width:min(360px,80%);filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.hero-art::before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(80,141,36,.35), transparent 70%);
  filter:blur(10px);
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding:48px 0 40px;text-align:left}
  .hero-art{order:-1;padding-top:12px}
  .hero-art img{width:180px}
  .hero-stats{gap:22px}
}

/* ---------------- Sections / cards ---------------- */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.section-head h2{font-size:clamp(1.6rem,2.6vw,2.3rem)}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px;transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.card .icon-tile{
  width:52px;height:52px;border-radius:14px;background:var(--green-tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--green-deep);
}
.card .icon-tile svg{width:26px;height:26px}
.card h3{font-size:1.1rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.94rem;margin:0}

.band{background:var(--paper)}

.booqable-embed{padding:32px;transition:none}
.booqable-embed:hover{box-shadow:none;transform:none}
.booqable-embed .booqable-datepicker{margin-bottom:24px}
.booqable-embed .booqable-product-list{min-height:120px}
.band-dark{background:var(--navy);color:var(--white)}
.band-dark .muted{color:rgba(255,255,255,.65)}
.band-green{background:linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);color:var(--white)}

.pill-tag{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--green-tint);color:var(--green-deep);padding:6px 12px;border-radius:999px;
}

/* ---------------- Pricing ---------------- */
.price-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;display:flex;flex-direction:column;gap:14px;position:relative;
}
.price-card.is-popular{border-color:var(--green);box-shadow:var(--shadow-sm)}
.price-card .badge-popular{
  /* color is navy, not white: white text on this orange only hits 2.84:1
     contrast (badly fails the 4.5:1 WCAG AA minimum this text size needs);
     navy on the same orange hits 6.14:1, and keeps the orange itself
     unchanged everywhere else it's used as a decorative (non-text) accent. */
  position:absolute;top:-13px;right:24px;background:var(--orange);color:var(--navy);font-size:.68rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;
}
.price-card h3{font-size:1.05rem;color:var(--muted);font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;margin-bottom:2px}
.price-card .amount{font-family:var(--serif);font-size:2.1rem;color:var(--navy)}
.price-card .amount span{font-size:.95rem;font-weight:600;color:var(--muted);font-family:var(--sans)}
.price-card ul{display:flex;flex-direction:column;gap:9px;margin:10px 0 6px;font-size:.9rem;color:var(--ink)}
.price-card li{display:flex;gap:8px;align-items:flex-start}
.price-card li svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--green)}
.price-note{font-size:.78rem;color:var(--muted)}
.price-note a{display:inline-block;padding:5px 2px;margin:-5px -2px;text-decoration:underline}

table.compare{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
table.compare th,table.compare td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line);font-size:.88rem}
table.compare th{background:var(--navy);color:var(--white);font-family:var(--serif);font-weight:600;font-size:.95rem}
table.compare td:first-child,table.compare th:first-child{text-align:left;font-weight:600}
table.compare tr:last-child td{border-bottom:none}
table.compare svg{width:20px;height:20px;color:var(--green);display:inline-block;vertical-align:middle}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------------- Steps / process ---------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:step}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-left:0}
.step .num{
  width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;margin-bottom:16px;
}
.step h3{font-size:1.05rem}
.step p{color:var(--muted);font-size:.92rem}

/* ---------------- FAQ ---------------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:22px 4px;font-family:var(--serif);font-size:1.05rem;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-q .plus{flex:none;width:22px;height:22px;position:relative}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--green);border-radius:2px;transition:transform .2s ease}
.faq-q .plus::before{width:100%;height:2px;top:50%;left:0;transform:translateY(-50%)}
.faq-q .plus::after{width:2px;height:100%;left:50%;top:0;transform:translateX(-50%)}
.faq-item.is-open .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-a p{color:var(--muted);padding:0 4px 22px;font-size:.95rem;max-width:760px}
.faq-item.is-open .faq-a{max-height:600px}

/* ---------------- CTA band ---------------- */
.cta-band{
  border-radius:var(--radius-lg);padding:48px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;background:var(--navy);color:var(--white);
}
.cta-band h2{margin-bottom:6px}
.cta-band p{color:rgba(255,255,255,.7);margin:0}

/* ---------------- Footer ---------------- */
.footer{background:var(--navy);color:rgba(255,255,255,.75);padding-top:72px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer h2{font-family:var(--sans);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--white);margin-bottom:16px}
.footer a{display:block;padding:6px 0;color:rgba(255,255,255,.68);font-size:.92rem}
.footer a:hover{color:var(--green-light)}
.footer-brand img{height:76px;margin-bottom:14px}
.footer-brand p{font-size:.88rem;color:rgba(255,255,255,.6);max-width:280px}
.footer-base{display:flex;justify-content:space-between;padding:22px 0;font-size:.8rem;color:rgba(255,255,255,.55);flex-wrap:wrap;gap:10px}
/* WCAG 2.2 (2.5.8) wants a 24x24px minimum tap target; a bare inline link
   sized to its .8rem text only reaches ~15-16px tall. Pad it out with
   negative margin so the larger hit area doesn't shove surrounding text. */
.footer-base a{display:inline-block;padding:5px 2px;margin:-5px -2px}
.social-row{display:flex;gap:10px;margin-top:16px}
.social-row a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;padding:0}
.social-row svg{width:16px;height:16px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ---------------- Page hero (inner pages) ---------------- */
.page-hero{background:var(--navy);color:var(--white);padding:64px 0 56px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle, rgba(80,141,36,.35), transparent 70%)}
.page-hero h1{color:var(--white);font-size:clamp(2rem,3.6vw,2.8rem);position:relative}
.page-hero .lede{color:rgba(255,255,255,.75);position:relative}
.breadcrumb{font-size:.8rem;color:rgba(255,255,255,.55);margin-bottom:16px;position:relative}
.breadcrumb a{color:rgba(255,255,255,.8);display:inline-block;padding:5px 2px;margin:-5px -2px}

/* ---------------- Misc components ---------------- */
.trust-strip{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:center;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-strip span{font-size:.82rem;font-weight:700;color:var(--muted);letter-spacing:.03em;display:flex;align-items:center;gap:8px}
.trust-strip svg{width:18px;height:18px;color:var(--green)}

/* ---------------- Google rating badge ---------------- */
.rating-badge{
  display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;
  color:var(--navy);letter-spacing:.03em;
  padding:5px 2px;margin:-5px -2px; /* WCAG 2.2 24px tap-target min; text line-box alone is ~20px */
}
.rating-badge:hover{color:var(--green-deep)}
.rating-badge .stars{display:inline-flex;gap:1px;color:var(--gold)}
.rating-badge .stars svg{width:14px;height:14px}
.rating-badge.on-dark{color:rgba(255,255,255,.85);font-weight:600;margin:2px 0 14px}
.rating-badge.on-dark:hover{color:var(--white)}
.tag-list .rating-badge{background:var(--green-tint);padding:8px 14px;border-radius:999px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
.split img,.split .art-box{border-radius:var(--radius-lg)}
.art-box{
  background:linear-gradient(160deg, var(--green-tint), var(--white));
  border:1px solid var(--line);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-lg);
}
.art-box img{width:55%}
.art-box.photo{padding:0;overflow:hidden;background:none}
.art-box.photo img{width:100%;height:100%;object-fit:cover;display:block}

.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.photo-grid figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--white)}
.photo-grid img{width:100%;height:230px;object-fit:cover;display:block}
.photo-grid figcaption{padding:10px 16px;font-size:.8rem;color:var(--muted);font-weight:600}
@media (max-width:860px){.photo-grid{grid-template-columns:1fr}}
.photo-grid.on-dark figure{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.photo-grid.on-dark figcaption{color:rgba(255,255,255,.7)}

.tag-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.tag-list span{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--green-deep);background:var(--green-tint);padding:8px 14px;border-radius:999px}
.tag-list svg{width:16px;height:16px;flex:none}
.hero-badge svg{width:16px;height:16px;flex:none}

.check-list{display:flex;flex-direction:column;gap:12px}
.check-list li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.check-list svg{flex:none;width:20px;height:20px;color:var(--green);margin-top:2px}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-card{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.contact-card .icon-tile{width:44px;height:44px;border-radius:12px}
.map-box{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);height:340px}
.map-box iframe{width:100%;height:100%;border:0}

form.inquiry{display:flex;flex-direction:column;gap:16px}
form.inquiry label{font-size:.82rem;font-weight:700;color:var(--navy);margin-bottom:6px;display:block}
form.inquiry input,form.inquiry textarea,form.inquiry select{
  width:100%;padding:13px 16px;border-radius:10px;border:1.5px solid var(--line);font-family:inherit;font-size:.95rem;background:var(--white);
}
/* border-color still changes on any focus (mouse or keyboard) as a subtle
   cue; the visible keyboard-only ring itself now comes from the global
   :focus-visible rule above rather than being suppressed here. */
form.inquiry input:focus,form.inquiry textarea:focus,form.inquiry select:focus{border-color:var(--green)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}

.badge-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.badge-strip img{height:64px}

.marquee-note{background:var(--orange);color:var(--navy);text-align:center;font-size:.85rem;font-weight:700;padding:10px 16px} /* navy, not white -- see badge-popular comment above */
.marquee-note a{text-decoration:underline}

::selection{background:var(--green-tint);color:var(--green-deep)}

/* Reveal-on-scroll: content is visible by default (no-JS / crawler safe);
   supporting browsers get a subtle fade+rise the moment the element is observed. */
@media (prefers-reduced-motion: no-preference){
  [data-reveal].reveal-armed{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease}
  [data-reveal].reveal-armed.is-visible{opacity:1;transform:none}
}

/* Visually hidden but still readable by screen readers -- used to pair an
   aria-hidden icon (e.g. a bare checkmark in a comparison-table cell) with
   real text so the icon's meaning isn't lost to assistive tech. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}