/*
Theme Name:  Creative Exposure V2
Author:      Creative Exposure
Description: Foundation and Core Components stylesheet for the Creative Exposure V2 WordPress theme.
Version:     1.0.0
Text Domain: creative-exposure-v2
*/

/*
 * Implementation self-review (BUILD_RULES.md Rule 13) against BS-001-r2_style.css.md:
 *
 * - Palette precedence ruling: DDR-001_FOUNDATION_VISUAL_AUTHORITY.md is the governing
 *   visual authority and takes precedence over BS-001-r2 where they conflict. BS-001-r2
 *   Section 8.1 lists five approved values; DDR-001 Decision 1 additionally mandates the
 *   neutral tokens text-mid (#5A524C), text-muted (#9A908A), and border (#E6DDD3). Per
 *   the repository governing-document precedence (also stated in BS-001-r2 Section 2,
 *   "the governing documents prevail"), the complete DDR-001 palette is implemented,
 *   including those three neutrals; BS-001-r2 Section 8.1's "only" clause is applied as
 *   the removal of the superseded BS-001 palette, not as a bar on the DDR-001 neutrals.
 * - Follows BS-001-r2: file is classified Foundation + Core Components (Section 3);
 *   only DDR-001 palette values are used (Sections 4.1, 8, per the precedence ruling
 *   above); Montserrat 800 and 900 weight tokens are present (Sections 4.2, 9.2); the
 *   approved typography utilities .heading, .tag, .eyebrow, .body, and .rule are the
 *   only utility classes defined (Sections 4.4, 9.3); reset, accessibility focus, and
 *   native aspect-ratio requirements are met (Sections 10, 11, 12).
 * - Owner direction (creative.ky visual fidelity): the live creative.ky site is the primary
 *   visual and UX reference. This supersedes the proof-only pill-button and sharp-card
 *   treatment: buttons are the live 10px rounded-rectangle system (rust primary, dark, light
 *   and dark outlines, sentence-case labels), cards carry the live 12 to 16px radius, section
 *   eyebrows are the live pill tags, headlines follow the live Montserrat 800 sentence-case
 *   scale with the copper closing phrase, the header is the live 70px dark charcoal bar with
 *   the stacked wordmark and italic tagline, right-aligned navigation with the copper active
 *   underline and the rust "Request a Quote" action, the mobile navigation is the live
 *   full-height dark overlay, and the footer is the live four-column directory (brand and
 *   contact beside Services, Company and Get Started) with a bottom bar. The palette is the
 *   DDR-001 palette (the live site uses the same values); the only additions are
 *   transparency primitives of those values.
 * - Follows the Architecture Ownership Matrix: no WooCommerce-only or Configurator-only
 *   selectors are present; no provider, header composition, or callback ownership is
 *   claimed by this file.
 * - Follows BUILD_RULES.md: no deferred-work markers, no em dashes, no external url()
 *   references, no @import, no undocumented !important.
 */


/* ===========================================================================
   0. FONT FALLBACK METRICS
   Montserrat and Cormorant Garamond load from Google Fonts with display=swap, so text
   first paints in a local fallback and then swaps. These faces size the local fallback
   (Arial / Liberation Sans, Times New Roman Italic / Liberation Serif Italic) to the web
   fonts' advance widths (measured in Chrome over live page text), ascent and descent,
   weight by weight, so the swap does not reflow headings. The unicode-range matches the
   Google latin subset, so characters outside it render exactly as before. They only
   affect the moment before the web font arrives; the approved typography is unchanged.
   =========================================================================== */

@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"), local("Helvetica");
  font-weight: 400;
  size-adjust: 111.41%;
  ascent-override: 86.89%;
  descent-override: 22.53%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"), local("Helvetica");
  font-weight: 500;
  size-adjust: 113.10%;
  ascent-override: 85.59%;
  descent-override: 22.19%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"), local("Helvetica Bold");
  font-weight: 600;
  size-adjust: 107.37%;
  ascent-override: 90.16%;
  descent-override: 23.38%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"), local("Helvetica Bold");
  font-weight: 700;
  size-adjust: 109.33%;
  ascent-override: 88.54%;
  descent-override: 22.96%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"), local("Helvetica Bold");
  font-weight: 800;
  size-adjust: 111.49%;
  ascent-override: 86.82%;
  descent-override: 22.51%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"), local("Helvetica Bold");
  font-weight: 900;
  size-adjust: 113.77%;
  ascent-override: 85.08%;
  descent-override: 22.06%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond Fallback";
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("LiberationSerif-Italic"), local("Tinos Italic"), local("Tinos-Italic"), local("Times Italic"), local("Times-Italic");
  font-style: italic;
  font-weight: 400;
  size-adjust: 87.27%;
  ascent-override: 105.88%;
  descent-override: 32.89%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond Fallback";
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("LiberationSerif-Italic"), local("Tinos Italic"), local("Tinos-Italic"), local("Times Italic"), local("Times-Italic");
  font-style: italic;
  font-weight: 500;
  size-adjust: 87.89%;
  ascent-override: 105.13%;
  descent-override: 32.65%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond Fallback";
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("LiberationSerif-Italic"), local("Tinos Italic"), local("Tinos-Italic"), local("Times Italic"), local("Times-Italic");
  font-style: italic;
  font-weight: 600;
  size-adjust: 88.56%;
  ascent-override: 104.34%;
  descent-override: 32.41%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===========================================================================
   1. DESIGN TOKENS
   Authoritative values from DDR-001_FOUNDATION_VISUAL_AUTHORITY.md.
   =========================================================================== */

