/* ============================================================
   EVENT REGISTRATION — BASE STYLES
   KPMG UK brand
   ------------------------------------------------------------
   Derived from kpmg.com/uk/en: Open Sans, white/light-grey page,
   KPMG Blue and cobalt blue, pill buttons with a chevron, teal
   accent rule on card titles, dark blue footer.

   Colour values come from KPMG's published palette. The one value
   that could not be verified from the published guidance is the
   vivid "cobalt" blue used for section bands, buttons and links —
   it is set in --kpmg-cobalt below and read from the homepage
   screenshot. Confirm it with the team that owns kpmg.com and
   change it in one place if it differs.
   ============================================================ */

:root{
    /* --- Brand palette (published) --- */
    --kpmg-blue:#00338D;        /* Pantone 287 C  — primary        */
    --kpmg-medium-blue:#005EB8; /* Pantone 7691 C                  */
    --kpmg-light-blue:#0091DA;  /* Pantone 7461 C                  */
    --kpmg-violet:#483698;
    --kpmg-purple:#470A68;
    --kpmg-light-purple:#6D2077;
    --kpmg-green:#00A3A1;       /* Pantone 2402 C                  */
    --kpmg-dark-blue:#0C233C;   /* alternative hero background     */
    --kpmg-light-blue-pale:#ACEAFF; /* card background, accent rules */
    --kpmg-red:#BC204B;         /* errors                          */

    /* --- VERIFY: vivid section/button blue read from the homepage --- */
    --kpmg-cobalt:#1E49E0;
    --kpmg-cobalt-hover:#1A3FC4;

    /* --- Surfaces --- */
    --bg:#ffffff;
    --grey-100:#F2F4F7;         /* light section band              */
    --card:#ffffff;
    --card-hover:#F7F9FC;
    --footer-bg:#0C233C;        /* footer sits darker than the hero */
    --hero-bg:#00338D;          /* overridden by the template variable */
    /* Event cards are white with an outline. --card-bg is still wired to the
       "Event Card Background" variable in the guided editor, so setting it to
       #ACEAFF and changing .event-card's background below returns the light
       blue treatment without touching anything else. */
    --card-bg:#ffffff;

    /* --- Ink --- */
    --text:#1A1A1A;
    --muted:#4A4A4A;
    --on-dark:#ffffff;
    --on-dark-muted:rgba(255,255,255,.82);

    --border:#D6DCE5;
    --border-strong:#B9C3D2;

    --header-h:72px;
    --radius-card:4px;
    --radius-pill:999px;

    --font:"Open Sans",Arial,Helvetica,sans-serif;
    /* Headings on kpmg.com are noticeably condensed. Open Sans Condensed
       is loaded alongside the regular family; it falls back cleanly. */
    --font-head:"Open Sans Condensed","Open Sans",Arial,Helvetica,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:var(--font);
    font-size:16px;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.12;letter-spacing:0}
a{color:var(--kpmg-cobalt)}

/* The dark theme's decorative backdrop has no place on a white page.
   Kept as a no-op so the template markup doesn't need editing. */
.atmosphere{display:none}

.page{position:relative}
.container{width:min(1280px,92%);margin:auto}

#top,#programme,#sessions,#registration,#footer{
    scroll-margin-top:calc(var(--header-h) + 16px);
}

/* Accessibility: visible only on keyboard focus (kpmg.com pattern). */
.skipnav{
    position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--kpmg-blue);color:#fff;
    padding:12px 18px;font-weight:700;text-decoration:none;
}
.skipnav:focus{left:0}


/* ---------- Header ---------- */

