/* =====================================================================
   DESIGN ON TAP — Circles Design Contest 2026
   ---------------------------------------------------------------------
   SCOPING RULE: every selector in this file is scoped under `.dot-page`,
   a wrapper div that exists ONLY on page-design-contest.php.
   Nothing here can leak to the rest of the site. Do not add a bare
   element or utility selector to this file.

   Palette
     WAA Gold      #AC881B  (sampled from the supplied logo art)
     WAA Gold Lit  #E2B63F  (brightened for legibility on black)
     (the Circles lime accent was removed - this page is all gold on black)
     Ink           #0B0B0B
   Fonts (all already loaded site-wide — nothing new requested)
     runaways      display
     silka-mono    spec labels / eyebrows
     proxima-nova  body
   ===================================================================== */

/* ---------------------------------------------------------------------
   The one selector in this file not scoped under `.dot-page`.

   The theme's sticky mobile REGISTER bar is printed by footer.php, so it
   lives outside this page's wrapper and cannot be reached with `.dot-page`.
   It is position:fixed at the bottom of the viewport with z-index 999, and
   on load it sits directly on top of this page's "Read the Brief" button.
   Scoped to this template's body class, so it is hidden here and nowhere
   else. Same approach page-churches.php already uses.
   ------------------------------------------------------------------ */
body.page-template-page-design-contest-php .btn-mobile-register { display: none !important; }

.dot-page {
    --dot-gold: #AC881B;
    --dot-gold-lit: #E2B63F;
    --dot-gold-deep: #7A5F10;
    --dot-lime: #86D31F; /* retired - page is all-gold; kept for easy restore */
    --dot-ink: #0B0B0B;
    --dot-ink-2: #141414;
    --dot-line: rgba(226, 182, 63, 0.24);
    --dot-body: rgba(255, 255, 255, 0.72);

    background: var(--dot-ink);
    color: #fff;
    overflow-x: hidden;
}

/* ---------------------------------------------------------------------
   Typography primitives
   ------------------------------------------------------------------ */

.dot-page .dot-display {
    font-family: 'runaways', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    line-height: 0.98em;
    letter-spacing: -0.01em;
    margin: 0;
}

.dot-page .dot-eyebrow {
    font-family: 'silka-mono', 'Courier New', monospace;
    font-size: 1.3em;
    font-weight: 600;
    line-height: 1.7em;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--dot-gold-lit);
    margin: 0 0 24px;
    display: block;
}

.dot-page .dot-eyebrow.ink { color: rgba(0, 0, 0, 0.55); }

.dot-page p {
    font-size: 1.8em;
    line-height: 1.75em;
    color: var(--dot-body);
}

.dot-page .dot-lead {
    font-size: 2.2em !important;
    line-height: 1.65em;
    color: rgba(255, 255, 255, 0.86);
}

.dot-page .gold { color: var(--dot-gold-lit); }
.dot-page .lime { color: var(--dot-gold-lit); } /* legacy hook - renders gold */

.dot-page .dot-rule {
    width: 64px;
    height: 3px;
    background: var(--dot-gold);
    border: 0;
    margin: 26px 0 32px;
}

.dot-page .dot-rule.center { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------ */

.dot-page .dot-section {
    width: 88%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 130px 0;
    position: relative;
}

.dot-page .dot-section.narrow { max-width: 900px; }
.dot-page .dot-section.tight { padding: 90px 0; }
.dot-page .dot-band { position: relative; }
.dot-page .dot-band.ink2 { background: var(--dot-ink-2); }

.dot-page .dot-band.hairline { border-top: 1px solid var(--dot-line); }

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

.dot-page .dot-btn {
    display: inline-block;
    font-family: 'silka-mono', 'Courier New', monospace;
    font-size: 1.4em;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 20px 40px;
    box-sizing: border-box;
    background: var(--dot-gold);
    color: #000 !important;
    border: 2px solid var(--dot-gold);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    margin: 8px 10px 0 0;
}

.dot-page .dot-btn:hover {
    background: var(--dot-gold-lit);
    border-color: var(--dot-gold-lit);
    color: #000 !important;
}

.dot-page .dot-btn.ghost {
    background: transparent;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.4);
}

.dot-page .dot-btn.ghost:hover {
    border-color: var(--dot-gold-lit);
    color: var(--dot-gold-lit) !important;
    background: transparent;
}

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

.dot-page .dot-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.dot-page .dot-hero:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.82) 42%, rgba(0, 0, 0, 0.35) 100%);
}

.dot-page .dot-hero-inner {
    position: relative;
    z-index: 2;
    width: 88%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 180px 0 110px;
}

.dot-page .dot-hero-copy { max-width: 920px; }

.dot-page .dot-hero h1 {
    font-size: 11em;
    color: #fff;
}

.dot-page .dot-hero h1 .tap { color: var(--dot-gold-lit); display: block; }

.dot-page .dot-hero .dot-lead { max-width: 560px; margin-top: 32px; }

.dot-page .dot-hero-meta {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 0 38px;
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--dot-line);
}

.dot-page .dot-hero-meta div {
    font-family: 'silka-mono', 'Courier New', monospace;
    font-size: 1.3em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    padding: 10px 0;
}

.dot-page .dot-hero-meta div b {
    display: block;
    color: var(--dot-gold-lit);
    font-weight: 400;
    font-size: 1.5em;
    letter-spacing: 0.08em;
    margin-top: 6px;
}