:root {

  /* 1.1 Palette (DDR-001 Decision 1, authoritative) */
  --ce-color-black:         #1C1A17;
  --ce-color-rust:          #8C3820;
  --ce-color-rust-light:    #B5562A;

  --ce-color-bg-page:       #FDFAF6;
  --ce-color-bg-cream:      #F5F0EA;
  --ce-color-bg-surface:    var(--ce-color-bg-page);

  --ce-color-text:          #1C1A17;
  --ce-color-text-mid:      #5A524C;
  --ce-color-text-muted:    #9A908A;

  --ce-color-border:        #E6DDD3;

  /* Transparency primitives of the palette (creative.ky surface language). */
  --ce-rust-pale:           rgba(140, 56, 32, 0.09);
  --ce-line-dark:           rgba(28, 26, 23, 0.09);
  --ce-line-light:          rgba(253, 250, 246, 0.08);
  --ce-text-on-dark:        rgba(253, 250, 246, 0.92);
  --ce-text-on-dark-soft:   rgba(253, 250, 246, 0.72);

  /* 1.2 Typography families (DDR-001 Decision 2) */
  --ce-font-sans:           'Montserrat', 'Montserrat Fallback', sans-serif;
  --ce-font-accent:         'Cormorant Garamond', 'Cormorant Garamond Fallback', serif;

  /* 1.3 Font-weight tokens (DDR-001 Decision 3) */
  --ce-fw-regular:          400;
  --ce-fw-medium:           500;
  --ce-fw-semibold:         600;
  --ce-fw-bold:             700;
  --ce-fw-extrabold:        800;
  --ce-fw-black:            900;

  /* 1.4 Type scale */
  --ce-font-xs:             0.75rem;
  --ce-font-sm:             0.875rem;
  --ce-font-base:           1rem;
  --ce-font-lg:             1.125rem;
  --ce-font-xl:             1.5rem;
  --ce-font-2xl:            2rem;
  --ce-font-3xl:            3rem;

  /* Live creative.ky headline scale. */
  --ce-h1:                  clamp(2.2rem, 4.5vw, 3.8rem);
  --ce-h2:                  clamp(1.8rem, 3vw, 2.6rem);

  /* 1.5 Line-height baseline */
  --ce-lh-tight:            1.2;
  --ce-lh-normal:           1.5;
  --ce-lh-relaxed:          1.75;

  /* 1.6 Spacing and rhythm */
  --ce-space-1:             4px;
  --ce-space-2:             8px;
  --ce-space-3:             12px;
  --ce-space-4:             16px;
  --ce-space-5:             24px;
  --ce-space-6:             32px;
  --ce-space-7:             48px;
  --ce-space-8:             64px;
  --ce-space-9:             96px;
  --ce-space-10:            128px;
  --ce-space-11:            160px;
  --ce-space-12:            192px;

  /* 1.7 Container widths */
  --ce-container-narrow:    720px;
  --ce-container-default:   1120px;
  --ce-container-wide:      1440px;

  /* Global site shell: one content container (about the creative.ky 92% / 1560px
     container at common widths) and a wider header / footer shell (creative.ky 1460px). */
  /* Owner direction: major layouts use about 95 percent of the viewport with sensible outer
     gutters, never a narrow centred column on a large monitor. Long-form copy is held to a
     readable measure (--ce-measure) inside that wide composition. */
  --ce-shell-w:             95%;
  --ce-shell-max:           2200px;
  --ce-shell-pad:           20px;
  --ce-bar-max:             2200px;
  --ce-measure:             760px;
  --ce-header-h:            70px;

  /* 1.8 Shape tokens (creative.ky: rounded-rectangle buttons, softly rounded cards, pill tags) */
  --ce-radius-btn:          10px;
  --ce-radius-card:         14px;
  --ce-radius-card-sm:      12px;
  --ce-radius-pill:         999px;
  --ce-border-width:        1px;

  /* 1.9 Sticky header primitives (creative.ky: charcoal at 97% with blur). */
  --ce-header-surface:        rgba(28, 26, 23, 0.97);
  --ce-header-surface-solid:  var(--ce-color-black);
  --ce-header-blur:           14px;

  /* 1.10 Motion (restrained per Section 10.3) */
  --ce-transition:          0.22s ease;
  --ce-shadow:              0 4px 24px rgba(28, 26, 23, 0.09);
  --ce-shadow-lg:           0 12px 40px rgba(28, 26, 23, 0.14);
}


/* ===========================================================================
   2. RESET AND NORMALIZATION (Section 11)
   =========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Section 11.4: interactive controls inherit the typographic system. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
}

button {
  cursor: pointer;
}

::placeholder {
  color: var(--ce-color-text-muted);
  opacity: 1;
}


/* ===========================================================================
   3. BASE ELEMENT STYLES (Section 6.2)
   =========================================================================== */

body {
  font-family: var(--ce-font-sans);
  font-size: var(--ce-font-base);
  font-weight: var(--ce-fw-regular);
  line-height: 1.65;
  color: var(--ce-color-text);
  background: var(--ce-color-bg-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ===========================================================================
   4. TYPOGRAPHY FOUNDATIONS (Sections 6.3, 9)
   creative.ky hierarchy: Montserrat, sentence case, H1 800 / H2 700 / H3 600,
   line-height 1.2, letter-spacing -0.01em.
   =========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ce-font-sans);
  font-weight: var(--ce-fw-bold);
  line-height: var(--ce-lh-tight);
  letter-spacing: -0.01em;
  color: var(--ce-color-text);
}

h1 {
  font-size: var(--ce-h1);
  font-weight: var(--ce-fw-extrabold);
}

h2 {
  font-size: var(--ce-h2);
  font-weight: var(--ce-fw-bold);
}

h3 {
  font-size: 1.3rem;
  font-weight: var(--ce-fw-semibold);
}

h4 {
  font-size: var(--ce-font-lg);
}

h5 {
  font-size: var(--ce-font-base);
}

h6 {
  font-size: var(--ce-font-sm);
}

p {
  line-height: 1.7;
}

/* Editorial accent text foundation (Section 6.3).
   Cormorant Garamond italic is reserved for editorial accents and pull quotes. */
blockquote {
  font-family: var(--ce-font-accent);
  font-style: italic;
  font-weight: var(--ce-fw-medium);
  font-size: var(--ce-font-xl);
  line-height: var(--ce-lh-normal);
  color: var(--ce-color-rust);
}


/* ===========================================================================
   5. GLOBAL TYPOGRAPHY UTILITIES (Sections 4.4, 9.3)
   The five approved, site-wide utilities. No other utility names are defined.
   =========================================================================== */

/* Primary display heading; showcases Montserrat ExtraBold (800). */
.heading {
  font-family: var(--ce-font-sans);
  font-weight: var(--ce-fw-extrabold);
  line-height: var(--ce-lh-tight);
  letter-spacing: -0.01em;
  color: var(--ce-color-text);
}

/* Small label used to categorize or badge content. */
.tag {
  font-family: var(--ce-font-sans);
  font-weight: var(--ce-fw-semibold);
  font-size: var(--ce-font-xs);
  line-height: var(--ce-lh-normal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ce-color-text-mid);
}