header{
    position:sticky;
    top:0;
    z-index:40;
    min-height:var(--header-h);
    background:#fff;
    border-bottom:1px solid var(--border);
}
.header-inner{
    min-height:var(--header-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:12px 0;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img,.brand .mktoImg img{display:block;height:34px;width:auto}
.brand-name{display:none} /* the logo image carries the wordmark */

nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
nav a{
    color:var(--text);
    text-decoration:none;
    font-size:.95rem;
    font-weight:600;
    padding:8px 14px;
    border-radius:2px;
    transition:color .2s,box-shadow .2s;
}
nav a:hover{color:var(--kpmg-cobalt);box-shadow:inset 0 -2px 0 var(--kpmg-cobalt)}
nav a:focus-visible{outline:2px solid var(--kpmg-cobalt);outline-offset:2px}


/* ---------- Buttons ---------- */

.btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:2px solid var(--kpmg-cobalt);
    background:var(--kpmg-cobalt);
    color:#fff;
    padding:12px 26px;
    border-radius:var(--radius-pill);
    cursor:pointer;
    font-family:var(--font);
    font-size:1rem;
    font-weight:600;
    line-height:1.3;
    text-decoration:none;
    transition:background .2s,border-color .2s,color .2s;
}
/* KPMG buttons carry a trailing chevron. */
.btn:after{content:"›";font-size:1.25em;line-height:0;transform:translateY(-1px)}
.btn:hover{background:var(--kpmg-cobalt-hover);border-color:var(--kpmg-cobalt-hover)}
.btn:focus-visible{outline:2px solid var(--kpmg-blue);outline-offset:3px}
.btn-ghost{
    background:transparent;
    color:var(--kpmg-cobalt);
    border-color:var(--kpmg-cobalt);
}
.btn-ghost:hover{background:rgba(30,73,224,.08);color:var(--kpmg-cobalt-hover)}

/* On the blue hero band the buttons reverse out: solid white primary,
   outlined white secondary — the kpmg.com dark-theme treatment. */
.hero .btn{
    background:#fff;
    border-color:#fff;
    color:var(--hero-bg);
}
.hero .btn:hover{background:var(--kpmg-light-blue-pale);border-color:var(--kpmg-light-blue-pale);color:var(--hero-bg)}
.hero .btn-ghost{background:transparent;border-color:#fff;color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.hero .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}


/* ---------- Hero ---------- */

/* Full-bleed colour band, as on the KPMG service pages. The clip-path keeps
   the bleed from adding horizontal scroll. */
.hero{
    position:relative;
    padding:56px 0 60px;
    margin-bottom:48px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:48px;
    align-items:center;
    background:var(--hero-bg);
    color:#fff;
    box-shadow:0 0 0 100vmax var(--hero-bg);
    clip-path:inset(0 -100vmax);
}
.eyebrow{
    display:inline-flex;
    gap:10px;
    align-items:center;
    color:var(--kpmg-light-blue-pale);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.1em;
    margin-bottom:14px;
}
.pulse{display:none} /* animated dot belonged to the old theme */

.hero h1{
    font-size:clamp(2.1rem,4.4vw,3.4rem);
    margin-bottom:18px;
    color:#fff;
}
.hero h1 em{font-style:normal;color:var(--kpmg-light-blue-pale)}
.hero p{
    color:rgba(255,255,255,.92);
    font-size:1.08rem;
    max-width:56ch;
    line-height:1.65;
}
.cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

/* The strip that appeared under the hero image was this container's own
   background showing through: Marketo renders the image inside an
   inline-block .mktoImg wrapper, and an inline element sits on the text
   baseline, leaving a few pixels of descender space beneath it. Forcing the
   wrapper and image to block and zeroing the line-height removes the gap;
   dropping the background means nothing can show through even if a future
   image has a different aspect ratio. */
.hero-media{
    position:relative;
    border-radius:var(--radius-card);
    overflow:hidden;
    line-height:0;
    font-size:0;
}
.hero-media .mktoImg{display:block!important;width:100%;line-height:0}
.hero-media img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:cover;
}


/* ---------- Stats band ---------- */

.stats-band{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,240px));
    justify-content:start;
    width:max-content;
    max-width:100%;
    margin:0 0 56px;
    border:1px solid var(--border);
    border-radius:var(--radius-card);
    overflow:hidden;
    background:var(--grey-100);
}
.stat-cell{padding:22px 28px 20px;position:relative}
.stat-cell + .stat-cell{border-left:1px solid var(--border)}
.stat-cell span{
    display:block;
    color:var(--muted);
    letter-spacing:.1em;
    text-transform:uppercase;
    font-size:.72rem;
    font-weight:700;
    margin-bottom:6px;
}
.stat-cell b{
    display:block;
    font-family:var(--font-head);
    font-size:clamp(2.2rem,4vw,3rem);
    line-height:1.05;
    color:var(--kpmg-blue);
}
/* Teal accent rule, as used beside card titles on kpmg.com. */
.stat-cell i{
    position:absolute;
    left:28px;bottom:14px;
    width:36px;height:3px;
    background:var(--kpmg-green);
}


/* ---------- Section furniture ---------- */

.section{padding:8px 0 24px}
.section-title{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:8px;color:var(--kpmg-blue)}
.section-lead{color:var(--muted);margin-bottom:20px;max-width:70ch}