.dot-page .dot-hero-cta {
    margin-top: 46px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dot-page .dot-hero-cta .dot-btn { margin: 0; }

.dot-page .dot-hero-badge {
    position: absolute;
    right: 6%;
    bottom: 8%;
    z-index: 2;
    width: 150px;
    opacity: 0.9;
}

.dot-page .dot-hero-badge img { width: 100%; display: block; }

/* ---------------------------------------------------------------------
   Marquee spec ticker
   ------------------------------------------------------------------ */

.dot-page .dot-ticker {
    background: var(--dot-gold);
    overflow: hidden;
    padding: 16px 0;
    white-space: nowrap;
}

.dot-page .dot-ticker-track {
    display: inline-block;
    animation: dotTickerScroll 38s linear infinite;
}

.dot-page .dot-ticker span {
    font-family: 'silka-mono', 'Courier New', monospace;
    font-size: 1.4em;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #000;
    padding: 0 26px;
}

.dot-page .dot-ticker span i { font-style: normal; opacity: 0.45; }

@keyframes dotTickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .dot-page .dot-ticker-track { animation: none; }
}

/* ---------------------------------------------------------------------
   Split blocks (image beside copy)
   ------------------------------------------------------------------ */

.dot-page .dot-split {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.dot-page .dot-split-media {
    width: 46%;
    align-self: stretch;
    min-height: 620px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.dot-page .dot-split-media.contain {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
}

.dot-page .dot-split-copy {
    width: 54%;
    padding: 100px 7%;
    box-sizing: border-box;
}

.dot-page .dot-split-copy h2 {
    font-size: 5.6em;
    color: #fff;
    margin-bottom: 28px;
}

.dot-page .dot-split.flip { flex-direction: row-reverse; }

/* ---------------------------------------------------------------------
   Section headings
   ------------------------------------------------------------------ */

.dot-page .dot-head { margin-bottom: 70px; }
.dot-page .dot-section > .dot-head:last-child { margin-bottom: 0; }
.dot-page .dot-head.center { text-align: center; }
.dot-page .dot-head.center .dot-rule { margin-left: auto; margin-right: auto; }

.dot-page .dot-head h2 {
    font-size: 6.4em;
    color: #fff;
    margin: 0;
}

.dot-page .dot-head p { max-width: 720px; }
.dot-page .dot-head.center p { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------
   Prizes
   ------------------------------------------------------------------ */

.dot-page .dot-prizes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
}

.dot-page .dot-prize {
    border: 1px solid var(--dot-line);
    background: linear-gradient(180deg, rgba(172, 136, 27, 0.09) 0%, rgba(172, 136, 27, 0) 55%);
    padding: 54px 40px 46px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.dot-page .dot-prize.first {
    border-color: var(--dot-gold);
    background: linear-gradient(180deg, rgba(172, 136, 27, 0.26) 0%, rgba(172, 136, 27, 0.02) 60%);
    box-shadow: 0 0 60px rgba(172, 136, 27, 0.16);
}

.dot-page .dot-prize-rank {
    font-family: 'silka-mono', 'Courier New', monospace;
    font-size: 1.2em;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dot-gold-lit);
    margin-bottom: 18px;
}

.dot-page .dot-prize.first .dot-prize-rank { color: var(--dot-gold-lit); }

.dot-page .dot-prize-amount {
    font-family: 'runaways', Helvetica, Arial, sans-serif;
    font-size: 8.4em;
    line-height: 0.92em;
    color: #fff;
    margin: 0 0 6px;
}

.dot-page .dot-prize.first .dot-prize-amount { color: var(--dot-gold-lit); }

.dot-page .dot-prize-label {
    font-family: 'silka-mono', 'Courier New', monospace;
    font-size: 1.2em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 28px;
}

.dot-page .dot-prize ul {
    list-style: none;
    margin: 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--dot-line);
}

.dot-page .dot-prize ul li {
    font-size: 1.7em;
    line-height: 1.5em;
    color: rgba(255, 255, 255, 0.78);
    padding: 9px 0 9px 26px;
    position: relative;
}

.dot-page .dot-prize ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    width: 9px;
    height: 9px;
    background: var(--dot-gold);
    transform: rotate(45deg);
}

.dot-page .dot-prize.first ul li:before { background: var(--dot-gold-lit); }

.dot-page .dot-prize-flag {
    position: absolute;
    top: -1px;
    right: -1px;
    background: var(--dot-gold-lit);
    color: #000;
    font-family: 'silka-mono', 'Courier New', monospace;
    font-size: 1.1em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 9px 16px;
}

/* ---------------------------------------------------------------------
   The three Alexanders
   ------------------------------------------------------------------ */

.dot-page .dot-dna {
    background-size: cover;
    background-position: center;
    position: relative;
}

.dot-page .dot-dna:before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(6, 4, 2, 0.86);
}

.dot-page .dot-dna .dot-section { z-index: 2; }

.dot-page .dot-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px;
    text-align: center;
}

.dot-page .dot-trio-item img {
    width: 190px;
    height: auto;
    margin: 0 auto 26px;
    display: block;
}

.dot-page .dot-trio-item h3 {
    font-size: 3.4em;
    color: var(--dot-gold-lit);
    margin: 0 0 6px;
    font-family: 'runaways', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
}

.dot-page .dot-trio-role {
    font-family: 'silka-mono', 'Courier New', monospace;
    font-size: 1.2em;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}

.dot-page .dot-trio-item p { font-size: 1.7em; }

/* ---------------------------------------------------------------------
   Spec sheet / mandatories
   ------------------------------------------------------------------ */