/* Accent label that sits above a heading. */
.eyebrow {
  font-family: var(--ce-font-sans);
  font-weight: var(--ce-fw-semibold);
  font-size: var(--ce-font-xs);
  line-height: var(--ce-lh-normal);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ce-color-rust);
}

/* Reusable body-copy treatment for supporting text. */
.body {
  font-family: var(--ce-font-sans);
  font-weight: var(--ce-fw-regular);
  font-size: var(--ce-font-base);
  line-height: var(--ce-lh-relaxed);
  color: var(--ce-color-text-mid);
}

/* Horizontal divider / section rule (Section 6.4 "section rules"). */
.rule {
  display: block;
  width: 100%;
  height: 0;
  border: 0;
  border-top: var(--ce-border-width) solid var(--ce-color-border);
  margin: var(--ce-space-6) 0;
}


/* ===========================================================================
   6. SHARED SURFACE AND LAYOUT PRIMITIVES (Section 7 item 7)
   =========================================================================== */

/* Content container (Section 6.4): the wide shell. Narrow phones fall back to a 92 percent
   width so nothing touches the screen edge. */
.ce-container {
  width: var(--ce-shell-w);
  max-width: var(--ce-shell-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 640px) {
  :root {
    --ce-shell-w: 92%;
  }
}

.ce-container--narrow {
  max-width: var(--ce-container-narrow);
}

.ce-container--wide {
  max-width: var(--ce-container-wide);
}

/* GOVERNED PRODUCT-CARD MEDIA CONTRACT.
   One definition for every product card on the site: the catalog cards and the homepage Popular
   Products cards are the same component and must crop identically. The frame is fixed so a portrait
   source can never make one card taller than its neighbours, and the picture covers it so no card
   shows a dead cream band. Holding the top of the composition keeps product names and hero panels
   visible, which is where this library puts them. */
.ce-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ce-color-bg-cream);
}

.ce-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Native aspect-ratio media box (Section 12). */
.ce-aspect-box {
  overflow: hidden;
  aspect-ratio: var(--ce-aspect-ratio);
}

.ce-aspect-box > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Screen-reader-only utility (Section 10 accessibility support). */
.ce-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A screen-reader-only link (the skip link) becomes visible when focused. */
a.ce-sr-only:focus {
  position: fixed;
  top: var(--ce-space-3);
  left: var(--ce-space-3);
  z-index: 100;
  width: auto;
  height: auto;
  padding: var(--ce-space-2) var(--ce-space-4);
  overflow: visible;
  clip: auto;
  background: var(--ce-color-rust);
  color: var(--ce-color-bg-page);
  font-family: var(--ce-font-sans);
  font-weight: var(--ce-fw-semibold);
  font-size: var(--ce-font-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Visible keyboard focus indicator (Section 10.1). */
:focus-visible {
  outline: 2px solid var(--ce-color-rust);
  outline-offset: 2px;
}

/* Reduced-motion safety (Section 10.3). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}


/* ===========================================================================
   7. CORE COMPONENTS (Section 6.4)
   =========================================================================== */

/* 7.0 Pill tags (creative.ky .tag): the eyebrow above section titles and hero headlines. */
.ce-tag {
  display: inline-block;
  font-family: var(--ce-font-sans);
  font-size: 0.72rem;
  font-weight: var(--ce-fw-semibold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 6px 14px;
  border-radius: var(--ce-radius-pill);
  margin-bottom: 16px;
}

.ce-tag--rust {
  background: var(--ce-rust-pale);
  color: var(--ce-color-rust);
}

.ce-tag--light {
  background: rgba(253, 250, 246, 0.12);
  color: var(--ce-text-on-dark);
  border: 1px solid rgba(253, 250, 246, 0.18);
}

/* 7.1 Buttons (creative.ky .btn system): rounded rectangle, sentence case, 600. */
.ce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ce-space-2);
  border-radius: var(--ce-radius-btn);
  border: 1.5px solid transparent;
  font-family: var(--ce-font-sans);
  font-weight: var(--ce-fw-semibold);
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0;
  padding: 13px 26px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ce-transition),
              color var(--ce-transition),
              border-color var(--ce-transition),
              transform var(--ce-transition),
              box-shadow var(--ce-transition);
}

.ce-btn--sm {
  font-size: 0.85rem;
  padding: 9px 18px;
}

.ce-btn--lg {
  font-size: 1rem;
  padding: 16px 36px;
}

.ce-btn--primary {
  background: var(--ce-color-rust);
  color: var(--ce-color-bg-page);
}

.ce-btn--primary:hover {
  background: var(--ce-color-rust-light);
  color: var(--ce-color-bg-page);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(140, 56, 32, 0.32);
}

.ce-btn--secondary {
  background: transparent;
  border-color: var(--ce-color-rust);
  color: var(--ce-color-rust);
}

.ce-btn--secondary:hover {
  background: var(--ce-color-rust);
  color: var(--ce-color-bg-page);
}

/* Dark solid button (for use on light surfaces). */
.ce-btn--dark {
  background: var(--ce-color-black);
  color: var(--ce-color-bg-page);
}

.ce-btn--dark:hover {
  background: #2E2A25;
  color: var(--ce-color-bg-page);
  transform: translateY(-2px);
}

/* Light outline button for dark surfaces (creative.ky .btn-outline-light). */
.ce-btn--ghost {
  background: transparent;
  border-color: rgba(253, 250, 246, 0.35);
  color: var(--ce-color-bg-page);
}

.ce-btn--ghost:hover {
  border-color: var(--ce-color-bg-page);
  background: rgba(253, 250, 246, 0.08);
  color: var(--ce-color-bg-page);
}

/* Dark outline button on light surfaces (creative.ky .btn-outline). */
.ce-btn--outline {
  background: transparent;
  border-color: rgba(28, 26, 23, 0.3);
  color: var(--ce-color-black);
}

.ce-btn--outline:hover {
  background: var(--ce-color-black);
  border-color: var(--ce-color-black);
  color: var(--ce-color-bg-page);
}

/* 7.2 Cards: softly rounded, single hairline border (creative.ky card language). */
.ce-card {
  border-radius: var(--ce-radius-card);
  border: var(--ce-border-width) solid var(--ce-line-dark);
  background: var(--ce-color-bg-surface);
  transition: border-color var(--ce-transition), transform var(--ce-transition), box-shadow var(--ce-transition);
}

.ce-card:hover {
  border-color: var(--ce-color-rust);
}