.toolbar{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.toolbar input,.toolbar select{
    background:#fff;
    border:1px solid var(--border-strong);
    color:var(--text);
    font-family:var(--font);
    font-size:1rem;
    padding:12px 14px;
    border-radius:2px;
    min-height:48px;
}
.toolbar input:focus,.toolbar select:focus{
    outline:none;
    border-color:var(--kpmg-cobalt);
    box-shadow:0 0 0 3px rgba(30,73,224,.18);
}
.toolbar input{flex:1;min-width:220px}
.toolbar select{min-width:190px}

.results-count{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin:0 0 16px;color:var(--muted);font-size:.9rem;
}
.clear-filters{
    border:1px solid var(--kpmg-cobalt);background:#fff;
    color:var(--kpmg-cobalt);padding:6px 14px;border-radius:var(--radius-pill);
    font-family:var(--font);font-size:.82rem;font-weight:700;cursor:pointer;
}
.clear-filters:hover{background:rgba(30,73,224,.08)}

/* Reconciliation panel, ?eventregDebug=1 */
.eventreg-debug{
    border:1px solid var(--border);border-left:4px solid var(--kpmg-light-blue);
    background:var(--grey-100);
    border-radius:var(--radius-card);
    padding:16px 18px;margin-bottom:16px;font-size:.88rem;line-height:1.6;
}
.eventreg-debug h4{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.eventreg-debug p{margin:6px 0}
.eventreg-debug ul{margin:4px 0 8px 20px}
.eventreg-debug .good{color:#0a7d3f}
.eventreg-debug .warn{color:#8a5b00}
.eventreg-debug .bad{color:var(--kpmg-red)}


/* ---------- Event cards ---------- */

.events-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
}
@media(max-width:1300px){.events-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1100px){.events-grid{grid-template-columns:repeat(4,1fr)}}

.event-card{
    background:var(--card);
    border:1px solid var(--border-strong);
    border-radius:var(--radius-card);
    padding:16px 14px 12px;
    cursor:pointer;
    transition:border-color .2s,box-shadow .2s,background .2s;
    display:flex;
    flex-direction:column;
    min-height:186px;
    position:relative;
}
.event-card:hover{
    border-color:var(--kpmg-blue);
    background:var(--card-hover);
    box-shadow:0 6px 18px rgba(0,51,141,.12);
}
.event-card:focus-visible{outline:2px solid var(--kpmg-cobalt);outline-offset:2px}
.event-card.selected{
    background:var(--kpmg-blue);
    border-color:var(--kpmg-blue);
}
.event-card.selected .event-title{color:#fff;border-left-color:var(--kpmg-light-blue-pale)}
.event-card.selected .event-meta{color:#fff}
.event-card.selected .event-venue{color:rgba(255,255,255,.85)}
.event-card.selected .map-link{color:var(--kpmg-light-blue-pale)}
.event-card.selected .venue-tbc{color:var(--kpmg-light-blue-pale)}

/* Past events stay visible for reference but cannot be chosen. */
.event-card.past{
    background:var(--grey-100);
    border-color:var(--border);
    cursor:default;
    opacity:.85;
}
.event-card.past:hover{border-color:var(--border);box-shadow:none}
.event-card.past .event-title{color:var(--muted);border-left-color:var(--border-strong)}
.event-card.past .event-meta,
.event-card.past .event-venue{color:var(--muted)}
.event-card.past .select-pill{
    background:transparent;
    border-color:var(--border-strong);
    color:var(--muted);
    cursor:default;
}
/* The card-level hover rule would otherwise light this pill up and imply it
   can be clicked. */
.event-card.past:hover .select-pill{
    background:transparent;
    color:var(--muted);
    border-color:var(--border-strong);
}

/* Teal rule to the left of the title — the kpmg.com card treatment. */
.event-title{
    font-family:var(--font-head);
    font-size:1.02rem;
    font-weight:700;
    line-height:1.25;
    color:var(--kpmg-blue);
    padding-left:12px;
    border-left:3px solid var(--kpmg-blue);
    margin-bottom:10px;
}
.event-meta{color:var(--text);font-size:.86rem;line-height:1.5}
.event-venue{
    margin-top:8px;
    color:var(--muted);
    font-size:.75rem;
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.event-actions{
    margin-top:auto;
    padding-top:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
}
.map-link{
    border:0;background:transparent;color:var(--kpmg-blue);
    font-family:var(--font);font-size:.82rem;font-weight:700;cursor:pointer;
    white-space:nowrap;padding:0;text-align:left;
}
.map-link:after{content:" ›"}
.map-link:hover{text-decoration:underline}
.venue-tbc{color:var(--muted);font-size:.8rem;font-weight:600}
/* Follows the card state, like .map-link does, so a selected card with no
   venue doesn't keep grey text on the blue fill. */
.event-card.selected .venue-tbc{color:var(--kpmg-light-blue-pale)}

.select-pill{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:92px;padding:8px 16px;
    border:1px solid var(--kpmg-cobalt);
    border-radius:var(--radius-pill);
    background:#fff;color:var(--kpmg-cobalt);
    font-size:.82rem;font-weight:700;white-space:nowrap;
    transition:background .2s,color .2s;
}
.event-card:hover .select-pill{background:var(--kpmg-blue);color:#fff}
.selected .select-pill{background:#fff;color:var(--kpmg-blue);border-color:#fff}


/* ---------- Single event page ---------- */

.event-detail{display:flex;flex-direction:column;gap:4px}
.event-detail-title{
    font-family:var(--font-head);
    font-size:1.3rem;
    font-weight:700;
    color:var(--kpmg-blue);
    padding-left:12px;
    border-left:3px solid var(--kpmg-blue);
    margin-bottom:6px;
}
.event-detail-when{color:var(--text);font-size:1rem;font-weight:600}
.event-detail-where{color:var(--muted);font-size:.92rem}
.event-detail-venue{color:var(--muted);font-size:.88rem;line-height:1.55;margin-top:4px}
.event-detail-note{color:var(--muted);font-size:.88rem;line-height:1.6}
.event-detail-map{margin-top:14px;align-self:flex-start;text-decoration:none}

/* Shown in place of the form once the date has passed. */
.form-closed{
    padding:22px;
    border:1px solid var(--border);
    border-left:4px solid var(--kpmg-red);
    background:var(--grey-100);
    line-height:1.7;
}
.form-closed strong{display:block;margin-bottom:6px;color:var(--kpmg-blue);font-size:1.05rem}
.form-closed p{color:var(--muted);margin:0}


/* ---------- Text-only hero ----------
   Used by the cancellation page. The copy spans the band on its own, with
   no image column beside it. */
.hero.hero-text-only{grid-template-columns:1fr}
.hero.hero-text-only .hero-media{display:none}
.hero.hero-text-only p{max-width:64ch}


/* ---------- Thank you page ---------- */

.confirmation{padding:8px 0 72px;max-width:78ch}
.confirmation-title{
    font-size:clamp(1.6rem,3vw,2.3rem);
    color:var(--kpmg-blue);
    margin-bottom:28px;
}
.confirmation-subtitle{
    font-family:var(--font);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:16px;
}
.confirmed-list{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:10px}
.confirmed-event{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:16px 18px;
    background:var(--grey-100);
    border-left:4px solid var(--kpmg-blue);
    border-radius:0 var(--radius-card) var(--radius-card) 0;
}
.confirmed-title{
    font-family:var(--font-head);
    font-size:1.15rem;
    font-weight:700;
    color:var(--kpmg-blue);
}
.confirmed-when{color:var(--text);font-size:.95rem}
.confirmed-where,
.confirmed-venue{color:var(--muted);font-size:.85rem;line-height:1.5}
.confirmation-note{color:var(--muted);line-height:1.7;max-width:64ch}
.confirmation-actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:640px){
    .confirmation{padding-bottom:48px}
    .confirmed-event{padding:14px 16px}
}


/* ---------- Modal ---------- */

.modal{
    position:fixed;inset:0;z-index:60;display:none;place-items:center;
    padding:16px;background:rgba(0,20,60,.55);
}
.modal.open{display:grid}
.modal-card{
    width:min(720px,100%);
    background:#fff;
    border-radius:var(--radius-card);
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,20,60,.3);
}
.modal-head{
    display:flex;justify-content:space-between;gap:16px;
    padding:18px 20px;border-bottom:1px solid var(--border);
}
.modal-head h3{font-size:1.1rem;color:var(--kpmg-blue)}
.modal-head p{color:var(--muted);font-size:.9rem;margin-top:4px}
.modal-address{display:block;margin-top:6px;color:var(--muted);font-size:.85rem;line-height:1.5}
.modal-close{
    border:1px solid var(--border);background:#fff;color:var(--text);
    width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.2rem;line-height:1;
}
.modal-close:hover{background:var(--grey-100)}
.modal iframe,.virtual-note{
    width:100%;height:min(52vh,380px);border:0;background:var(--grey-100);
}
.virtual-note{display:grid;place-items:center;color:var(--muted);padding:24px;text-align:center}
.venue-note{align-content:center;gap:10px}
.venue-note strong{color:var(--text);font-size:1.05rem}
.venue-note span{max-width:34ch}
.map-actions{padding:14px 20px 18px;display:flex;justify-content:flex-start}


/* ---------- Footer ----------
   Matches the kpmg.com footer: white logo top-left, three link columns,
   centred social circles, centred legal-link row, small copyright.
   ------------------------------------------------------------ */

footer{
    background:var(--footer-bg);
    color:var(--on-dark);
    padding:56px 0 40px;
    margin-top:0;
    font-size:.875rem;
}
footer a{color:var(--on-dark);text-decoration:none}
footer a:hover{text-decoration:underline}

.footer-logo{margin-bottom:40px}
/* Logo height is the only value to change here — width:auto keeps the mark in
   proportion. If it still looks small, the SVG itself may carry internal
   padding, in which case trim its viewBox rather than raising this further. */
.footer-logo img,
.footer-logo .mktoImg img{display:block;height:44px;width:auto}

.footer-categories{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:32px;
    padding-bottom:40px;
}
.footer-col h6{
    font-family:var(--font);
    font-size:.875rem;
    font-weight:700;
    margin-bottom:18px;
    color:#fff;
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 12px}
.footer-col a{color:var(--on-dark-muted);font-size:.875rem;line-height:1.5}
.footer-col a:hover{color:#fff}

.footer-social{
    list-style:none;margin:0 0 32px;padding:0;
    display:flex;justify-content:center;gap:14px;
}
.footer-social a{
    width:40px;height:40px;border-radius:50%;
    border:1px solid rgba(255,255,255,.55);
    display:grid;place-items:center;color:#fff;
    transition:background .2s,border-color .2s;
}
.footer-social a:hover{background:rgba(255,255,255,.14);border-color:#fff;text-decoration:none}
.footer-social svg{width:16px;height:16px;display:block}

.footer-legal-links{
    list-style:none;margin:0 0 28px;padding:0;
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:10px 28px;
}
.footer-legal-links a,
.footer-legal-links button{
    color:var(--on-dark-muted);
    font-family:var(--font);
    font-size:.8125rem;
    font-weight:600;
    background:none;border:0;padding:0;cursor:pointer;
}
.footer-legal-links a:hover,
.footer-legal-links button:hover{color:#fff;text-decoration:underline}
/* OneTrust reveals its own settings button only once consent is given; with the
   banner switched off it stays hidden. */
#ot-sdk-btn{display:none}

.footer-copyright{
    border-top:1px solid rgba(255,255,255,.22);
    padding-top:22px;
    color:var(--on-dark-muted);
    font-size:.75rem;
    line-height:1.6;
    max-width:none;
}
.footer-copyright p{margin:0 0 8px}
.footer-copyright a{color:var(--on-dark-muted);text-decoration:underline}
.footer-copyright a:hover{color:#fff}


/* ---------- Motion ---------- */

.reveal{opacity:0;transform:translateY(12px);animation:rise .6s ease forwards}
@keyframes rise{to{opacity:1;transform:none}}


/* ---------- Responsive ---------- */

@media(max-width:900px){
    .header-inner{flex-direction:column;align-items:flex-start;gap:10px}
    :root{--header-h:118px}
    .hero{grid-template-columns:1fr}
    .footer-categories{grid-template-columns:1fr;gap:24px;padding-bottom:28px}
    .hero{padding-top:28px}
    .events-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
    /* Two events per row — 37 in one column is a very long scroll. */
    .events-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .event-card{min-height:0;padding:12px 12px 10px}
    .event-title{font-size:.92rem;padding-left:10px}
    .event-meta{font-size:.8rem}
    .event-venue{font-size:.7rem;-webkit-line-clamp:2}
    .event-actions{padding-top:10px;gap:6px}
    .select-pill{min-width:0;width:100%;padding:8px 10px}
    .map-link{font-size:.78rem}

    .stats-band{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
    .stat-cell{padding:16px 14px 18px}
    .stat-cell span{font-size:.66rem}
    .stat-cell b{font-size:clamp(1.8rem,9vw,2.4rem)}
    .stat-cell i{left:14px;bottom:10px;width:28px}
}
/* No single-column breakpoint: two per row holds down to 320px, because 37
   events in one column is an unreasonable scroll. */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    /* .reveal starts hidden and is faded in by the animation. With animations
       suppressed it would stay invisible forever, so show it outright. */
    .reveal{opacity:1;transform:none}
}