.dot-page .dot-spec {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--dot-line);
}

.dot-page .dot-spec-item {
    padding: 34px 38px;
    border-bottom: 1px solid var(--dot-line);
    border-right: 1px solid var(--dot-line);
    box-sizing: border-box;
}

.dot-page .dot-spec-item:nth-child(2n) { border-right: 0; }

.dot-page .dot-spec-item dt {
    font-family: 'silka-mono', 'Courier New', monospace;
    font-size: 1.15em;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--dot-gold-lit);
    margin-bottom: 10px;
}

.dot-page .dot-spec-item dd {
    margin: 0;
    font-size: 2em;
    line-height: 1.4em;
    color: #fff;
}

.dot-page .dot-spec-item dd small {
    display: block;
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
    line-height: 1.5em;
}

/* ---------------------------------------------------------------------
   Deliverables checklist
   ------------------------------------------------------------------ */

.dot-page .dot-check {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 40px;
}

.dot-page .dot-check li {
    font-size: 1.8em;
    line-height: 1.6em;
    color: rgba(255, 255, 255, 0.8);
    padding: 14px 0 14px 44px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dot-page .dot-check li:before {
    content: '';
    position: absolute;
    left: 6px;
    top: 22px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--dot-gold-lit);
    border-bottom: 2px solid var(--dot-gold-lit);
    transform: rotate(-45deg);
}

.dot-page .dot-check li b { color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------------
   Judging criteria
   ------------------------------------------------------------------ */

.dot-page .dot-criteria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--dot-line);
    border: 1px solid var(--dot-line);
}

.dot-page .dot-criterion {
    background: var(--dot-ink);
    padding: 44px 34px;
    transition: background 0.3s ease;
}

.dot-page .dot-criterion:hover { background: var(--dot-ink-2); }

/* 07 spans the remainder so the last row never leaves empty gold cells. */
.dot-page .dot-criterion:last-child { grid-column: 1 / -1; }

.dot-page .dot-criterion-num {
    font-family: 'silka-mono', 'Courier New', monospace;
    font-size: 1.2em;
    letter-spacing: 0.2em;
    color: var(--dot-gold);
    margin-bottom: 18px;
}

.dot-page .dot-criterion h3 {
    font-family: 'runaways', Helvetica, Arial, sans-serif;
    font-size: 2.8em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 12px;
}

.dot-page .dot-criterion p { font-size: 1.6em; line-height: 1.6em; margin: 0; }

/* ---------------------------------------------------------------------
   Timeline
   ------------------------------------------------------------------ */

.dot-page .dot-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.dot-page .dot-timeline:before {
    content: '';
    position: absolute;
    left: 138px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--dot-line);
}

.dot-page .dot-timeline li {
    display: flex;
    align-items: flex-start;
    padding: 26px 0;
    position: relative;
}

.dot-page .dot-timeline-date {
    width: 138px;
    flex: 0 0 138px;
    font-family: 'silka-mono', 'Courier New', monospace;
    font-size: 1.5em;
    letter-spacing: 0.1em;
    color: var(--dot-gold-lit);
    padding-top: 4px;
}

.dot-page .dot-timeline-body { padding-left: 46px; }

.dot-page .dot-timeline-body h3 {
    font-family: 'runaways', Helvetica, Arial, sans-serif;
    font-size: 3em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 8px;
}

.dot-page .dot-timeline-body p { margin: 0; font-size: 1.7em; }

.dot-page .dot-timeline li:before {
    content: '';
    position: absolute;
    left: 133px;
    top: 34px;
    width: 11px;
    height: 11px;
    background: var(--dot-gold);
    border-radius: 50%;
    z-index: 2;
}

.dot-page .dot-timeline li.is-final:before {
    background: var(--dot-gold-lit);
    box-shadow: 0 0 0 5px rgba(226, 182, 63, 0.22);
}

.dot-page .dot-timeline li.is-final .dot-timeline-date,
.dot-page .dot-timeline li.is-final h3 { color: var(--dot-gold-lit); }

/* ---------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------ */

.dot-page .dot-faqs { border-top: 1px solid var(--dot-line); }

.dot-page .dot-faq {
    border-bottom: 1px solid var(--dot-line);
}

.dot-page .dot-faq-q {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    padding: 32px 60px 32px 0;
    position: relative;
    font-family: 'runaways', Helvetica, Arial, sans-serif;
    font-size: 2.6em;
    text-transform: uppercase;
    color: #fff;
    transition: color 0.2s ease;
}

.dot-page .dot-faq-q:hover { color: var(--dot-gold-lit); }

.dot-page .dot-faq-q:after {
    content: '+';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dot-gold-lit);
    font-size: 0.9em;
    line-height: 1;
    transition: transform 0.25s ease;
}

.dot-page .dot-faq.is-open .dot-faq-q:after { transform: translateY(-50%) rotate(45deg); }

.dot-page .dot-faq-a {
    display: none;
    padding: 0 60px 30px 0;
}

.dot-page .dot-faq.is-open .dot-faq-a { display: block; }
.dot-page .dot-faq-a p { margin-top: 0; }
.dot-page .dot-faq-a a { color: var(--dot-gold-lit); }

/* ---------------------------------------------------------------------
   Signup / form
   ------------------------------------------------------------------ */

.dot-page .dot-signup {
    background: linear-gradient(180deg, var(--dot-ink-2) 0%, var(--dot-ink) 100%);
    border-top: 1px solid var(--dot-line);
}