/* 7.2b Link cards (creative.ky .ce-xlink): title with arrow plus a one-line note. */
.ce-xlinks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.ce-xlink {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px 24px;
  background: var(--ce-color-bg-page);
  border: 1.5px solid rgba(28, 26, 23, 0.1);
  border-radius: var(--ce-radius-card);
  color: var(--ce-color-text);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.ce-xlink:hover {
  transform: translateY(-5px);
  border-color: var(--ce-color-rust);
  box-shadow: 0 24px 50px -36px rgba(181, 86, 42, 0.5);
}

.ce-xlink__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: var(--ce-fw-bold);
  font-size: 1rem;
  color: var(--ce-color-text);
}

.ce-xlink__title svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.35s ease;
}

.ce-xlink:hover .ce-xlink__title svg {
  transform: translateX(5px);
}

.ce-xlink__note {
  font-size: 0.84rem;
  color: var(--ce-color-text-mid);
  line-height: 1.5;
}

/* 7.2c Numbered process steps (creative.ky "How it works": rust circle numbers). */
.ce-steps {
  max-width: 760px;
  margin: 0 auto;
}

.ce-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: var(--ce-border-width) solid var(--ce-line-dark);
}

.ce-step:last-child {
  border-bottom: 0;
}

.ce-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ce-color-rust);
  color: var(--ce-color-bg-page);
  font-family: var(--ce-font-accent);
  font-style: italic;
  font-weight: var(--ce-fw-semibold);
  font-size: 1.05rem;
  line-height: 1;
}

.ce-step__t {
  font-size: 0.98rem;
  font-weight: var(--ce-fw-bold);
  color: var(--ce-color-text);
  margin: 4px 0 3px;
}

.ce-step__d {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ce-color-text-mid);
  margin: 0;
}

/* 7.2d Section shells and the dark page hero / dark closing CTA (creative.ky .page-hero, #cta). */
.ce-sec {
  padding: 64px 0;
}

.ce-sec--page {
  background: var(--ce-color-bg-page);
  color: var(--ce-color-text);
}

.ce-sec--cream {
  background: var(--ce-color-bg-cream);
  color: var(--ce-color-text);
}

.ce-sec--dark {
  background: var(--ce-color-black);
  color: var(--ce-text-on-dark);
}

.ce-sec--dark h2,
.ce-sec--dark h3 {
  color: var(--ce-color-bg-page);
}

.ce-sec__head {
  max-width: 680px;
  margin-bottom: 36px;
}

.ce-sec__head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.ce-sec__head h2 {
  margin-bottom: 12px;
}

.ce-sec__lede {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ce-color-text-mid);
  max-width: var(--ce-measure);
  margin: 0;
}

.ce-sec--dark .ce-sec__lede {
  color: var(--ce-text-on-dark);
}

.ce-sec__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.ce-sec__row .ce-sec__head {
  margin-bottom: 0;
}

.ce-hero {
  position: relative;
  overflow: hidden;
  background: var(--ce-color-black);
  color: var(--ce-color-bg-page);
  padding: 56px 0;
}

.ce-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(140, 56, 32, 0.1) 0%, transparent 55%);
  pointer-events: none;
}

.ce-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.ce-hero h1 {
  color: var(--ce-color-bg-page);
  margin-bottom: 16px;
}

.ce-hero h1 .r {
  color: var(--ce-color-rust-light);
}

.ce-hero__sub {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ce-text-on-dark);
  max-width: 620px;
  margin: 0 0 28px;
}

/*
 * Governed artwork guidance (inc/ce-artwork-guidance.php), printed inside the configurator directly
 * above the upload control. Plain block flow, nothing hidden behind a hover or a disclosure, so the
 * rules are read before a file is chosen rather than discovered in an error afterwards.
 */
.ce-artg {
  margin: 0 0 var(--ce-space-4);
  padding: 14px 16px;
  border: var(--ce-border-width) solid var(--ce-color-border);
  border-left: 3px solid var(--ce-color-rust);
  border-radius: 0 var(--ce-radius-card-sm) var(--ce-radius-card-sm) 0;
  background: var(--ce-color-bg-cream);
}

.ce-artg__rule {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: var(--ce-fw-semibold);
  color: var(--ce-color-text);
}

.ce-artg__limit {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ce-color-text-mid);
}

.ce-artg__act {
  margin: 10px 0 0;
}

.ce-hero__lead {
  font-size: 1.2rem;
  line-height: 1.45;
  font-weight: var(--ce-fw-bold);
  color: var(--ce-color-bg-page);
  max-width: 620px;
  margin: 0 0 14px;
}

.ce-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Photo hero (creative.ky #hero and .bs-hero-photo): the approved photograph sits behind
   the copy with the live charcoal gradient fade so the headline reads on the left. */
.ce-hero--photo {
  display: flex;
  align-items: center;
  min-height: 560px;
}

/* The photo hero keeps the page shell width so its copy aligns with every section below. */
.ce-hero--photo .ce-container {
  width: var(--ce-shell-w);
}

.ce-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
  overflow: hidden;
}

.ce-hero__photo img,
.ce-hero__photo .ce-hero__ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ce-hero__ph {
  background: radial-gradient(85% 70% at 66% 34%, rgba(140, 56, 32, 0.26), transparent 62%), linear-gradient(120deg, #211D18, #0E0C09);
}

.ce-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ce-color-black) 0%, rgba(28, 26, 23, 0.86) 20%, rgba(28, 26, 23, 0.62) 55%, rgba(28, 26, 23, 0.45) 100%);
}

.ce-hero__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, var(--ce-color-black) 0%, transparent 22%, transparent 80%, rgba(28, 26, 23, 0.55) 100%);
}

.ce-cta {
  position: relative;
  overflow: hidden;
  background: var(--ce-color-black);
  color: var(--ce-text-on-dark);
  padding: 72px 0;
  text-align: center;
}

.ce-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 65% 50%, rgba(140, 56, 32, 0.15) 0%, transparent 58%);
  pointer-events: none;
}

.ce-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.ce-cta h2 {
  color: var(--ce-color-bg-page);
  margin-bottom: 16px;
}

.ce-cta p {
  color: var(--ce-text-on-dark);
  font-size: 1.05rem;
  margin: 0 0 32px;
}

.ce-cta .ce-hero__actions {
  justify-content: center;
}

