/*!
Theme Name: Write & Direct App
Theme URI: http://underscores.me/
Author: Kyler Boudreau
Author URI: https://writedirect.co
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: write-direct-app
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Write & Direct App is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
     ========================================================================== */
/* example font classes */
.dm-sans-light { font-family: "DM Sans", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; }
.dm-mono-light { font-family: "DM Mono", serif; font-weight: 300; font-style: normal; }
/* Grouping content
     ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr { box-sizing: content-box; height: 0; overflow: visible; }
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre { font-family: monospace, monospace; font-size: 1em; }
/* Text-level semantics
     ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a { background-color: transparent; }
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b, strong { font-weight: bolder; }
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code, kbd, samp { font-family: "DM Mono", serif;font-size: 18px; }
/**
 * Add the correct font size in all browsers.
 */
small { font-size: 80%; }
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
/* Embedded content
     ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img { border-style: none; }
/* responsive videos */
.embed-container { position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;max-width: 100%;height: auto; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute;top: 0;left: 0;width: 100%;height: 100%; }
/* end responsive videos */
/* Forms
     ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button, input, optgroup, select, textarea { font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0; }
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button, input { overflow: visible; }
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button, select { text-transform: none; }
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none;padding: 0; }
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
/**
 * Correct the padding in Firefox.
 */
fieldset { padding: 0.35em 0.75em 0.625em; }
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *      `fieldset` elements in all browsers.
 */
legend { box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal; }
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress { vertical-align: baseline; }
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea { overflow: auto; }
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"], [type="radio"] { box-sizing: border-box;padding: 0; }
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] { -webkit-appearance: textfield;outline-offset: -2px; }
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button { -webkit-appearance: button;font: inherit; }
/* Interactive
     ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details { display: block; }
/*
 * Add the correct display in all browsers.
 */
summary { display: list-item; }
/* Misc
     ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template { display: none; }
/**
 * Add the correct display in IE 10.
 */