.dot-page .dot-form-shell {
    max-width: 780px;
    margin: 0 auto;
    border: 1px solid var(--dot-line);
    background: rgba(0, 0, 0, 0.5);
    padding: 60px 6% 50px;
    box-sizing: border-box;
}

/* Gravity Forms overrides — scoped to this page only */
.dot-page .dot-form-shell .gform_wrapper label,
.dot-page .dot-form-shell .gform_wrapper .gfield_label {
    font-family: 'silka-mono', 'Courier New', monospace !important;
    font-size: 1.3em !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--dot-gold-lit) !important;
    margin-bottom: 10px !important;
}

.dot-page .dot-form-shell .gform_wrapper .gfield_required { color: var(--dot-gold-lit) !important; }

.dot-page .dot-form-shell .gform_wrapper input[type="text"],
.dot-page .dot-form-shell .gform_wrapper input[type="email"],
.dot-page .dot-form-shell .gform_wrapper input[type="url"],
.dot-page .dot-form-shell .gform_wrapper input[type="tel"],
.dot-page .dot-form-shell .gform_wrapper select,
.dot-page .dot-form-shell .gform_wrapper textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-size: 1.7em !important;
    padding: 16px 18px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dot-page .dot-form-shell .gform_wrapper input:focus,
.dot-page .dot-form-shell .gform_wrapper select:focus,
.dot-page .dot-form-shell .gform_wrapper textarea:focus {
    border-color: var(--dot-gold-lit) !important;
    outline: none !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

.dot-page .dot-form-shell .gform_wrapper ::placeholder { color: rgba(255, 255, 255, 0.32) !important; }

.dot-page .dot-form-shell .gform_wrapper .gfield { margin-bottom: 26px !important; }

.dot-page .dot-form-shell .gform_wrapper .gfield_description,
.dot-page .dot-form-shell .gform_wrapper .gform_fileupload_rules {
    font-size: 1.4em !important;
    color: rgba(255, 255, 255, 0.45) !important;
    padding-top: 8px !important;
}

.dot-page .dot-form-shell .gform_wrapper .gfield_checkbox label,
.dot-page .dot-form-shell .gform_wrapper .gfield_radio label {
    font-family: 'proxima-nova', Helvetica, Arial, sans-serif !important;
    font-size: 1.6em !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.dot-page .dot-form-shell .gform_wrapper .gform_footer { text-align: center; padding-top: 14px !important; }

.dot-page .dot-form-shell .gform_wrapper input[type="submit"] {
    background: var(--dot-gold) !important;
    color: #000 !important;
    border: 2px solid var(--dot-gold) !important;
    font-family: 'silka-mono', 'Courier New', monospace !important;
    font-size: 1.4em !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 20px 46px !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background 0.25s ease;
    width: auto !important;
}

.dot-page .dot-form-shell .gform_wrapper input[type="submit"]:hover {
    background: var(--dot-gold-lit) !important;
    border-color: var(--dot-gold-lit) !important;
}

.dot-page .dot-form-shell .gform_confirmation_message {
    font-size: 2em;
    color: var(--dot-gold-lit);
    text-align: center;
    line-height: 1.6em;
}

.dot-page .dot-form-shell .gform_wrapper .validation_message,
.dot-page .dot-form-shell .gform_wrapper .gfield_validation_message {
    background: rgba(235, 71, 44, 0.12) !important;
    border: 0 !important;
    border-left: 3px solid #EB472C !important;
    color: #ff9a86 !important;
    font-size: 1.4em !important;
    padding: 10px 14px !important;
}

.dot-page .dot-form-shell .gform_wrapper .gform_validation_errors {
    background: rgba(235, 71, 44, 0.1) !important;
    border: 1px solid rgba(235, 71, 44, 0.4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dot-page .dot-form-shell .gform_wrapper .gform_validation_errors h2,
.dot-page .dot-form-shell .gform_wrapper .gform_validation_errors ol a {
    color: #ff9a86 !important;
    font-size: 1.6em !important;
}

/* ---------------------------------------------------------------------
   Closing CTA
   ------------------------------------------------------------------ */

.dot-page .dot-closer {
    text-align: center;
    background: var(--dot-gold);
    padding: 110px 6%;
}

.dot-page .dot-closer h2 {
    font-family: 'runaways', Helvetica, Arial, sans-serif;
    font-size: 7em;
    text-transform: uppercase;
    line-height: 1em;
    color: #000;
    margin: 0 0 22px;
}

.dot-page .dot-closer p {
    color: rgba(0, 0, 0, 0.72);
    font-size: 2em;
    max-width: 620px;
    margin: 0 auto 34px;
}

.dot-page .dot-closer .dot-btn {
    background: #000;
    border-color: #000;
    color: var(--dot-gold-lit) !important;
}

.dot-page .dot-closer .dot-btn:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff !important;
}

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

@media only screen and (max-width: 1200px) {
    .dot-page .dot-hero h1 { font-size: 8.5em; }
    .dot-page .dot-head h2 { font-size: 5em; }
    .dot-page .dot-intro-left h2 { font-size: 5em; }
    .dot-page .dot-split-copy h2 { font-size: 4.4em; }
    .dot-page .dot-prize-amount { font-size: 7em; }
    .dot-page .dot-criteria { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 900px) {
    .dot-page .dot-section { padding: 90px 0; width: 90%; }
    .dot-page .dot-hero { min-height: 0; }
    .dot-page .dot-hero-inner { padding: 150px 0 90px; }
    .dot-page .dot-hero h1 { font-size: 6.4em; }
    .dot-page .dot-hero-meta { grid-template-columns: repeat(2, auto); gap: 0 36px; }
    .dot-page .dot-hero-badge { display: none; }
    .dot-page .dot-head h2 { font-size: 4.2em; }
    .dot-page .dot-prizes { grid-template-columns: 1fr; }
    .dot-page .dot-trio { grid-template-columns: 1fr; gap: 60px; }
    .dot-page .dot-criteria { grid-template-columns: 1fr; }
    .dot-page .dot-spec { grid-template-columns: 1fr; }
    .dot-page .dot-spec-item { border-right: 0; }
    .dot-page .dot-check { grid-template-columns: 1fr; }
    .dot-page .dot-split-media { width: 100%; min-height: 380px; }
    .dot-page .dot-split-copy { width: 100%; padding: 70px 6%; }
    .dot-page .dot-closer h2 { font-size: 4.6em; }
    .dot-page .dot-form-shell { padding: 44px 7% 36px; }
}

@media only screen and (max-width: 640px) {
    .dot-page .dot-hero h1 { font-size: 4.8em; }
    .dot-page .dot-lead { font-size: 1.9em !important; }
    .dot-page .dot-head h2 { font-size: 3.4em; }
    .dot-page .dot-split-copy h2 { font-size: 3.2em; }
    .dot-page .dot-prize-amount { font-size: 6em; }
    .dot-page .dot-hero-meta { grid-template-columns: repeat(2, auto); gap: 0 28px; }
    .dot-page .dot-btn { display: block; text-align: center; margin: 12px 0 0; }
    .dot-page .dot-timeline:before { left: 5px; }
    .dot-page .dot-timeline li { flex-direction: column; padding-left: 34px; }
    .dot-page .dot-timeline li:before { left: 0; top: 32px; }
    .dot-page .dot-timeline-date { width: auto; flex: none; margin-bottom: 8px; }
    .dot-page .dot-timeline-body { padding-left: 0; }
    .dot-page .dot-closer h2 { font-size: 3.4em; }
}

/* =====================================================================
   ADDITIONS — imagery bands, entry modal, button rows
   Still fully scoped under `.dot-page`.
   ===================================================================== */

/* --- Light split media (breaks up the run of dark sections) ---------- */
.dot-page .dot-split-media.light {
    background-color: #F4F1EA;
}

/* --- Button rows ----------------------------------------------------- */
.dot-page .dot-btn-row {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.dot-page .dot-btn-row .dot-btn { margin: 0; }

.dot-page .dot-btn.outline-dark {
    background: transparent;
    color: #000 !important;
    border-color: rgba(0, 0, 0, 0.55);
}

.dot-page .dot-btn.outline-dark:hover {
    background: #000;
    border-color: #000;
    color: var(--dot-gold-lit) !important;
}

/* --- Full-bleed photo band ------------------------------------------- */
.dot-page .dot-photoband {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 150px 6%;
    text-align: center;
}

.dot-page .dot-photoband:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 4, 2, 0.86) 0%, rgba(6, 4, 2, 0.72) 50%, rgba(6, 4, 2, 0.9) 100%);
}

.dot-page .dot-photoband-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.dot-page .dot-photoband h2 {
    font-size: 5.6em;
    color: #fff;
    margin: 0 0 30px;
}

.dot-page .dot-photoband .dot-lead { max-width: 700px; margin: 0 auto; }

/* --- Signup band over photography ------------------------------------ */
.dot-page .dot-signup.has-photo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dot-page .dot-signup.has-photo:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 6, 3, 0.86) 0%, rgba(8, 6, 3, 0.74) 55%, rgba(8, 6, 3, 0.9) 100%);
}