/* 7.2e Promotional strip above the header (creative.ky .print-sticky-bar): rust band with the
   current governed order message and a Shop Now action. Hidden below the desktop breakpoint. */
.ce-promo {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  background: var(--ce-color-rust);
  padding: 10px 24px;
}

.ce-promo__t {
  font-size: 0.82rem;
  font-weight: var(--ce-fw-semibold);
  letter-spacing: 0.03em;
  color: var(--ce-text-on-dark);
}

.ce-promo__btn {
  font-size: 0.82rem;
  font-weight: var(--ce-fw-bold);
  color: var(--ce-color-bg-page);
  background: rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(253, 250, 246, 0.4);
  border-radius: 6px;
  padding: 5px 14px;
  white-space: nowrap;
  transition: background-color var(--ce-transition);
}

.ce-promo__btn:hover {
  background: rgba(0, 0, 0, 0.4);
  color: var(--ce-color-bg-page);
}

/* 7.3 Header: the creative.ky charcoal bar (70px, blur, hairline). */
.ce-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ce-header-surface-solid);
  border-bottom: var(--ce-border-width) solid rgba(253, 250, 246, 0.07);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ce-header {
    background: var(--ce-header-surface);
    -webkit-backdrop-filter: blur(var(--ce-header-blur));
    backdrop-filter: blur(var(--ce-header-blur));
  }
}

.ce-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  width: var(--ce-shell-w);
  max-width: var(--ce-bar-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  height: var(--ce-header-h);
}

.ce-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Brand wordmark, rendered by ce_logo_html() in inc/ce-brand.php: the creative.ky stacked
   CREATIVE / EXPOSURE lockup with the italic tagline centred beneath. */
.ce-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.ce-logo__img {
  height: 36px;
  width: auto;
}

.ce-logo__word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: var(--ce-font-sans);
  font-weight: var(--ce-fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}

.ce-logo__l1,
.ce-logo__l2 {
  display: block;
}

.ce-logo__l1 {
  color: var(--ce-color-bg-page);
}

.ce-logo__l2 {
  color: var(--ce-color-rust-light);
}

.ce-logo__tag {
  font-family: var(--ce-font-accent);
  font-style: italic;
  font-weight: var(--ce-fw-regular);
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--ce-color-bg-page);
  text-align: center;
  margin-top: 1px;
}

.ce-logo--header .ce-logo__word {
  font-size: 1.1rem;
}

.ce-logo--header .ce-logo__tag {
  font-size: 0.62rem;
}

.ce-logo--footer {
  align-items: flex-start;
  gap: 4px;
}

.ce-logo--footer .ce-logo__word {
  font-size: 1.15rem;
  align-items: flex-start;
  text-align: left;
}

.ce-logo--footer .ce-logo__tag {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-align: left;
}

.ce-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.ce-header__cta {
  font-size: 0.85rem;
  font-weight: var(--ce-fw-bold);
  padding: 10px 22px;
}

/* 7.4 Desktop primary navigation (creative.ky .nav-links): small, medium weight, right
   aligned, copper active state with the 2px underline. Revealed from 1280px (see 7.4b). */
.ce-nav-desktop {
  display: none;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}


.ce-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ce-nav a {
  position: relative;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: var(--ce-fw-medium);
  letter-spacing: 0.01em;
  color: var(--ce-text-on-dark);
  white-space: nowrap;
  padding-bottom: 2px;
  transition: color var(--ce-transition);
}

.ce-nav a:hover {
  color: var(--ce-color-bg-page);
}

.ce-nav .current-menu-item > a,
.ce-nav .ce-nav__item--current > a {
  color: var(--ce-color-rust-light);
  font-weight: var(--ce-fw-bold);
}

.ce-nav .current-menu-item > a::after,
.ce-nav .ce-nav__item--current > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 1px;
  background: var(--ce-color-rust-light);
}

/* Dropdown navigation (creative.ky .nav-dropdown): caret on the parent, charcoal panel with
   rounded links revealed on hover or keyboard focus. Rendered by inc/ce-nav.php from real
   destinations only. */
.ce-nav .ce-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.ce-nav__top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ce-nav__caret {
  width: 10px;
  height: 10px;
  opacity: 0.7;
  transition: transform 0.3s ease;
}

.ce-nav__item.has-dropdown:hover .ce-nav__caret,
.ce-nav__item.has-dropdown:focus-within .ce-nav__caret {
  transform: rotate(180deg);
}

.ce-nav__dropdown,
.ce-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -8px;
  min-width: 262px;
  background: #201E1A;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
  z-index: 60;
}

.ce-nav__dropdown::before,
.ce-nav .sub-menu::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.ce-nav__item.has-dropdown:hover .ce-nav__dropdown,
.ce-nav__item.has-dropdown:focus-within .ce-nav__dropdown,
.ce-nav .menu-item-has-children:hover > .sub-menu,
.ce-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ce-nav .ce-nav__dd-link,
.ce-nav .sub-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: var(--ce-fw-medium);
  color: rgba(253, 250, 246, 0.88);
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.25s ease;
}

.ce-nav .ce-nav__dd-link:hover,
.ce-nav .sub-menu a:hover {
  background: rgba(181, 86, 42, 0.18);
  color: #ffffff;
  padding-left: 19px;
}

.ce-nav .ce-nav__dd-link::after {
  content: none;
}

.ce-nav .ce-nav__dd-link--featured {
  margin-top: 6px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 9px 9px;
  color: var(--ce-color-rust-light);
  font-weight: var(--ce-fw-bold);
}

/* 7.5 Mobile navigation trigger (creative.ky hamburger: three 24px lines). */
.ce-nav-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--ce-color-bg-page);
}

.ce-nav-trigger__bar {
  display: block;
  width: 24px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ce-color-bg-page);
  transition: transform var(--ce-transition), opacity var(--ce-transition);
}

/* Open state: the three bars become a close cross. The bars are counted from the END of the
   button because the first child is the screen-reader-only label, not a bar; counting from the
   start left the last bar horizontal and the cross rendered as a single diagonal stroke. */
.ce-nav-trigger[aria-expanded="true"] .ce-nav-trigger__bar:nth-last-child(3) {
  transform: translateY(6.5px) rotate(45deg);
}

.ce-nav-trigger[aria-expanded="true"] .ce-nav-trigger__bar:nth-last-child(2) {
  opacity: 0;
}