[hidden] { display: none; }
/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*, *::before, *::after { box-sizing: inherit; }
html { box-sizing: border-box; }
/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
dfn, cite, em, i {  }
blockquote { margin: 0 1.5em; }
address { margin: 0 0 1.5em; }
abbr, acronym { border-bottom: 1px dotted #666;cursor: help; }
mark,ins { background: #fff9c0;text-decoration: none; }
big { font-size: 125%; }
/* Elements
--------------------------------------------- */
hr { background-color: #ccc;border: 0;height: 1px;margin-bottom: 1.5em; }
dt { font-weight: 700; }
dd { margin: 0 1.5em 1.5em; }
/* Make sure embeds and iframes fit their containers. */
embed, iframe, object { max-width: 100%; }
img { height: auto;max-width: 100%; }
figure { margin: 1em 0; }
table { margin: 0 0 1.5em;width: 100%; }
/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text { border: 0;clip: rect(1px, 1px, 1px, 1px);clip-path: inset(50%);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute !important;width: 1px;word-wrap: normal !important; }
.screen-reader-text:focus { background-color: #f1f1f1;border-radius: 3px;box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);clip: auto !important;clip-path: none;color: #21759b;display: block;font-size: 0.875rem;font-weight: 700;height: auto;left: 5px;line-height: normal;padding: 15px 23px 14px;text-decoration: none;top: 5px;width: auto;z-index: 100000; }
/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus { outline: 0; }

/* input fields */
button, input[type="button"], input[type="reset"], input[type="submit"] { text-align:center;display:inline-block;color:#fff;font-size:22px;font-weight:500;padding:11px 25px;background:#292929;-webkit-border-radius: 2px 2px 2px 2px ;border-radius: 2px 2px 2px 2px;border-width:none;-webkit-box-shadow:none;border:none; }
.yellow-button { text-align:center;display:inline-block;color:#000;font-size:22px;font-weight:500;padding:11px 25px;background:#ECB612;-webkit-border-radius: 2px 2px 2px 2px ;border-radius: 2px 2px 2px 2px;border-width:none;-webkit-box-shadow:none;border:none; }
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa; }
button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus { border:none;border-color: #aaa #bbb #bbb;-webkit-border-radius: 0 0 0 0;border-radius: 0 0 0 0; }
input[type="text"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"] { height:47px;width:100%;padding:4px 0 0 14px;background:#fff;border-radius:none !important;border:1px solid #cfcfd3;width:100%;margin:0 0 15px 0;font-size:18px; }
input[type="email"] { height:47px;width:100%;padding:4px 0 0 14px;background:#fff;border-radius:none !important;border:1px solid #cfcfd3;width:100%;margin:0 0 15px 0;font-size:18px; }
textarea { height:100px;width:100%;padding:14px 0 0 14px;background:#fff;border-radius:none !important;border:1px solid #cfcfd3;width:100%;margin:9px 0 15px 0; }

/* Legacy prefixes, kept for old engines. Same colour, no font-size. */
input[type="text"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: #8b867c; }
input[type="text"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
textarea::-moz-placeholder { color: #8b867c; opacity: 1; }
input[type="text"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
textarea:-ms-input-placeholder { color: #8b867c; }
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111;width: 100%; }
select { border: 1px solid #ccc;-webkit-border-radius: 0 0 0 0;border-radius: 0 0 0 0;font-size:18px; }
.acf-input-prepend, .acf-input-append { font-size: 13px; line-height: 1.4; padding: 11px 8px 0 8px !important; background: #f5f5f5; border: #7e8993 solid 1px; min-height: 30px; height: 43px; }
.acf-field input::placeholder { color: #b0a98f; /* lighter than your typed text */ opacity: 1; /* Firefox dims placeholders to ~0.54 by default — this stops that */ font-size:17px; }
/* random image upload bug in the admin */
button#menu-item-upload.media-menu-item { color:#292929 !important; }

/* =============================================================================
   =============================================================================
   =============================================================================
   *** BEGIN CUSTOM / CUSTOMIZATIONS ***
   =============================================================================
   =============================================================================
   ========================================================================== */


/* =============================================================================
   Fluent Form Customizations (more customizations for individual forms later)
   ========================================================================== */
/* this is the main form container */
.ff-el-group { flex:0 1 60% !important; }
/* this is the email input */
.ff-el-group.ff-text-left.top_merged.ff_submit_btn_wrapper { flex:0 1 40% !important; }
/* this is the button */
button.ff-btn.ff-btn-submit.ff-btn-md.ff_btn_no_style { width:100% !important;height:60px;color:#3f4246;background:#f1c713;border:none;margin:0;padding:0 34px;font-size:17px;font-weight:600;-webkit-border-radius: 9px 9px 9px 9px;border-radius: 9px 9px 9px 9px; }
.ff-message-success { border:none !important;box-shadow:none !important;font-weight:500;color:#000;background:#f1c713;margin-top: 10px;overflow-wrap: break-word;padding:15px;position:relative;border-radius: 7px !important; }
.ff-message-success p { padding:0;margin:0;color: #000 !important;}
.ff-el-input--content input[type="email"] { width:100%; }
div.ff-el-group.ff-text-left.ff_submit_btn_wrapper.ff_submit_btn_wrapper_custom { margin:0 !important;padding:0 !important; }
form.fluent_form_3 .wpf_has_custom_css.ff-btn-submit { height:60px;font-size:22px;font-weight:600; }

/* contact form */
/* Frosted inputs */
.fluentform_wrapper_3 .ff-el-form-control { width:100%;height:52px !important;box-sizing:border-box;padding:17px 17px !important;font-size:16px;color:#fff !important;background:rgba(255,255,255,0.09) !important;border:1px solid rgba(255,255,255,0.14) !important;border-radius:11px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);outline:none;transition:background 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease; }
.fluentform_wrapper_3 .ff-el-form-control:focus { background:rgba(255,255,255,0.13) !important;border-color:rgba(255,255,255,0.26) !important;box-shadow:0 0 0 3px rgba(255,255,255,0.07),0 4px 20px rgba(0,0,0,0.15) !important; }
/* fixes Chrome's autofill rules */
.fluentform_wrapper_3 .ff-el-form-control:-webkit-autofill, .fluentform_wrapper_1 .ff-el-form-control:-webkit-autofill:focus { -webkit-text-fill-color:#fff !important;transition:background-color 99999s ease-in-out 0s; }
/* "Light up" on focus */
.fluentform_wrapper_3 .ff-el-form-control:focus { background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.65);box-shadow:0 0 0 3px rgba(255,255,255,0.15),0 4px 24px rgba(0,0,0,0.18); }
/* Submit button */
.fluentform_wrapper_3 .ff-btn-submit { width:100%;padding:1rem;font-size:15px;font-weight:600;letter-spacing:0.02em;color:#fff;background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.28);border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:background 0.3s ease,border-color 0.3s ease; }
.fluentform_wrapper_3 .ff-btn-submit:hover { background:rgba(255,255,255,0.26);border-color:rgba(255,255,255,0.55); }
/* GDPR checkbox + text */
.fluentform_wrapper_3 .ff_t_c { color:rgba(255,255,255,0.85);font-size:14px; }
.fluentform_wrapper_3 .ff_gdpr_field { accent-color:#ECB612;width:17px;height:17px; }
/* Trailing "guarantee" line + link */
.fluentform_wrapper_3 p { color:rgba(255,255,255,0.8); }
.fluentform_wrapper_3 p a { color:#ECB612 !important; }


:root {
  /* --- paper and ink -----------------------------------------------------
     Warm, not Tailwind's cool greys. The papers sit at C*3-4 in CIELAB: warm
     enough to read as paper, not enough to read as yellow. */
  --wd-paper: #f9f8f4;   /* page background            */
  --wd-paper-2: #f1eee6; /* alternating section bands  */
  --wd-line: #eae6de;    /* hairlines                  */
  --wd-line-2: #dad6cc;  /* borders that must be seen  */
  --wd-ink: #1a1a1a;     /* body text     16.39 on paper — AAA */
  --wd-ink-soft: #6b645a;/* secondary txt  5.50 on paper — AA  */

  /* --- gold --------------------------------------------------------------
    Gold as a button background with --wd-gold-ink on top
     measures 9.00 and is the pairing the app already ships.
     If you want gold-coloured *text*, you want the dark hero. */
  --wd-gold: #ecb612;     /* the brand accent          */
  --wd-gold-hover: #c9990d;
  --wd-gold-ink: #241d02; /* text sitting ON gold  9.00 — AAA */
  --wd-gold-wash: #fdfaed;/* faintest tint, for callout blocks */

  /* --- brick -------------------------------------------------------------
     The studio site's link colour. It is the only warm accent that survives
     as text on cream, which makes it the natural link colour here too —
     and it stops gold being asked to do a job it cannot do. */
  --wd-brick: #be3c3c;       /* links         5.07 on paper — AA */
  --wd-brick-hover: #9e3030; /* hover         6.77 on paper — AA */

  /* --- dark hero ---------------------------------------------------------
     The handshake with writedirect.studio and school.writedirect.co. Used for
     the full-bleed header only; everything below it is paper. */
  --wd-dark: #121212;
  --wd-dark-ink: #f5f3ee;  /* headings on dark  16.89 — AAA */
  --wd-dark-soft: #d6d1c7; /* body on dark      12.31 — AAA */
  /* Gold on dark measures 10.05 — this is where gold gets to be text.
     Brick on dark measures 3.48: large text only, never body copy. */

  /* --- type --------------------------------------------------------------
     Lora for display, Inter for everything else — the same pairing the
     community site runs, so the family resemblance is immediate.

     NOTE: Lora's variable axis tops out at 700. writedirect.studio asks for
     font-weight:1000 on h1, which the browser can only clamp or fake. Ask for
     700 and you get the real thing. */
  --wd-font-display: "Lora", Georgia, serif;
  --wd-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Fluid scale. Body sits at ~19px, close to the studio site's 20px — this
     is a reading site, so err large. */
  --wd-text-sm: 0.875rem;
  --wd-text-base: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);  
  --wd-text-lg: clamp(1.25rem, 0.6vw + 1.1rem, 1.375rem);
  --wd-h3: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --wd-h2: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
  --wd-h1: clamp(2.25rem, 4vw + 1.2rem, 3.5rem);

  --wd-measure: 38rem; /* ~70 characters at the body size. Guides live or die
                          on line length. */
  --wd-content: 44rem;
  --wd-wide: 80rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  background: var(--wd-paper);
  color: var(--wd-ink);
  font-family: var(--wd-font-body);
  font-size: var(--wd-text-base);
  line-height: 1.65;
  /* Inter's defaults are designed for display sizes; these two settle it down
     for running text. */
  font-feature-settings: "cv05" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.wd-display {
  font-family: var(--wd-font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wd-ink);
}

h1 { font-size: var(--wd-h1); }
h2 { font-size: var(--wd-h2); }
h3 { font-size: var(--wd-h3); }

p, li { max-width: var(--wd-measure); }

a {
  color: var(--wd-brick);
  text-decoration-thickness: .5px;
  text-underline-offset: 0.25em;
  text-decoration: none;
}
a:hover { color: var(--wd-brick-hover); }

/* Numbers in tables — budgets, page eighths, day counts — must line up.
   Apply to any element showing figures in a column. */
.wd-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */

/* Button color knobs.
   Change these two lines and every button on the site follows. Do not add a
   `color:` further down the file to override a button — see the specificity
   note below for why that quietly fails. */
:root {
  --wd-btn-bg: var(--wd-gold);
  --wd-btn-bg-hover: var(--wd-gold-hover);
  --wd-btn-ink: var(--wd-gold-ink);   /* ← the text colour on a button */
}

/*
 * WHY EVERY LINK STATE IS SPELLED OUT HERE
 *
 * The Links block near the top of this file (from _s) contains:
 *
 *     a:visited { color: #be3c3c; }
 *     a:hover, a:focus, a:active { color: #be3c3c; }
 *
 * A pseudo-class selector like `a:visited` scores 0-1-1. A plain class like
 * `.wd-btn` scores 0-1-0. So `a:visited` BEATS `.wd-btn` no matter how far
 * down the file `.wd-btn` sits — writing `.wd-btn { color: white }` at the
 * very bottom still loses, which is exactly the "I can't override this"
 * dead end. Worse, it only shows up once you have actually visited the
 * target page, so the button looks right until it suddenly doesn't.
 *
 * Qualifying with the element — `a.wd-btn:visited` — scores 0-2-1 and wins
 * cleanly. No !important needed, and nothing about the Links block changes,
 * so ordinary links still behave.
 */
.wd-btn,
a.wd-btn,
a.wd-btn:link,
a.wd-btn:visited,
a.wd-btn:hover,
a.wd-btn:focus,
a.wd-btn:active,
button.wd-btn {
  display: inline-block;
  background: var(--wd-btn-bg);
  color: var(--wd-btn-ink);
  font-family: var(--wd-font-body);
  font-weight: 600;
  font-size: 18px;
  padding: 0.4em 1em;
  border-radius: 4px;
  border: 0;
  text-decoration: none;
}

.wd-btn-dark,
a.wd-btn-dark,
a.wd-btn-dark:link,
a.wd-btn-dark:visited,
a.wd-btn-dark:hover,
a.wd-btn-dark:focus,
a.wd-btn-dark:active,
button.wd-btn-dark {
  display: inline-block;
  background: #292929;
  color: #f9f8f4;
  font-family: var(--wd-font-body);
  font-weight: 600;
  font-size: 18px;
  padding: 0.4em 1em;
  border-radius: 4px;
  border: 0;
  text-decoration: none;
}

.wd-btn:hover,
a.wd-btn:hover,
a.wd-btn:focus,
button.wd-btn:hover {
  background: var(--wd-btn-bg-hover);
  color: var(--wd-btn-ink);
}

.wd-btn-quiet,
a.wd-btn-quiet,
a.wd-btn-quiet:link,
a.wd-btn-quiet:visited,
a.wd-btn-quiet:hover,
a.wd-btn-quiet:focus,
a.wd-btn-quiet:active {
  background: transparent;
  color: var(--wd-ink);
  border: 1px solid var(--wd-line-2);
}

.wd-btn-quiet:hover,
a.wd-btn-quiet:hover,
a.wd-btn-quiet:focus { border-color: var(--wd-ink); color: var(--wd-ink); }

/* Alternating bands are how a long marketing page gets rhythm without
   needing a border on every section. */
.wd-band { background: var(--wd-paper-2); }

.wd-card {
  background: #fff;
  border: 1px solid var(--wd-line);
  border-radius: 8px;
  padding: 1.5rem;
  /* No shadow. A border already says "distinct thing"; doing both muddies the
     edge and cools it against the warm background. Same rule as the app. */
}

/* --------------------------------------------------------------------------
   Dark hero
   -------------------------------------------------------------------------- */

.wd-hero {
  background: var(--wd-dark);
  color: var(--wd-dark-soft);
}
.wd-hero h1,
.wd-hero h2 { color: var(--wd-dark-ink); }

/* The one place gold is allowed to be type. This is the "Make Movies."
   treatment from the studio site. */
.wd-hero .wd-accent { color: var(--wd-gold); }

/* Over a production still, the overlay is what keeps the text legible — the
   measured ratios above assume a solid #121212 behind the words, and a photo
   is not that. */
.wd-hero--photo {
  background-size: cover;
  background-position: center;
  position: relative;
}
.wd-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.75) 45%,
    rgba(10, 10, 10, 0.35) 100%
  );
}
.wd-hero--photo > * { position: relative; }

/* --------------------------------------------------------------------------
   Focus — do not remove this without replacing it
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--wd-brick);
  outline-offset: 2px;
}
.wd-hero :focus-visible { outline-color: var(--wd-gold); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}






/*--------------------------------------------------------------
# Header and mega menu
#
# Merged in from mega-menu.css on 25 Sep 2026. One stylesheet, on
# purpose: the token block above (:root, line ~493) was ALSO living in a
# separate tokens.css that was enqueued alongside this file, so every
# value existed twice and whichever copy lost did so silently. There is
# now one definition of each token, in this file, and nothing else to
# keep in sync.
#
# The nav markup is hand-written in template-parts/nav-primary.php — no
# WordPress menus, no walker. Class names below match that file.
--------------------------------------------------------------*/

/* --------------------------------------------------------------------------
   Header shell
   -------------------------------------------------------------------------- */
.wd-header { position: relative; background: var(--wd-paper); border-bottom: 1px solid var(--wd-line); }
.wd-header__bar { width:100%; margin: 0 auto; padding: 0.75rem 1.27rem; display: flex; align-items: center; gap: 1.5rem; }
/* The logo is a link, so without this it inherits the global brick-red
   underlined link style and the site name reads as a stray hyperlink — which is
   exactly how it looked on the first render. */
.wd-header__logo { font-family: var(--wd-font-display); font-size: 1.15rem; font-weight: 700; line-height: 1; color: var(--wd-ink); text-decoration: none; }
.wd-header__logo:hover { color: var(--wd-ink); }
.wd-header__logo img, .wd-header__logo-img { display: block; height: 2.25rem; width: auto; max-width: 100%; padding-right: 25px; }
@media (max-width: 899px) { .wd-header__logo-img { height: 1.9rem; } }
/* Pushes the CTA to the far right, whatever the nav's width. */
.wd-header__cta { margin-left: auto; }
.wd-nav__list { list-style: none; margin: 0; padding: 0; }
/* Admin-only message from write_direct_app_no_menu(). Deliberately loud: it is
   only ever shown to someone who can fix it, and a quiet version defeats the
   purpose of having it at all. */
.wd-nav__notice { margin: 0; padding: 0.4rem 0.7rem; font-size: 0.8125rem; color: var(--wd-gold-ink); background: var(--wd-gold-wash); border: 1px dashed var(--wd-gold); border-radius: 5px; }

/* --------------------------------------------------------------------------
   Hamburger - This had NO styles, which is why nothing appeared on a narrow window: the
   button was there in the markup, with its label in a screen-reader-only span
   and its bars an empty <span> with no dimensions. An invisible zero-height
   button is indistinguishable from a missing menu.
   -------------------------------------------------------------------------- */
.wd-burger { margin-left: auto; padding: 0.5rem; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--wd-line-2); border-radius: 6px; cursor: pointer; color: var(--wd-ink); }
/* Three bars from one element: the middle is the box, the outer two are
   pseudo-elements offset above and below. */
.wd-burger__bars, .wd-burger__bars::before, .wd-burger__bars::after { display: block; width: 1.25rem; height: 2px; background: currentColor; border-radius: 2px; }
.wd-burger__bars { position: relative; }
.wd-burger__bars::before, .wd-burger__bars::after { content: ""; position: absolute; left: 0; }
.wd-burger__bars::before { top: -6px; }
.wd-burger__bars::after { top: 6px; }
/* Becomes an X while the menu is open. */
.wd-burger[aria-expanded="true"] .wd-burger__bars { background: transparent; }
.wd-burger[aria-expanded="true"] .wd-burger__bars::before { top: 0; transform: rotate(45deg); }
.wd-burger[aria-expanded="true"] .wd-burger__bars::after { top: 0; transform: rotate(-45deg); }
.wd-nav__link { display: flex; align-items: center; gap: 0.35rem; width: 100%; padding: 0.7rem 0; font-family: var(--wd-font-body); font-size: 16px; font-weight: 500; color: var(--wd-ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.wd-nav__link:link { color: var(--wd-ink); }
.wd-nav__link:visited { color: var(--wd-ink); }
.wd-nav__link:hover { color: var(--wd-brick); }
.wd-mega__chevron { width: 0.5em; height: 0.5em; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-0.1em, -0.1em); transition: transform 150ms ease; }
[aria-expanded="true"] .wd-mega__chevron { transform: rotate(-135deg) translate(-0.1em, -0.1em); }

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
/* Explicit, because a later display:grid would otherwise beat the `hidden`
   attribute's UA style and leave a "closed" panel on screen. */
.wd-mega__panel[hidden] { display: none; }
.wd-mega__inner { display: grid; gap: 1.5rem 2.5rem; padding: 0.5rem 0 1.5rem; }
/* The panel's own headline and one line of positioning.
   Worth the space: it tells somebody what this whole group IS before they
   start reading individual links, which a column of eyebrows alone cannot. */
.wd-mega__lead { margin: 0 0 1.75rem; max-width: 32rem; }
.wd-mega__lead-title { margin: 0; font-family: var(--wd-font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--wd-ink); }
.wd-mega__lead-desc { margin: 0.35rem 0 0; max-width: none; font-size: 0.9375rem; line-height: 1.5; color: var(--wd-ink-soft); }
/* The columns that sit under the lead. */
.wd-mega__cols { display: grid; gap: 1.75rem 2.5rem; }
/* The tinted column.
   A rounded card rather than a bleed to the right edge: the panel is
   max-width constrained, so a bleeding tint would stop at 72rem on a wide
   screen and read as a mistake rather than a device. */
.wd-mega__aside { background: var(--wd-paper-2); border-radius: 10px; padding: 1.5rem; align-self: start; }
.wd-mega__eyebrow { margin: 0 0 0.75rem; font-family: var(--wd-font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wd-ink-soft); }
.wd-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.wd-mega__link { display: flex; gap: 0.85rem; padding: 0.7rem 0.6rem; margin: 0 -0.6rem; border-radius: 6px; text-decoration: none; color: var(--wd-ink); }
/* Hover moves the TYPE, not the background.
   A background swap on a panel that already sits on white reads as a second
   surface appearing; colouring the title and underlining the description says
   "this is a link" using the same vocabulary as every other link on the site. */
.wd-mega__link:hover .wd-mega__title, .wd-mega__link:focus-visible .wd-mega__title { color: var(--wd-ink); }
.wd-mega__link:visited .wd-mega__title, .wd-mega__link:focus-visible .wd-mega__title { color: var(--wd-ink); }
.wd-mega__link:hover .wd-mega__desc, .wd-mega__link:focus-visible .wd-mega__desc { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.wd-mega__link:hover .wd-mega__icon { background: var(--wd-gold); border-color: var(--wd-gold); color: var(--wd-gold-ink); }
.wd-mega__link:visited .wd-mega__icon {color: var(--wd-ink); }
.wd-mega__text { display: block; max-width: none; }
.wd-mega__title { display: block; font-weight: 600; line-height: 1.3; }
.wd-mega__desc { display: block; margin-top: 0.2rem; font-size: 0.875rem; line-height: 1.45; color: var(--wd-ink-soft); max-width: 26rem; }
/* Icon tile.
   The SVG inside is stroke-only and inherits currentColor, so the whole tile
   inverts on hover with two property changes and no second asset. */
.wd-mega__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-top: 0.1rem; border: 1px solid var(--wd-line); border-radius: 7px; background: var(--wd-gold-wash); color: var(--wd-gold-700); }
.wd-mega__icon svg { width: 1.05rem; height: 1.05rem; display: block; }
/* --------------------------------------------------------------------------
   Mobile — accordion (base state)
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .wd-nav { display: none; width: 100%; }
    .wd-nav.is-open { display: block; }
    .wd-nav__item { border-bottom: 1px solid var(--wd-line); }
    .wd-mega__panel { padding-left: 0.75rem; border-left: 2px solid var(--wd-gold); margin-bottom: 1rem; }
    .wd-header__bar { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   Desktop — full-bleed panel
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    [data-wd-nav-toggle] { display: none; }
    .wd-nav__list { display: flex; align-items: center; gap: 1.75rem; }
    /* static so the absolutely-positioned panel resolves against .wd-header
       and can span the full width rather than the width of one menu item */
    .wd-nav__item { position: static; }
    .wd-nav__link { width: auto; padding: 1rem 0; }
    .wd-mega__chevron { margin-left: 0.15rem; }
    .wd-mega__panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: #fff; border-top: 1px solid var(--wd-line); border-bottom: 1px solid var(--wd-line-2); box-shadow: 0 12px 28px rgba(26, 26, 26, 0.08); }
    /* Two regions: the main block (lead + columns) and the tinted aside.
       Not auto-fit columns any more — the aside has to be a known, fixed-ish
       region for the tint to make sense, and auto-fit would let it drift into
       the middle of the panel at some widths. */
    .wd-mega__inner { max-width: var(--wd-wide); margin: 0 auto; padding: 2.25rem 1.25rem 2.5rem; grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; gap: 2rem 3rem; }
    .wd-mega__cols { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
    /* A panel with no aside gets the full width rather than a 19rem hole. */
    .wd-mega__inner:not(:has(.wd-mega__aside)) { grid-template-columns: minmax(0, 1fr); }
    @media (prefers-reduced-motion: no-preference) {
        .wd-mega__panel { animation: wd-mega-in 140ms ease-out; }
        @keyframes wd-mega-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    }
}

/*--------------------------------------------------------------
# Join page (page-join.php)
#
# The bridge to registration on writedirect.studio. One decision on
# screen — the role dropdown — because every extra field here is a
# chance to change your mind before checkout.
--------------------------------------------------------------*/
.wd-join__inner { max-width: var(--wd-wide); margin: 0 auto; padding: 4rem 1.25rem 5rem; }
.wd-join__head { max-width: 40rem; margin-bottom: 2.75rem; }
/* "Free to join" is the strongest word available and it was previously
   invisible — buried behind five cart links. It leads. */
.wd-join__eyebrow { display: inline-block; margin: 0 0 0.9rem; padding: 0.3rem 0.7rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wd-gold-ink); background: var(--wd-gold); border-radius: 999px; }
.wd-join__title { margin: 0; font-family: var(--wd-font-display); font-size: var(--wd-h1); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: var(--wd-ink); }
.wd-join__lead { margin: 1rem 0 0; max-width: 36rem; font-size: var(--wd-text-lg); line-height: 1.55; color: var(--wd-ink-soft); }
.wd-join__cols { display: grid; gap: 2rem; }
.wd-join__form { background: #fff; border: 1px solid var(--wd-line-2); border-radius: 12px; padding: 1.75rem; }
.wd-join__label { display: block; margin-bottom: 0.55rem; font-weight: 600; font-size: var(--wd-text-base); color: var(--wd-ink); }
.wd-join__select { display: block; width: 100%; padding: 0.8rem 0.9rem; font-family: var(--wd-font-body); font-size: var(--wd-text-base); color: var(--wd-ink); background: var(--wd-paper); border: 1px solid var(--wd-line-2); border-radius: 7px; }
.wd-join__select:focus-visible { outline: 2px solid var(--wd-brick); outline-offset: 2px; }
.wd-join__hint { margin: 0.75rem 0 0; max-width: none; font-size: 0.875rem; line-height: 1.5; color: var(--wd-ink-soft); }
.wd-join__submit { display: block; width: 100%; margin-top: 1.5rem; text-align: center; font-size: var(--wd-text-base); cursor: pointer; }
.wd-join__note { margin: 0.9rem 0 0; max-width: none; font-size: 0.8125rem; line-height: 1.5; color: var(--wd-ink-soft); }
.wd-join__aside { background: var(--wd-paper-2); border-radius: 12px; padding: 1.75rem; align-self: start; }
.wd-join__list { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.wd-join__list li { max-width: none; font-size: 0.9375rem; line-height: 1.5; color: var(--wd-ink-soft); padding-left: 1.4rem; position: relative; }
.wd-join__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--wd-gold); }
.wd-join__list strong { color: var(--wd-ink); font-weight: 600; }
.wd-join__extra { margin-top: 3rem; }
@media (min-width: 900px) { .wd-join__cols { grid-template-columns: minmax(0, 1fr) 22rem; gap: 3rem; } }
/* --------------------------------------------------------------------------
   Header actions — Sign in + Join free

   These live INSIDE <nav class="wd-nav"> in header.php, which is what lets
   them fold into the burger menu on a phone rather than crowding the bar.
   One copy of the markup; the rules below decide where it lands.

   Two fixes went in here at the same time, both silent failures:

   1. A stray apostrophe was left at the end of the :visited rule. CSS
      treats a lone quote as the start of a string and swallows everything
      up to the next one — which ate the :hover rule directly below it. The
      hover colour simply never applied, with no error anywhere.

   2. `.wd-header__actions:link` can never match: :link only applies to
      anchors with an href, and .wd-header__actions is a <div>. It was
      meant to be .wd-header__signin.
   -------------------------------------------------------------------------- */

.wd-header__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* :link and :visited spelled out for the same reason the buttons need it —
   the _s Links block's `a:visited` (0-1-1) outranks a bare class (0-1-0), so
   this would turn brick red once you'd visited the dashboard. */
.wd-header__signin,
a.wd-header__signin:link,
a.wd-header__signin:visited {
    font-size: 16px;
    font-weight: 500;
    color: var(--wd-ink);
    text-decoration: none;
    white-space: nowrap;
}

a.wd-header__signin:hover,
a.wd-header__signin:focus { color: var(--wd-brick); }

/* --- Mobile: stacked at the foot of the open menu ----------------------- */
@media (max-width: 899px) {
    .wd-header__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1.25rem 0 0.5rem;
    }

    /* Sign in reads as one more menu row, so it gets the menu's rhythm. */
    .wd-header__signin,
    a.wd-header__signin:link,
    a.wd-header__signin:visited {
        padding: 0.7rem 0;
        font-size: var(--wd-text-base);
    }

    /* Full width, and last — the thing you most want tapped sits where the
       thumb already is. */
    .wd-header__cta {
        display: block;
        text-align: center;
        margin: 0;
    }
}

/* --- Desktop: right-aligned row on the bar ------------------------------ */
@media (min-width: 900px) {
    /* The nav now holds both the list and the actions, so it has to be the
       flex row that separates them — and it has to grow, or margin-left:auto
       has no space to push into. */
    .wd-nav {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .wd-header__actions { margin-left: auto; }
    .wd-header__cta { margin-left: 0; }
}


/* =============================================================================
   Home
   ========================================================================== */
.home-main{margin:0 auto;text-align:center;padding:74px 250px 34px 250px;}
.home-one{font-family: "Lora", serif;font-optical-sizing: auto;font-style: normal;font-size:13px;}
.home-two h1{font-family: "Lora", serif;font-optical-sizing: auto;font-style: normal;line-height:1.2;font-weight:700;padding:20px 0;}
.home-three{font-family: "Lora", serif;font-optical-sizing: auto;font-style: normal;font-size:17px;max-width:740px;margin:0 auto;}
.home-four{font-family: "Lora", serif;font-optical-sizing: auto;font-style: normal;font-size:12px;}
.home-button-one{border-radius:3px;background:#1a1a1a;color:#fff;display:inline-flex;padding:7px 18px;margin:15px 0;font-weight:600;}

.home-block{padding:34px 50px 34px 50px;display:flex;justify-content: space-between;background:#F4F2EB;}
.home-block-switch{padding:34px 50px 34px 50px;display:flex;flex-direction:row-reverse;justify-content: space-between;background:#F4F2EB;}
.home-block-small-title{font-family: "Lora", serif;font-optical-sizing: auto;font-style: normal;font-size:15px;}
.home-block-description{flex:0 1 35%;padding:34px 0;}
.home-block-media{flex:0 1 60%;}
.home-block-media img {border: 1px solid var(--wd-line-2);border-radius: 12px;}
h2.home-block-title{font-family: "Lora", serif;font-optical-sizing: auto;font-style: normal;line-height:1.2;font-weight:700;font-size:34px;padding:19px 0 9px;margin:0;}
.home-block-text{font-family: "Lora", serif;font-optical-sizing: auto;font-style: normal;font-size:17px;max-width:740px;margin:0 auto;}
.home-block-button-one{border-radius:3px;background:#1a1a1a;color:#fff;display:inline-flex;padding:7px 18px;margin:15px 0;font-weight:600;}
.home-block-radius img {border-radius:11px 11px 11px 11px;border:.5px solid #E7E2D9;}


/* =============================================================================
   Sub Page - Features
   ========================================================================== */
.features-block{margin:0 auto;text-align:center;padding:74px 250px 0 250px;}
.features-white{background:#fff;border-top: 1px solid var(--wd-line);padding-bottom:47px;}
.features-one{font-family: "Lora", serif;font-optical-sizing: auto;font-style: normal;font-size:15px;}
h1.features-two{font-family: "Lora", serif;font-optical-sizing: auto;font-style: normal;line-height:1.2;font-weight:700;font-size:47px;padding:20px 74px;margin:0;}
h2.features-two{font-family: "Lora", serif;font-optical-sizing: auto;font-style: normal;line-height:1.2;font-weight:700;font-size:34px;padding:20px 0;margin:0;}
.features-three{font-family: "Lora", serif;font-optical-sizing: auto;font-style: normal;font-size:17px;max-width:740px;margin:0 auto;}
.features-four{font-family: "Lora", serif;font-optical-sizing: auto;font-style: normal;font-size:12px;}
.features-button-one{border-radius:3px;background:#1a1a1a;color:#fff;display:inline-flex;padding:7px 18px;margin:15px 0;font-weight:600;}
.features-image{padding:25px 0 0 0;margin:0 0 -8px 0;}
.features-radius img {border-radius:11px 11px 11px 11px;border:.5px solid #E7E2D9;}



/*--------------------------------------------------------------
# Home showcase — tabs that swap a screenshot
# Markup: template-parts/home-showcase.php   Behaviour: js/showcase.js
--------------------------------------------------------------*/

/* 100px of side padding is a desktop number. It was never reduced at any
   breakpoint, so on a 320px phone it ate 200px of a 320px screen and left
   the tab strip 88px wide — one clipped pill, with the scrollbar hidden, so
   it read as "the tabs vanished". Measured, not guessed. */
.wd-showcase-container{width:100%;padding:34px 100px;background:#fff;}
@media screen and (max-width: 1200px) { .wd-showcase-container{padding:34px 50px;} }
@media screen and (max-width: 900px)  { .wd-showcase-container{padding:28px 30px;} }
@media screen and (max-width: 650px)  { .wd-showcase-container{padding:24px 16px;} }

.wd-showcase {
   max-width: var(--wd-wide);
   margin: 0 auto;
   padding: 3rem 1.25rem 4rem;
   background:#fff;
   box-sizing: border-box;
}

/* --- the tab strip --- */

.wd-showcase__tabs {
   display: flex;
   gap: 0.4rem;
   margin-bottom: 1.5rem;
   padding-bottom: 0.25rem;
   /* THEY WRAP. THEY USED TO SCROLL, AND THAT WAS THE BUG.
      The original note here argued a sideways scroll beat "a ragged two-line
      block" — a reasonable call at desktop width, and wrong on a phone. Nine
      pills need 949px; no phone has that, so the strip always scrolled, and
      scrollbar-width:none meant nothing on screen said so. The result looked
      exactly like the tabs had disappeared.
      A wrapped block needs no gesture and no affordance: every tab is
      visible and reachable at any width. On a wide screen they still sit on
      one line, so nothing is lost where the old behaviour was fine. */
   flex-wrap: wrap;
}

.wd-showcase__tab {
   flex: 0 0 auto;
   padding: 0.6rem 1.1rem;
   font-family: var(--wd-font-body);
   font-size: 0.9375rem;
   font-weight: 600;
   line-height: 1.2;
   color: var(--wd-ink-soft);
   background: transparent;
   border: 1px solid transparent;
   border-radius: 25px;
   cursor: pointer;
   white-space: nowrap;
}

.wd-showcase__tab:hover { color: var(--wd-ink); background: var(--wd-paper-2); }

/* The selected tab is the gold pill. Driven off aria-selected, not a class —
   so the styling cannot disagree with what a screen reader is told. */
.wd-showcase__tab[aria-selected="true"] {
   color: var(--wd-gold-ink);
   background: var(--wd-gold);
   border-color: var(--wd-gold);
   border-radius:25px;
}

.wd-showcase__tab:focus-visible {
   outline: 2px solid var(--wd-brick);
   outline-offset: 2px;
}

/* --- the panel --- */

.wd-showcase__panel[hidden] { display: none; }

.wd-showcase__panel:focus-visible {
   outline: 2px solid var(--wd-brick);
   outline-offset: 4px;
   border-radius: 12px;
}

.wd-showcase__figure { margin: 0; }

/* aspect-ratio reserves the space before the image arrives. Together with
   width/height on the <img>, this is what stops the hero copy above from
   jumping when a screenshot loads — and stops it jumping AGAIN each time a
   tab is opened for the first time. Change to match your exports. */
.wd-showcase__img {
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 16 / 10;
   object-fit: cover;
   object-position: top center;
   background: var(--wd-paper-2);
   border: 1px solid var(--wd-line-2);
   border-radius: 12px;
   /* Screenshots are the one thing on this site genuinely floating above the
      page, same exception the mega panel gets. */
   box-shadow: 0 16px 36px rgba(26, 26, 26, 0.10);
}

.wd-showcase__note {
   margin: 1rem auto;
   max-width: 44rem;
   text-align: center;
   font-size: 0.8rem;
   line-height: 1.55;
   color: var(--wd-ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
   .wd-showcase__panel:not([hidden]) { animation: wd-showcase-in 180ms ease-out; }
   @keyframes wd-showcase-in {
      from { opacity: 0; }
      to   { opacity: 1; }
   }
}

@media (max-width: 599px) {
   .wd-showcase { padding: 2rem 1rem 3rem; }
   .wd-showcase__tab { padding: 0.5rem 0.9rem; font-size: 0.875rem; }
   .wd-showcase__note { text-align: left; }
}


/* =============================================================================
   Footer Header & Footer
   ========================================================================== */
.footer-header { background:#ECB612;padding:65px 25px 56px 25px; }
.footer-header-text { width:70%;margin:0 auto;font-size:18px;text-align:center; }
.footer-header-text h3 { font-size:29px;font-weight:800;line-height:1.3; }
.footer-header-button { background:#000;padding:14px 25px 12px 25px;color:#ECB612;margin:0 0 17px 0;display:inline-block;border-radius: 3px; }

/* footer */
.footer-bottom { background:#0f0f0f;padding:74px 125px 47px 125px; }
.footer-bottom h3 { padding:0 0 7px 0;font-size:18px;color:#ddd; }
.footer-bottom p { font-size:15px;color:#ddd;line-height:1.2; }
p.footer-paragraph {line-height:1.4;}
.footer-bottom a:link { color:#ddd; }
.footer-bottom a:hover { color:#fff; }
.footer-bottom a:visited { color:#ddd; }
.footer-bottom-1 { margin:0 auto;display:flex;justify-content: space-between;border-bottom:1px solid #292929;padding:0 0 47px 0; }
.footer-bottom-col-1, .footer-bottom-col-2 { flex:0 1 30%;padding-right:50px; }
.footer-bottom-col-3 { flex:0 1 35%; }
.footer-bottom-col-3 .ff_t_c { font-size:13px;color:#ddd; }
.footer-bottom-2 { padding:22px 0 11px 0;margin:0 auto;display:flex;justify-content: space-between;font-size:12px; }
.fl-left { flex:0 1 30%;display:flex;justify-content:flex-start;}
.fl-right { flex:0 1 45%;display:flex;justify-content: flex-end; }
.fl-middle { flex:0 1 20%;display:flex;justify-content:center; }
.fl-left-icon img { width:22px;margin:0 15px 0 0; }
.fl-left-text { margin:1px 7px 0 0;color:#ddd; }
.fl-middle-text { margin:1px 11px 0 11px;color:#ddd; }
.fl-right-text { margin:1px 0 0 22px;color:#ddd; }
.fl-right-text a:link { text-decoration: underline;color:#ddd; }
.fl-right-text a:hover { text-decoration: underline;color:#ddd; }
.fl-right-text a:visited { text-decoration: underline;color:#ddd; }

/* footer fluent form */
/* Frosted inputs */
.fluentform_wrapper_2 .ff-el-form-control { width:100%;height:52px !important;box-sizing:border-box;padding:17px 17px !important;font-size:16px;color:#fff !important;background:rgba(255,255,255,0.09) !important;border:1px solid rgba(255,255,255,0.14) !important;border-radius:11px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);outline:none;transition:background 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease; }
.fluentform_wrapper_2 .ff-el-form-control:focus { background:rgba(255,255,255,0.13) !important;border-color:rgba(255,255,255,0.26) !important;box-shadow:0 0 0 3px rgba(255,255,255,0.07),0 4px 20px rgba(0,0,0,0.15) !important; }
/* fixes Chrome's autofill rules */
.fluentform_wrapper_2 .ff-el-form-control:-webkit-autofill, .fluentform_wrapper_8 .ff-el-form-control:-webkit-autofill:focus { -webkit-text-fill-color:#fff !important;transition:background-color 99999s ease-in-out 0s; }
/* "Light up" on focus */
.fluentform_wrapper_2 .ff-el-form-control:focus { background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.65);box-shadow:0 0 0 3px rgba(255,255,255,0.15),0 4px 24px rgba(0,0,0,0.18); }
/* Submit button */
.fluentform_wrapper_2 .ff-btn-submit { width:100%;padding:1rem;font-size:15px;font-weight:600;letter-spacing:0.02em;color:#fff;background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.28);border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:background 0.3s ease,border-color 0.3s ease; }
.fluentform_wrapper_2 .ff-btn-submit:hover { background:rgba(255,255,255,0.26);border-color:rgba(255,255,255,0.55); }
/* GDPR checkbox + text */
.fluentform_wrapper_2 .ff_t_c { color:rgba(255,255,255,0.85);font-size:14px; }
.fluentform_wrapper_2 .ff_gdpr_field { accent-color:#ECB612;width:17px;height:17px; }
/* Trailing "guarantee" line + link */
.fluentform_wrapper_2 p { color:rgba(255,255,255,0.8); }
.fluentform_wrapper_2 p a { color:#ECB612 !important; }




/* ═══════════════════════════════════════════════════════════════════════
   CONTACT PAGE
   rev 2026-08-02h  ·  append to style.css

   Replaces the .contact-page / .contact-left / .contact-right rules at
   L618-622 and their mobile pair at L3169-3170. Delete those first — the
   old 250px bottom padding is what left half the screen empty.
   ═══════════════════════════════════════════════════════════════════════ */

.contact-page {
  --ct-gold: #ECB612;
  --ct-ink: #1a1a1a;
  --ct-panel: #232323;
  --ct-line: #383431;
  --ct-body: #cfcabd;
  --ct-soft: #948f84;

  display: flex;
  gap: 64px;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 78px 100px 96px;
  background: var(--ct-ink);
}

.contact-left { flex: 1 1 44%; padding: 0; max-width: 520px; }
.contact-right { flex: 1 1 52%; padding: 0; min-width: 0; }

/* ── Left column ───────────────────────────────────────────────────────── */

.contact-left h1 {
  color: #fff;
  font-size: 46px;
  margin: 0 0 18px;
  padding: 0;
}

.contact-lede {
  color: var(--ct-body);
  font-size: 17.5px;
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 46ch;
}

.contact-lede strong { color: #fff; font-weight: 600; }

.contact-reply {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: #e0dbcd;
  background: rgba(236, 182, 18, .1);
  border: 1px solid rgba(236, 182, 18, .28);
  border-radius: 100px;
  padding: 7px 16px 7px 13px;
  margin: 0 0 40px;
}

.contact-reply-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ct-gold);
  flex: 0 0 7px;
}

/* ── Details ───────────────────────────────────────────────────────────── */

.contact-details { border-top: 1px solid var(--ct-line); padding-top: 28px; }

/* The old <h3> here inherited color:#232323 from the global rule and
   disappeared into the background. This class sets its own colour. */
.contact-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ct-gold);
  margin: 0 0 20px;
  padding: 0;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 22px;
}

.contact-row:last-child { margin-bottom: 0; }

.contact-ico {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ct-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ct-gold);
}

.contact-text {
  display: block;
  color: var(--ct-body);
  font-size: 16px;
  line-height: 1.55;
  padding-top: 2px;
}

.contact-text strong {
  display: block;
  color: #fff;
  font-weight: 600;
  margin-bottom: 2px;
}

.contact-text a { color: var(--ct-body); text-decoration: none; border-bottom: 1px solid var(--ct-line); }
.contact-text a:hover { color: var(--ct-gold); border-bottom-color: var(--ct-gold); }

/* ── Form panel ────────────────────────────────────────────────────────── */

.contact-form-panel {
  background: var(--ct-panel);
  border: 1px solid var(--ct-line);
  border-radius: 8px;
  padding: 34px 36px 30px;
}

.contact-form-title {
  color: #fff;
  font-size: 25px;
  margin: 0 0 10px;
  padding: 0;
}

.contact-route {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ct-soft);
  margin: 0 0 26px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--ct-line);
}

.contact-route a { color: #d8d2c4; text-decoration: underline; text-underline-offset: 2px; }
.contact-route a:hover { color: var(--ct-gold); }

/* ── The form itself (Fluent Forms markup lives in the_content) ───────── */

.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel input[type="tel"],
.contact-form-panel textarea {
  background: #2c2c2c;
  border: 1px solid #3f3b37;
  border-radius: 6px;
  color: #f0ece2;
  font-size: 16px;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.contact-form-panel input::placeholder,
.contact-form-panel textarea::placeholder { color: #8b867c; }

.contact-form-panel input[type="text"]:focus,
.contact-form-panel input[type="email"]:focus,
.contact-form-panel input[type="tel"]:focus,
.contact-form-panel textarea:focus {
  border-color: var(--ct-gold);
  box-shadow: 0 0 0 3px rgba(236, 182, 18, .16);
  outline: none;
}

.contact-form-panel button[type="submit"],
.contact-form-panel input[type="submit"] {
  background: var(--ct-gold);
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  padding: 14px 28px;
  cursor: pointer;
  transition: background .12s ease;
}

.contact-form-panel button[type="submit"]:hover,
.contact-form-panel input[type="submit"]:hover { background: #f5c525; }

/* ── Narrow screens ────────────────────────────────────────────────────── */

@media screen and (max-width: 1100px) {
  .contact-page { padding: 54px 47px 64px; gap: 44px; }
  .contact-left h1 { font-size: 38px; }
}

@media screen and (max-width: 900px) {

  .contact-page { flex-direction: column; padding: 40px 22px 56px; gap: 36px; }

  .contact-left,
  .contact-right { flex: 1 1 100%; max-width: 100%; width: 100%; }

  .contact-left h1 { font-size: 33px; }
  .contact-reply { margin-bottom: 30px; }
  .contact-form-panel { padding: 26px 20px 24px; }
}




/* -----------------------------------------
   Media Queries Specific to Profile and Profile Admin and Theater
----------------------------------------- */
/*** 1600px ***/
@media screen and (max-width: 1600px) {
}
/*** 1450px ***/
@media screen and (max-width: 1450px) {
}
/*** 1400px ***/
@media screen and (max-width: 1400px) {
 .home-main, .features-block {padding:74px 150px 34px 150px;}
}
/*** 1300px ***/
@media screen and (max-width: 1300px) {
    /* footer */
  .footer-bottom-2 { flex-direction: column;justify-content: center; }
  .fl-left, .fl-middle, .fl-right { flex:0 1 100%;justify-content: center;text-align: center;padding:11px 0 11px 0; }  
}
/*** 1200px ***/
@media screen and (max-width: 1200px) {  
   .home-main, .features-block {padding:74px 50px 34px 50px;}
}
/*** 1100px ***/
@media screen and (max-width: 1100px) {
 
/* home */
.home-block{flex-direction: column;}
.home-block-description{flex:0 1 100%;}
.home-block-media{flex:0 1 100%;}

/* footer */
.footer-bottom { padding:74px 74px 47px 74px; }
.footer-bottom-1 { flex-wrap:wrap; }
.footer-bottom-col-1, .footer-bottom-col-2 { flex:0 1 50%; }
.footer-bottom-col-3 { flex:0 1 100%;padding:25px 0 0 0; }
 
}
/*** 1000px ***/
@media screen and (max-width: 1000px) {
 
}
/*** 965px ***/
@media screen and (max-width: 965px) {
}

/*** 950px ***/
@media screen and (max-width: 950px) {
  
}
/*** 900px ***/
@media screen and (max-width: 900px) {
h1.features-two{padding:20px 0;}  
}

/*** 850px ***/
@media screen and (max-width: 850px) {
 
}

/*** 800px ***/
@media screen and (max-width: 800px) {

}

/*** 768px ***/
@media screen and (max-width: 768px) {
  
}
/*** 750px ***/
@media screen and (max-width: 750px) {
  
}
/*** 700px ***/
@media screen and (max-width: 700px) {
 
}
/*** 650px ***/
@media screen and (max-width: 650px) {

.home-main, .features-block {padding:74px 30px 34px 30px;}

.footer-header-text { width:90%; }
.footer-bottom-1 { flex-direction: column; }
.footer-bottom-col-1, .footer-bottom-col-2, .footer-bottom-col-3 { flex:0 1 100%; }
  
}
/*** 600px ***/
@media screen and (max-width: 600px) {
  
}

/*** 500px ***/
@media screen and (max-width: 500px) {
  h1 { font-size:40px; }
  h2 { font-size:34px;line-height:1.2;padding:18px 0 11px 0;font-weight:700; }
  h3 { font-size:23px; }
  blockquote { font-size: 25px; }
   /* footer */
  .footer-bottom { padding:74px 25px 47px 25px; }
  .footer-bottom-2 { justify-content:flex-start; }
  
}
/*** 465px ***/
@media screen and (max-width: 465px) {
  
  .footer-bottom { padding:74px 25px 47px 15px; }
}

/*** 400px ***/
@media screen and (max-width: 400px) {
}

/*** 320px ***/
@media screen and (max-width: 320px) {
}