.dot-page .dot-signup.has-photo > .dot-section { position: relative; z-index: 2; }

/* --- "Already finished?" switch --------------------------------------- */
.dot-page .dot-entry-switch {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 44px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--dot-line);
}

.dot-page .dot-entry-switch p {
    margin: 0 0 18px;
    font-size: 1.7em;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Entry modal ------------------------------------------------------ */
.dot-page .dot-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}

.dot-page .dot-modal[hidden] { display: none !important; }

.dot-page .dot-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.86);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.dot-page .dot-modal-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 760px;
    margin: auto;
    background: var(--dot-ink-2);
    border: 1px solid var(--dot-gold);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
    padding: 56px 6% 48px;
    box-sizing: border-box;
}

.dot-page .dot-modal-panel h2 { font-size: 5em; color: #fff; }
.dot-page .dot-modal-panel > p { max-width: 560px; }

.dot-page .dot-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 3.6em;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
    transition: color 0.2s ease;
}

.dot-page .dot-modal-close:hover { color: var(--dot-gold-lit); }

.dot-page .dot-modal-form { margin-top: 30px; }

/* Gravity Forms inside the modal — same treatment as the page form. */
.dot-page .dot-modal-form .gform_wrapper label,
.dot-page .dot-modal-form .gform_wrapper .gfield_label {
    font-family: 'silka-mono', 'Courier New', monospace !important;
    font-size: 1.3em !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--dot-gold-lit) !important;
    margin-bottom: 10px !important;
}

.dot-page .dot-modal-form .gform_wrapper .gfield_required { color: var(--dot-gold-lit) !important; }