.ce-nav-trigger[aria-expanded="true"] .ce-nav-trigger__bar:nth-last-child(1) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* 7.6 Mobile navigation panel (creative.ky .mobile-nav): full-height dark overlay below the
   bar with large links and the rust action. Runtime open/close is owned by ce-nav.js. */
.ce-mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - var(--ce-header-h));
  z-index: 49;
  background: var(--ce-color-black);
  padding: 28px 36px 40px;
  overflow-y: auto;
}

.ce-mobile-nav[data-open="true"] {
  display: block;
}

.ce-mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ce-mobile-nav a {
  display: block;
  padding: 9px 0;
  font-size: 1.55rem;
  font-weight: var(--ce-fw-semibold);
  color: var(--ce-text-on-dark);
  transition: color var(--ce-transition);
}

.ce-mobile-nav a:hover,
.ce-mobile-nav .ce-nav__item--current > a {
  color: var(--ce-color-rust-light);
}

/* Mobile groups (creative.ky .m-group): the parent link beside an accordion toggle that
   reveals the same real sub-destinations as the desktop dropdown. */
.ce-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ce-mobile-nav__head > a {
  flex: 1;
}

.ce-mobile-nav__acc {
  background: none;
  border: none;
  color: rgba(253, 250, 246, 0.6);
  padding: 6px 4px;
  line-height: 0;
  cursor: pointer;
}

.ce-mobile-nav__acc svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.ce-mobile-nav__acc[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.ce-mobile-nav__sub {
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 0 0 6px;
}

.ce-mobile-nav__group.is-open .ce-mobile-nav__sub {
  display: flex;
}

.ce-mobile-nav .ce-mobile-nav__sub a {
  font-size: 1.02rem;
  font-weight: var(--ce-fw-medium);
  color: rgba(253, 250, 246, 0.72);
  padding: 9px 0 9px 18px;
}

.ce-mobile-nav .ce-btn {
  display: inline-flex;
  margin-top: 22px;
  padding: 15px 34px;
  font-size: 1.05rem;
  color: var(--ce-color-bg-page);
}

.ce-mobile-nav .ce-btn:hover {
  color: var(--ce-color-bg-page);
}

/* Visible keyboard-focus state for the header controls. */
.ce-nav a:focus-visible,
.ce-mobile-nav a:focus-visible,
.ce-nav-trigger:focus-visible {
  outline: 2px solid var(--ce-color-rust-light);
  outline-offset: 3px;
}

/* 7.7 Footer (creative.ky footer, direct blueprint): a substantial dark directory. Brand column
   (stacked wordmark with the italic tagline, descriptor, email, phone, WhatsApp) beside the
   Services, Company and Get Started columns with copper uppercase titles, then the hairline
   bottom bar. Live proportions: 72px top padding, four columns (2fr 1fr 1fr 1fr) with 48px
   gaps, 14 to 15px links at a 10px rhythm. Extra bottom clearance keeps the floating WhatsApp
   button off the bottom bar. */
.ce-footer {
  background: var(--ce-color-black);
  color: var(--ce-text-on-dark);
  border-top: var(--ce-border-width) solid rgba(253, 250, 246, 0.06);
  padding: 56px 0 96px;
}

.ce-footer__inner {
  width: var(--ce-shell-w);
  max-width: var(--ce-bar-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.ce-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 24px;
  margin-bottom: 44px;
}

.ce-footer__brand,
.ce-footer__col--wide {
  grid-column: 1 / -1;
}

.ce-footer__brand {
  max-width: 360px;
}

/* Phones and small tablets: the long Services list runs in two columns (creative.ky keeps the
   footer compact on mobile). */
.ce-footer__col--wide .ce-footer__links {
  display: block;
  columns: 2;
  column-gap: 24px;
}

.ce-footer__col--wide .ce-footer__links li {
  break-inside: avoid;
  margin-bottom: 10px;
}

.ce-footer__desc {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--ce-text-on-dark);
  margin: 16px 0 20px;
  max-width: 300px;
}

.ce-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ce-footer__contact a {
  font-size: 0.92rem;
  color: var(--ce-text-on-dark);
  transition: color var(--ce-transition);
}

.ce-footer__contact a:hover {
  color: var(--ce-color-rust-light);
}

.ce-footer__social {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  gap: 12px;
}

.ce-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ce-line-light);
  color: var(--ce-text-on-dark);
  transition: color var(--ce-transition), border-color var(--ce-transition);
}

.ce-footer__social a:hover,
.ce-footer__social a:focus-visible {
  color: var(--ce-color-rust-light);
  border-color: var(--ce-color-rust-light);
}

.ce-footer__title {
  font-family: var(--ce-font-sans);
  font-size: 0.72rem;
  font-weight: var(--ce-fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ce-color-rust-light);
  margin-bottom: 18px;
}

.ce-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ce-footer__links a,
.ce-footer__links span {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ce-text-on-dark);
}

.ce-footer__links span {
  color: rgba(253, 250, 246, 0.45);
}

.ce-footer__links a {
  transition: color var(--ce-transition);
}

.ce-footer__links a:hover {
  color: var(--ce-color-bg-page);
}

.ce-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 24px;
  padding-right: 150px;
  border-top: var(--ce-border-width) solid rgba(253, 250, 246, 0.06);
}

.ce-footer__copy,
.ce-footer__meta {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ce-text-on-dark);
}

.ce-footer__meta {
  color: rgba(253, 250, 246, 0.6);
}

.ce-footer__legal {
  list-style: none;
  display: flex;
  gap: var(--ce-space-5);
  margin: 0;
  padding: 0;
}

.ce-footer__legal a {
  font-size: 0.82rem;
  color: var(--ce-text-on-dark);
  transition: color var(--ce-transition);
}

.ce-footer__legal a:hover {
  color: var(--ce-color-rust-light);
}

/* Craftsmanship credit: the quietest line in the bar, never louder than the copyright. Only the
   brand name is a link, and it routes to Website Design rather than the homepage. */
.ce-footer__credit {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(253, 250, 246, 0.45);
}

.ce-footer__credit a {
  color: rgba(253, 250, 246, 0.68);
  border-bottom: 1px solid rgba(253, 250, 246, 0.22);
  padding-bottom: 1px;
  transition: color var(--ce-transition), border-color var(--ce-transition);
}

.ce-footer__credit a:hover {
  color: var(--ce-color-rust-light);
  border-bottom-color: var(--ce-color-rust-light);
}