.dot-page .dot-modal-form .gform_wrapper input[type="text"],
.dot-page .dot-modal-form .gform_wrapper input[type="email"],
.dot-page .dot-modal-form .gform_wrapper input[type="url"],
.dot-page .dot-modal-form .gform_wrapper input[type="tel"],
.dot-page .dot-modal-form .gform_wrapper select,
.dot-page .dot-modal-form .gform_wrapper textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-size: 1.7em !important;
    padding: 16px 18px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dot-page .dot-modal-form .gform_wrapper textarea { min-height: 120px; }

.dot-page .dot-modal-form .gform_wrapper input:focus,
.dot-page .dot-modal-form .gform_wrapper select:focus,
.dot-page .dot-modal-form .gform_wrapper textarea:focus {
    border-color: var(--dot-gold-lit) !important;
    outline: none !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

.dot-page .dot-modal-form .gform_wrapper ::placeholder { color: rgba(255, 255, 255, 0.32) !important; }
.dot-page .dot-modal-form .gform_wrapper .gfield { margin-bottom: 26px !important; }

.dot-page .dot-modal-form .gform_wrapper .gfield_description,
.dot-page .dot-modal-form .gform_wrapper .gform_fileupload_rules {
    font-size: 1.4em !important;
    color: rgba(255, 255, 255, 0.45) !important;
    padding-top: 8px !important;
}

/* File upload fields get a dashed drop-zone look. */
.dot-page .dot-modal-form .gform_wrapper input[type="file"] {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(226, 182, 63, 0.05) !important;
    border: 1px dashed rgba(226, 182, 63, 0.45) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 1.5em !important;
    padding: 22px 18px !important;
    cursor: pointer;
}

.dot-page .dot-modal-form .gform_wrapper .gform_drop_area {
    background: rgba(226, 182, 63, 0.05) !important;
    border: 1px dashed rgba(226, 182, 63, 0.45) !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1.5em !important;
    padding: 30px 20px !important;
}

.dot-page .dot-modal-form .gform_wrapper .gform_drop_instructions { color: rgba(255, 255, 255, 0.5) !important; }

.dot-page .dot-modal-form .gform_wrapper .gform_delete,
.dot-page .dot-modal-form .gform_wrapper .gfield_fileupload_filename { color: #fff !important; font-size: 1.4em !important; }

.dot-page .dot-modal-form .gform_wrapper .gfield_checkbox label {
    font-family: 'proxima-nova', Helvetica, Arial, sans-serif !important;
    font-size: 1.5em !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.5em !important;
}

.dot-page .dot-modal-form .gform_wrapper .gform_footer { text-align: center; padding-top: 14px !important; }

.dot-page .dot-modal-form .gform_wrapper input[type="submit"] {
    background: var(--dot-gold) !important;
    color: #000 !important;
    border: 2px solid var(--dot-gold) !important;
    font-family: 'silka-mono', 'Courier New', monospace !important;
    font-size: 1.4em !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 20px 46px !important;
    border-radius: 0 !important;
    cursor: pointer;
    width: auto !important;
}

.dot-page .dot-modal-form .gform_wrapper input[type="submit"]:hover {
    background: var(--dot-gold-lit) !important;
    border-color: var(--dot-gold-lit) !important;
}

.dot-page .dot-modal-form .gform_confirmation_message {
    font-size: 2em;
    color: var(--dot-gold-lit);
    text-align: center;
    line-height: 1.6em;
    padding: 30px 0;
}

.dot-page .dot-modal-form .gform_wrapper .validation_message,
.dot-page .dot-modal-form .gform_wrapper .gfield_validation_message {
    background: rgba(235, 71, 44, 0.12) !important;
    border: 0 !important;
    border-left: 3px solid #EB472C !important;
    color: #ff9a86 !important;
    font-size: 1.4em !important;
    padding: 10px 14px !important;
}

.dot-page .dot-modal-form .gform_wrapper .gform_validation_errors {
    background: rgba(235, 71, 44, 0.1) !important;
    border: 1px solid rgba(235, 71, 44, 0.4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dot-page .dot-modal-form .gform_wrapper .gform_validation_errors h2,
.dot-page .dot-modal-form .gform_wrapper .gform_validation_errors ol a {
    color: #ff9a86 !important;
    font-size: 1.6em !important;
}

@media only screen and (max-width: 900px) {
    .dot-page .dot-photoband { padding: 90px 7%; }
    .dot-page .dot-photoband h2 { font-size: 3.8em; }
    .dot-page .dot-modal { padding: 20px 12px; }
    .dot-page .dot-modal-panel { padding: 44px 7% 36px; }
    .dot-page .dot-modal-panel h2 { font-size: 3.4em; }
}

@media only screen and (max-width: 640px) {
    .dot-page .dot-photoband h2 { font-size: 3em; }
    .dot-page .dot-btn-row { flex-direction: column; }
    .dot-page .dot-btn-row .dot-btn { width: 100%; text-align: center; }
}

/* --- Bottom-of-page relief -------------------------------------------
   The run from the timeline to the closer was six straight black blocks.
   These add texture and a watermark so the eye has something to hold.
   ------------------------------------------------------------------ */

.dot-page .dot-timeline-band {
    position: relative;
    background: var(--dot-ink-2);
    overflow: hidden;
}

.dot-page .dot-timeline-band:after {
    content: '';
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 460px;
    height: 460px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: var(--dot-watermark);
    opacity: 0.09;
    pointer-events: none;
}

.dot-page .dot-timeline-band > .dot-section { position: relative; z-index: 2; }

.dot-page .dot-faqs-band {
    position: relative;
    background-size: cover;
    background-position: center;
}

.dot-page .dot-faqs-band:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 4, 2, 0.94) 0%, rgba(6, 4, 2, 0.88) 100%);
}

.dot-page .dot-faqs-band > .dot-section { position: relative; z-index: 2; }

/* --- Brand-in-the-wild strip ------------------------------------------ */
.dot-page .dot-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--dot-line);
}