/* 7.8 Branded empty state. */
.ce-empty-state {
  text-align: center;
  padding: var(--ce-space-11) var(--ce-space-6);
}

.ce-empty-state__heading {
  font-family: var(--ce-font-sans);
  font-weight: var(--ce-fw-bold);
  font-size: var(--ce-font-2xl);
  letter-spacing: -0.01em;
  color: var(--ce-color-text);
  margin-bottom: var(--ce-space-4);
}

.ce-empty-state__message {
  font-size: var(--ce-font-base);
  line-height: var(--ce-lh-relaxed);
  color: var(--ce-color-text-mid);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--ce-space-6);
}

/* 7.8b Generic page template (page.php): Cart, Checkout, My Account and other content
   pages. Vertical rhythm only, on the shared shell container. WooCommerce owns and styles
   all Cart, Checkout and account markup; nothing here recreates or overrides it. */
.ce-page {
  padding-top: var(--ce-space-7);
  padding-bottom: var(--ce-space-9);
}

.ce-page__header {
  margin-bottom: var(--ce-space-6);
}


/* ===========================================================================
   7.9 WHATSAPP HELP: global floating button + one contextual prompt.
   =========================================================================== */

.ce-wa-fab {
  position: fixed;
  right: calc(var(--ce-space-5) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--ce-space-5) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--ce-space-2);
  background: #25d366;
  color: #ffffff;
  padding: var(--ce-space-3) var(--ce-space-4);
  border-radius: var(--ce-radius-pill);
  font-family: var(--ce-font-sans);
  font-weight: var(--ce-fw-semibold);
  font-size: var(--ce-font-sm);
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: background-color var(--ce-transition), transform var(--ce-transition);
}

.ce-wa-fab:hover {
  background: #1ebe57;
  color: #ffffff;
  transform: translateY(-2px);
}

.ce-wa-fab:focus-visible {
  outline: 3px solid var(--ce-color-rust);
  outline-offset: 3px;
}

.ce-wa-fab__icon {
  display: inline-flex;
}

.ce-wa-fab__label {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .ce-wa-fab {
    padding: var(--ce-space-3);
    gap: var(--ce-space-2);
    font-size: var(--ce-font-xs);
  }
}

.ce-wa-help {
  display: inline-flex;
  align-items: center;
  gap: var(--ce-space-2);
  font-size: var(--ce-font-sm);
  color: var(--ce-color-text-mid);
  line-height: var(--ce-lh-normal);
}

.ce-wa-help__icon {
  display: inline-flex;
  color: #25d366;
  flex-shrink: 0;
}

.ce-wa-help a {
  color: var(--ce-color-rust);
  font-weight: var(--ce-fw-semibold);
  text-decoration: underline;
  transition: color var(--ce-transition);
}

.ce-wa-help a:hover {
  color: var(--ce-color-rust-light);
}


/* ===========================================================================
   8. RESPONSIVE REFINEMENTS
   Approved breakpoints only: 640px, 768px, 1024px, 1280px.
   =========================================================================== */

@media (min-width: 640px) {
  .ce-xlinks {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .ce-footer__grid {
    gap: 40px 32px;
  }
}

@media (min-width: 768px) {
  .ce-sec {
    padding: 80px 0;
  }

  .ce-xlinks--two {
    grid-template-columns: 1fr 1fr;
  }

  .ce-hero {
    padding: 72px 0;
  }

  .ce-hero--photo {
    min-height: 600px;
  }

  .ce-hero__photo {
    width: 60%;
  }

  .ce-hero__photo::after {
    background: linear-gradient(90deg, var(--ce-color-black) 0%, rgba(28, 26, 23, 0.82) 9%, rgba(28, 26, 23, 0.32) 38%, rgba(28, 26, 23, 0) 66%);
  }

  .ce-cta {
    padding: 88px 0;
  }

  .ce-footer {
    padding: 64px 0 96px;
  }

  .ce-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px 32px;
    margin-bottom: 48px;
  }

  .ce-footer__brand,
  .ce-footer__col--wide {
    grid-column: auto;
  }

  .ce-footer__col--wide .ce-footer__links {
    display: flex;
    columns: auto;
  }

  .ce-footer__col--wide .ce-footer__links li {
    margin-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .ce-sec {
    padding: 88px 0;
  }

  .ce-hero {
    padding: 72px 0;
  }

  .ce-hero--photo {
    min-height: 640px;
  }

  .ce-cta {
    padding: 96px 0;
  }

  .ce-promo {
    display: flex;
  }

  .ce-footer {
    padding: 72px 0 104px;
  }

  .ce-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 56px;
  }
}

/* 7.4b Desktop primary navigation reveal.
   The owner-approved primary navigation is seven destinations (Home, Large Format & Signage,
   Paper & Labels, Website Design, Our Philosophy, Blog, Contact) beside the brand lockup and the
   Request a Quote action. That row does not fit a 1024px bar: the first item rendered underneath
   the wordmark. The desktop row is therefore revealed at 1280px, and from 1024px to 1279px the
   full-height overlay menu is used, carrying exactly the same seven destinations and the same
   action. Declared after the base .ce-nav-trigger and .ce-mobile-nav rules so it wins on source
   order. Approved breakpoints only. */
/* 7.4c Header account access.
   An account is required to complete a purchase, so signing in and registering are visible in the
   bar. Native WordPress authentication only: the inline form posts to wp-login.php. The full
   inline row (email, password, forgot, sign in, register) is revealed only where there is room;
   below that a compact Sign in link takes its place, and an authenticated visitor sees My
   Account. Never both at once. */
.ce-acct {
  display: none;
  align-items: center;
  gap: 6px;
}

.ce-acct__field {
  width: 118px;
  min-width: 0;
  background: rgba(253, 250, 246, 0.07);
  border: 1px solid rgba(253, 250, 246, 0.18);
  border-radius: var(--ce-radius-btn);
  color: var(--ce-color-bg-page);
  font-family: inherit;
  font-size: 0.74rem;
  padding: 8px 10px;
  outline: none;
  transition: border-color var(--ce-transition), background-color var(--ce-transition);
}

.ce-acct__field::placeholder {
  color: rgba(253, 250, 246, 0.5);
}

.ce-acct__field:focus {
  border-color: var(--ce-color-rust-light);
  background: rgba(253, 250, 246, 0.11);
}

.ce-acct__forgot {
  font-size: 0.7rem;
  color: rgba(253, 250, 246, 0.6);
  white-space: nowrap;
  transition: color var(--ce-transition);
}