.dot-page .dot-gallery figure {
    margin: 0;
    height: 560px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.dot-page .dot-gallery figure.contain {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #F4F1EA;
}


@media only screen and (max-width: 900px) {
    .dot-page .dot-timeline-band:after { display: none; }
    .dot-page .dot-gallery { grid-template-columns: 1fr; }
    .dot-page .dot-gallery figure { height: 340px; }
}

/* =====================================================================
   FORM INPUT OVERRIDE — specificity fix

   circles-gravity-forms.css:224 forces white inputs with
     .circles-form .gform_wrapper input:not(...)x6  -> specificity (0,8,1)
   Our earlier rule was (0,4,1), so it lost despite !important.
   Re-declaring with the same :not() chain plus our two scoping classes
   lands at (0,9,1) and wins, on this page only.
   ===================================================================== */

.dot-page .dot-form-shell .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.dot-page .dot-modal-form .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    color: #fff !important;
    font-family: 'silka-mono', 'Courier New', monospace !important;
    font-size: 17px !important;
    padding: 16px 18px !important;
    border-radius: 0 !important;
}

.dot-page .dot-form-shell .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus,
.dot-page .dot-modal-form .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: var(--dot-gold-lit) !important;
    outline: none !important;
}

.dot-page .dot-form-shell .gform_wrapper textarea,
.dot-page .dot-form-shell .gform_wrapper select,
.dot-page .dot-modal-form .gform_wrapper textarea,
.dot-page .dot-modal-form .gform_wrapper select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    color: #fff !important;
    font-family: 'silka-mono', 'Courier New', monospace !important;
    font-size: 17px !important;
    padding: 16px 18px !important;
    border-radius: 0 !important;
}

/* The file inputs are excluded from that :not() chain, so they need their own. */
.dot-page .dot-modal-form .gform_wrapper input[type=file] {
    background: rgba(226, 182, 63, 0.06) !important;
    border: 1px dashed rgba(226, 182, 63, 0.5) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 22px 18px !important;
}

/* --- Spectator RSVP band ---------------------------------------------- */
.dot-page .dot-rsvp {
    background: var(--dot-ink-2);
    border-top: 1px solid var(--dot-line);
    border-bottom: 1px solid var(--dot-line);
}

.dot-page .dot-rsvp .dot-form-shell { max-width: 620px; }

.dot-page .dot-inline-link {
    color: var(--dot-gold-lit);
    text-decoration: none;
    border-bottom: 1px solid rgba(226, 182, 63, 0.4);
    white-space: nowrap;
}

.dot-page .dot-inline-link:hover { border-bottom-color: var(--dot-gold-lit); }

/* Centred button rows (pitch + prizes sections). */
.dot-page .dot-btn-row.center { justify-content: center; }

/* Small supporting note under a section lead. */
.dot-page .dot-note {
    font-size: 1.6em !important;
    line-height: 1.65em;
    color: rgba(255, 255, 255, 0.5);
    max-width: 640px;
    margin: 18px auto 0;
}

/* =====================================================================
   MOBILE BUTTONS — every button full width and equal, never touching
   the viewport edge.

   The hero CTA and .dot-btn-row are flex containers, so their children
   were sizing to their own text instead of filling. Stack them and let
   the buttons stretch. box-sizing on .dot-btn (above) keeps the 40px
   padding and 2px border inside the 100% width so nothing overflows.
   ===================================================================== */
@media only screen and (max-width: 640px) {

    .dot-page .dot-hero-cta,
    .dot-page .dot-btn-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .dot-page .dot-hero-cta .dot-btn,
    .dot-page .dot-btn-row .dot-btn,
    .dot-page .dot-entry-switch .dot-btn,
    .dot-page .dot-closer .dot-btn,
    .dot-page .dot-split-copy .dot-btn {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        text-align: center;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Stacked buttons outside a flex row still need their own spacing. */
    .dot-page .dot-closer .dot-btn + .dot-btn,
    .dot-page .dot-split-copy .dot-btn + .dot-btn { margin-top: 12px; }

    /* Guarantee breathing room at the screen edges. */
    .dot-page .dot-section { width: 88%; }
    .dot-page .dot-hero-inner { width: 88%; }
}

/* =====================================================================
   Page-wide border-box safety net. Most components already declared it;
   this makes any width:100% + padding combination safe by default so
   nothing can overflow the viewport on narrow screens.
   ===================================================================== */
.dot-page,
.dot-page *,
.dot-page *:before,
.dot-page *:after { box-sizing: border-box; }

/* --- FAQ sizing on mobile --------------------------------------------
   2.6em (26px) display type made most questions run to three lines.
   ------------------------------------------------------------------ */
@media only screen and (max-width: 900px) {
    .dot-page .dot-faq-q { font-size: 2.1em; padding: 26px 48px 26px 0; }
    .dot-page .dot-faq-a { padding-right: 40px; }
}

@media only screen and (max-width: 640px) {
    .dot-page .dot-faq-q { font-size: 1.8em; padding: 22px 40px 22px 0; line-height: 1.25em; }
    .dot-page .dot-faq-q:after { font-size: 1.1em; right: 4px; }
    .dot-page .dot-faq-a { padding-right: 20px; }
    .dot-page .dot-faq-a p { font-size: 1.6em; }
}

/* --- Partnership intro ------------------------------------------------
   Frames who We Are Alexander is and why this contest exists, before the
   page drops the reader into the brief.
   ------------------------------------------------------------------ */
.dot-page .dot-intro {
    background: linear-gradient(180deg, #131313 0%, var(--dot-ink) 100%);
    border-bottom: 1px solid var(--dot-line);
}

.dot-page .dot-intro-grid {
    display: grid;
    grid-template-columns: 46% 1fr;
    gap: 0 70px;
    align-items: start;
}

.dot-page .dot-intro-left h2 { font-size: 6.4em; color: #fff; }
.dot-page .dot-intro-left .dot-rule { margin-bottom: 0; }

.dot-page .dot-intro-right > p:first-child { margin-top: 0; }
.dot-page .dot-intro-right .dot-lead { font-size: 2em !important; }

@media only screen and (max-width: 1000px) {
    .dot-page .dot-intro-grid { grid-template-columns: 1fr; gap: 40px 0; }
    .dot-page .dot-intro-left h2 { font-size: 4.2em; }
    .dot-page .dot-intro-left .dot-rule { margin-bottom: 0; }
}

@media only screen and (max-width: 640px) {
    .dot-page .dot-intro-left h2 { font-size: 3.4em; }
}

/* ---------------------------------------------------------------------
   Autofill — Chrome/Safari paint the value black on this black form.

   Every input above already carries `color: #fff !important`, but an
   autofilled field is painted by the browser's own UA style, which uses
   `-webkit-text-fill-color` rather than `color`. An author `!important`
   on `color` does not beat it, so a remembered name or email renders
   near-black on the dark shell while a typed one is correctly white.
   `-webkit-text-fill-color` is the only property that wins.

   The `transition` line is the standard trick for holding off the UA's
   forced background paint: it keeps the field's translucent
   `rgba(255,255,255,0.04)` instead of forcing an opaque swatch, so an
   autofilled field still matches the one next to it.

   Scoped to this page's body class (page-id-12768 / Design on Tap) on
   purpose. Every other form on the site is dark-on-light, where the
   browser default is already correct — a global fix would break them.
   ------------------------------------------------------------------ */
body.page-id-12768 .dot-page input:-webkit-autofill,
body.page-id-12768 .dot-page input:-webkit-autofill:hover,
body.page-id-12768 .dot-page input:-webkit-autofill:focus,
body.page-id-12768 .dot-page input:-webkit-autofill:active,
body.page-id-12768 .dot-page select:-webkit-autofill,
body.page-id-12768 .dot-page select:-webkit-autofill:hover,
body.page-id-12768 .dot-page select:-webkit-autofill:focus,
body.page-id-12768 .dot-page textarea:-webkit-autofill,
body.page-id-12768 .dot-page textarea:-webkit-autofill:hover,
body.page-id-12768 .dot-page textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    -webkit-transition: background-color 600000s 0s, color 600000s 0s;
            transition: background-color 600000s 0s, color 600000s 0s;
}

/* Firefox and any engine shipping the unprefixed selector. */
body.page-id-12768 .dot-page input:autofill,
body.page-id-12768 .dot-page select:autofill,
body.page-id-12768 .dot-page textarea:autofill {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    color: #fff !important;
}

/* Belt and braces: a typed value must be white too, whatever Gravity
   Forms' own stylesheet decides to load on this page. */
body.page-id-12768 .dot-page .gform_wrapper input[type="text"],
body.page-id-12768 .dot-page .gform_wrapper input[type="email"],
body.page-id-12768 .dot-page .gform_wrapper input[type="url"],
body.page-id-12768 .dot-page .gform_wrapper input[type="tel"],
body.page-id-12768 .dot-page .gform_wrapper input[type="number"],
body.page-id-12768 .dot-page .gform_wrapper select,
body.page-id-12768 .dot-page .gform_wrapper textarea {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ---------------------------------------------------------------------
   Confirmation messages — white text, no top gap.

   Two things were fighting over this box. The site-wide Gravity Forms
   stylesheet (circles-gravity-forms.css) gives every confirmation on the
   site a green panel with `margin-top: 40px`, and the page rules above
   were re-colouring the text gold, which reads badly on that green.

   Both are corrected here rather than in the global file, because the
   green panel and its 40px are right for the rest of the site's forms.
   Covers all three forms on this page — entry, RSVP and the modal — by
   scoping to the page rather than to either form container.
   ------------------------------------------------------------------ */
body.page-id-12768 .dot-page .gform_confirmation_message,
body.page-id-12768 .dot-page .gform_confirmation_wrapper {
    margin-top: 0 !important;
    color: #fff !important;
}

body.page-id-12768 .dot-page .gform_confirmation_message strong,
body.page-id-12768 .dot-page .gform_confirmation_message b,
body.page-id-12768 .dot-page .gform_confirmation_message em,
body.page-id-12768 .dot-page .gform_confirmation_message p,
body.page-id-12768 .dot-page .gform_confirmation_message span,
body.page-id-12768 .dot-page .gform_confirmation_message h1,
body.page-id-12768 .dot-page .gform_confirmation_message h2,
body.page-id-12768 .dot-page .gform_confirmation_message h3,
body.page-id-12768 .dot-page .gform_confirmation_message a {
    color: #fff !important;
}

/* Keep the link readable as a link once it is white on green. */
body.page-id-12768 .dot-page .gform_confirmation_message a {
    text-decoration: underline !important;
}