.ce-acct__forgot:hover {
  color: var(--ce-color-rust-light);
}

.ce-acct__btn {
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: var(--ce-fw-bold);
  color: var(--ce-color-bg-page);
  background: transparent;
  border: 1px solid rgba(253, 250, 246, 0.28);
  border-radius: var(--ce-radius-btn);
  padding: 8px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--ce-transition), border-color var(--ce-transition);
}

.ce-acct__btn:hover {
  background: rgba(253, 250, 246, 0.1);
  border-color: rgba(253, 250, 246, 0.45);
}

.ce-acct__link {
  font-size: 0.76rem;
  font-weight: var(--ce-fw-bold);
  color: var(--ce-text-on-dark);
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: var(--ce-radius-btn);
  transition: color var(--ce-transition), background-color var(--ce-transition);
}

.ce-acct__link:hover {
  color: var(--ce-color-bg-page);
}

.ce-acct__link--solid {
  background: var(--ce-color-rust);
  color: var(--ce-color-bg-page);
}

.ce-acct__link--solid:hover {
  background: var(--ce-color-rust-light);
}

/* Compact Sign in link: shown until the inline form is revealed, hidden once it is. */
.ce-acct__compact {
  display: inline-block;
}

/* 7.4d Persistent cart. A 40px target (the same as the menu trigger) with a restrained bag icon
   in the on-dark text colour and a small copper count badge. Visible at every width; no subtotal
   in the bar. */
.ce-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--ce-radius-btn);
  color: var(--ce-text-on-dark);
  transition: color var(--ce-transition), background-color var(--ce-transition);
}

.ce-cart:hover {
  color: var(--ce-color-bg-page);
  background: rgba(253, 250, 246, 0.08);
}

.ce-cart:focus-visible {
  outline: 2px solid var(--ce-color-rust-light);
  outline-offset: 2px;
}

.ce-cart__icon {
  display: block;
}

/* Small screens: the persistent cart adds a fifth item to a bar that already carried the wordmark,
   Sign in, Register and the menu trigger, and at 390px a logged-out bar overflowed by 43px. The
   spacing is tightened instead of dropping any control, so every destination stays in the bar. */
@media (max-width: 640px) {
  .ce-header__inner {
    gap: 12px;
  }

  /* The bar must be allowed to give way rather than push past the shell. Without this the
     actions block is rigid, so a flex container that cannot fit simply overflows the viewport
     instead of resolving, which is what put the menu trigger outside the screen at 320px. */
  .ce-header__actions {
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
  }

  .ce-acct__link {
    padding: 9px 10px;
    font-size: 0.72rem;
  }

  .ce-cart {
    width: 36px;
    height: 36px;
  }

  /* The two 40px and 36px targets are the ones that must never be squeezed: they are the only
     route to the menu and the cart. Everything else in the bar yields before they do. */
  .ce-nav-trigger {
    flex-shrink: 0;
  }
}

/* Below 375px there is genuinely no room for five controls: the wordmark, the Sign in and
   Register text links, the cart and the menu trigger measured 226px of rigid content against
   165px of available bar at 320px, which pushed the menu trigger entirely off screen and, with
   body overflow-x hidden, made it impossible to scroll to or tap. The text account links are
   dropped here and nothing else changes, because they are duplicated in the mobile menu panel
   (.ce-mobile-nav__acct) and both already resolve to the same /my-account/ URL, so no
   destination is lost. 375px and wider is untouched: it already fits the viewport. */
@media (max-width: 374px) {
  .ce-header__actions .ce-acct__link {
    display: none;
  }
}

.ce-cart__badge {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ce-color-rust);
  color: var(--ce-color-bg-page);
  font-size: 0.62rem;
  font-weight: var(--ce-fw-bold);
  line-height: 17px;
  text-align: center;
  pointer-events: none;
}

.ce-mobile-nav__acct {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--ce-space-5);
}

@media (min-width: 1280px) {
  .ce-nav-desktop {
    display: flex;
  }

  .ce-nav-trigger,
  .ce-mobile-nav {
    display: none;
  }

  /* Eight destinations plus the wordmark and the account controls. The Request a Quote button
     has been removed from the bar, so the nav can breathe again rather than staying cramped. */
  .ce-header__inner {
    gap: 22px;
  }

  .ce-nav {
    gap: 17px;
  }

  .ce-nav a {
    font-size: 0.78rem;
  }
}

/* The full inline credential row needs real room. It is revealed only on a wide desktop bar; the
   compact Sign in link covers every narrower width so nothing is ever crammed or clipped. */
@media (min-width: 1600px) {
  .ce-acct {
    display: flex;
  }

  .ce-acct__compact {
    display: none;
  }
}

/* 7.7 Global product marquee (template-parts/product-marquee.php).
   A premium white band naming the physical products Creative Exposure prints, rendered once from
   footer.php on every customer-facing page as the light separation between the page's closing
   content and the dark footer. Charcoal names in uppercase Montserrat with copper separators and
   generous letter spacing. No boxes, no cards, no HTML marquee element, no JavaScript.
   The drift is one slow linear translation of a duplicated set with the edges masked, so the loop
   has no seam. Under prefers-reduced-motion the drift is removed outright and the names wrap into
   a static centred band; the global reduced-motion reset only shortens animations, which would
   otherwise leave the track frozen part way through its translation. */
.ce-marquee {
  background: var(--ce-color-bg-page);
  border-top: 1px solid var(--ce-color-border);
  border-bottom: 1px solid var(--ce-color-border);
  padding: 34px 0;
}

.ce-marquee__vp {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.ce-marquee__track {
  display: flex;
  width: max-content;
  animation: ce-marquee-drift 72s linear infinite;
}

.ce-marquee__set {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ce-marquee__set li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: var(--ce-fw-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ce-color-text);
}

.ce-marquee__set li::after {
  content: "\2022";
  margin: 0 30px;
  font-size: 0.66rem;
  color: var(--ce-color-rust);
}

@keyframes ce-marquee-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ce-marquee__vp {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ce-marquee__track {
    animation: none;
    width: 100%;
    transform: none;
    justify-content: center;
  }

  .ce-marquee__set {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 14px;
  }

  .ce-marquee__set + .ce-marquee__set {
    display: none;
  }

  .ce-marquee__set li:last-child::after {
    content: none;
  }
}