/* ══════════════════════════════════════════════════════════════════════════
   Metapher design tokens — shared with Magpiie.

   One source of truth for colour across the site. Before this file, the same
   concepts were declared independently in seven stylesheets and had drifted:
   --grad existed in three different forms, --rose was both #C46F6E and
   #DB6F6E, and --hi was #ffffff in some files and #E8E3F0 in others. Page
   stylesheets should read these variables rather than redeclaring them.

   Loaded first in inc/head.blade.php so every later sheet inherits it.

   ── One deliberate deviation from the Magpiie spec ──
   textMuted ships as #5C5669 in Magpiie. On these surfaces that measures
   2.51–2.82:1, below the 4.5:1 WCAG AA floor for body text, and it was the
   main cause of paragraph copy reading as washed out. It is lightened here
   to #9990A8 (5.5–6.5:1). Every other token is exactly as specified.
   ══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand purple ─────────────────────────────────────────────────────── */
  --primary:      #8B74C7;   /* dark-mode primary  */
  --primary-50:   #F1EFF7;
  --primary-100:  #F2F0F5;
  --primary-200:  #E5DFEF;
  --primary-300:  #5A4876;   /* dark-tuned */
  --primary-400:  #A695C2;
  --primary-500:  #7F6AA0;
  --primary-600:  #6750A4;   /* light-mode primary */
  --primary-700:  #594B71;
  --primary-800:  #3F3452;
  --primary-900:  #2D2040;

  /* ── Accents ──────────────────────────────────────────────────────────── */
  --coral:        #DB6F6E;
  --coral-600:    #C55B5A;
  --gold:         #FEB943;
  --blue:         #2A78EE;

  /* ── Semantic ─────────────────────────────────────────────────────────── */
  --error:        #F03F3F;
  --success:      #22C55E;
  --warning:      #FEB943;

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --background:   #0B0A11;   /* page ground; matches theme-color */
  --surface:      #121019;
  --surface-2:    #0F0D16;   /* main content area */
  --surface-3:    #0A0910;   /* sidebar / top bar */
  --surface-elev: #1A1724;   /* cards */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text-primary:   #E8E3F0;
  --text-secondary: #8E879A;
  --text-muted:     #9990A8;  /* see note above: Magpiie ships #5C5669 */

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --border:        #262236;
  --border-strong: #30293F;

  /* ── Nav & misc ───────────────────────────────────────────────────────── */
  --nav-active-bg:   #3A2D5E;
  --nav-active-text: #E8E3F0;
  --nav-hover:       #1E1A2A;
  --draft-chip-bg:   #261F3A;
  --draft-chip-text: #B5A6D6;
  --scroll-thumb:    #3A3449;

  /* ── Gradients ────────────────────────────────────────────────────────── */
  --gradient-brand: linear-gradient(135deg, #DB6F6E 0%, #A66089 50%, #6750A4 100%);
  --gradient-play:  linear-gradient(rgb(215,111,112) 16%, rgb(127,106,160) 100%);
  --gradient-c:     linear-gradient(rgb(219,111,110) 0%, rgb(247,186,41) 100%);


  /* ══════════════════════════════════════════════════════════════════════
     Typography
     ══════════════════════════════════════════════════════════════════════ */

  --font-sans: 'Urbanist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale. Each step pairs a size with its line height; tracking and
     weight are applied by the .t-* helper classes at the end of this file. */
  --text-display:    48px;  --leading-display:    1.1;
  --text-h1:         32px;  --leading-h1:         40px;
  --text-h2:         24px;  --leading-h2:         32px;
  --text-h3:         18px;  --leading-h3:         26px;
  --text-h4:         14px;  --leading-h4:         20px;
  --text-body-lg:    16px;  --leading-body-lg:    24px;
  --text-body:       14px;  --leading-body:       20px;
  --text-body-sm:    13px;  --leading-body-sm:    18px;
  --text-caption:    11px;  --leading-caption:    14px;
  --text-overline:   12px;  --leading-overline:   16px;

  /* Plain ramp, for sizes that are not a semantic step. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  40px;

  --tracking-display:  -0.03em;
  --tracking-h1:       -0.02em;
  --tracking-h2:       -0.015em;
  --tracking-h3:       -0.01em;
  --tracking-overline: 0.08em;


  /* ══════════════════════════════════════════════════════════════════════
     Radius, spacing, shadows
     ══════════════════════════════════════════════════════════════════════ */

  --radius-btn:   8px;
  --radius-input: 9px;
  --radius-card:  10px;
  --radius-panel: 12px;
  --radius-modal: 16px;
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    28px;   /* large panels and CTA boxes */
  --radius-full:  9999px;

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  --shadow-card:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-panel: 0 4px 20px rgba(127,106,160,0.12);  /* purple-tinted */
  --shadow-modal: -4px 0 24px rgba(0,0,0,0.10);
  --shadow-sm:    0 2px 6px rgba(0,0,0,0.1);
  --shadow-md:    0 8px 20px rgba(0,0,0,0.15);
  --shadow-lg:    0 15px 40px rgba(0,0,0,0.25);


  /* ══════════════════════════════════════════════════════════════════════
     Legacy aliases.

     The page stylesheets and Blade partials reference an older, shorter set
     of names. Rather than rewrite several thousand call sites, those names
     are kept here as aliases onto the tokens above — so the values are
     unified now, and individual sheets can migrate to the canonical names
     over time without a flag day.
     ══════════════════════════════════════════════════════════════════════ */

  /* surfaces */
  --bg:          var(--background);
  --bg-base:     var(--background);
  --surf:        var(--surface);
  --bg-surface:  var(--surface);
  --raised:      var(--surface-elev);
  --bg-raised:   var(--surface-elev);
  --card:        var(--surface-elev);
  --bg-card:     var(--surface-elev);

  /* text */
  --hi:       var(--text-primary);
  --text-hi:  var(--text-primary);
  --md:       var(--text-secondary);
  --text-md:  var(--text-secondary);
  --lo:       var(--text-muted);
  --text-lo:  var(--text-muted);

  /* borders */
  --bdr:      var(--border);
  --bdh:      var(--border-strong);
  --border-h: var(--border-strong);

  /* brand */
  --purple:   var(--primary);
  --rose:     var(--coral);
  --green:    var(--success);
  --grad:     var(--gradient-brand);
}

/* ══════════════════════════════════════════════════════════════════════════
   Type scale helpers.

   Opt-in classes, so existing type is untouched until a block is migrated.
   Each applies its step's size, line height, tracking and weight together —
   the four travel as a set, and applying size alone is what makes a scale
   drift back into ad-hoc values.
   ══════════════════════════════════════════════════════════════════════════ */
.t-display  { font-size: var(--text-display);  line-height: var(--leading-display);  letter-spacing: var(--tracking-display);  font-weight: 900; }
.t-h1       { font-size: var(--text-h1);       line-height: var(--leading-h1);       letter-spacing: var(--tracking-h1);       font-weight: 700; }
.t-h2       { font-size: var(--text-h2);       line-height: var(--leading-h2);       letter-spacing: var(--tracking-h2);       font-weight: 600; }
.t-h3       { font-size: var(--text-h3);       line-height: var(--leading-h3);       letter-spacing: var(--tracking-h3);       font-weight: 600; }
.t-h4       { font-size: var(--text-h4);       line-height: var(--leading-h4);       font-weight: 500; }
.t-body-lg  { font-size: var(--text-body-lg);  line-height: var(--leading-body-lg); }
.t-body     { font-size: var(--text-body);     line-height: var(--leading-body); }
.t-body-sm  { font-size: var(--text-body-sm);  line-height: var(--leading-body-sm); }
.t-caption  { font-size: var(--text-caption);  line-height: var(--leading-caption); }
.t-overline { font-size: var(--text-overline); line-height: var(--leading-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; }

/* Visible to screen readers only. Bootstrap ships an equivalent, but defining
   it here means the utility survives if bootstrap is ever dropped. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The brand gradient's signature sweep. Any element using --gradient-brand as
   a background can opt in with `animation: gradientSweep 6s ease-in-out infinite`
   plus a background-size larger than the element. */
@keyframes gradientSweep {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Focus ring.

   The site had 314 `:hover` rules against 9 `:focus-visible` ones — every card
   lifted and glowed under a mouse, while keyboard users got the UA default
   outline or, where a stylesheet had reset it, nothing at all.

   Rather than pair a ring with each of those 314 rules by hand, the ring is
   defined once here against a broad selector list and inherited site-wide.
   `:focus-visible` (not `:focus`) means mouse clicks do not paint a ring —
   only keyboard and other non-pointer focus.

   Page stylesheets that need a different ring should override
   --focus-ring-color rather than redeclaring the shadow.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --focus-ring-color:  #A695C2;
  --focus-ring-offset: 2px;
  --focus-ring-width:  2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="option"]:focus-visible,
[role="tab"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  /* Sits above sibling cards whose hover lift would otherwise clip the ring.
     z-index alone — setting `position: relative` here would override the
     positioning of any focusable element that sets its own (the skip link is
     absolute), so the lift is applied without touching `position`. */
  z-index: 1;
}

/* Windows High Contrast mode ignores outline colour but honours outline width,
   so the ring survives there as the system highlight. */
@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid Highlight;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Skip link — first focusable element on the page, hidden until focused.
   ══════════════════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 10000;
  padding: 12px 22px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--surface-elev);
  border: 1px solid var(--primary);
  border-top: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s ease;
}
.skip-link:focus {
  transform: translate(-50%, 0);
  color: var(--text-primary);
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Motion scale.

   Hover lifts had grown to fifteen different distances (-1, -2, -3, -4, -5,
   -6, -8, -12, -18px), each picked independently per section. Three steps
   cover every real case: a control, a card, and a feature card.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --lift-sm: -2px;   /* buttons, chips, links */
  --lift-md: -4px;   /* cards in a grid */
  --lift-lg: -8px;   /* a single featured card */

  --ease-out:  cubic-bezier(.22,.68,0,1.2);
  --dur-fast:  .18s;
  --dur-base:  .25s;
}

/* ══════════════════════════════════════════════════════════════════════════
   Shared button shine.

   The skewX(-18deg) sweep was copy-pasted into ten stylesheets. Any button can
   opt in by adding this class; the pseudo-element and the hover travel live
   here only.
   ══════════════════════════════════════════════════════════════════════════ */

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-18deg);
  transition: left .5s ease;
  pointer-events: none;
}
.btn-shine:hover::after { left: 130%; }

@media (prefers-reduced-motion: reduce) {
  .btn-shine::after { display: none; }
}

/* Icon masks used by components that show a state glyph. */
:root {
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════════════
   Buttons.

   The primary button existed in five near-copies — .cta-primary (hero),
   .btn-primary-main (home), .btn-p (twice: article-styles and aboutus.css, the
   same class name with different padding, so which one won was load-order
   accident) and .btn-submit (contact). Padding ranged 13–16px vertical,
   radius 12/14/50px, and the hero used a different gradient from the home page
   — the site's two most important buttons were not the same button.

   One definition here; the page classes below are aliases onto it so existing
   markup keeps working. New markup should use .btn / .btn-primary directly.
   ══════════════════════════════════════════════════════════════════════════ */

.btn,
.cta-primary,
.btn-primary-main,
.btn-p,
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) ease,
              background var(--dur-base) ease,
              border-color var(--dur-base) ease,
              color var(--dur-base) ease;
}

/* Primary — one gradient for the whole site.
   Deliberately not --gradient-brand: white text on that gradient's coral end
   (#DB6F6E) measures 3.23:1, under the 4.5:1 AA floor for 14-15px labels.

   The stops below are measured against white, at the extremes where a label
   can actually sit: #7565ad = 4.97:1 and #4a4e8a = 7.64:1. The brand purple
   #8B74C7 is NOT used as the light stop — it measures 3.87:1 and was the
   failing end of the earlier ramp. --gradient-brand stays correct for large
   display text and for surfaces that carry no body-size label. */
.btn-primary,
.cta-primary,
.btn-primary-main,
.btn-p,
.btn-submit {
  background: linear-gradient(135deg, #7565ad 0%, #4a4e8a 100%);
  color: #fff;
  box-shadow: 0 4px 24px rgba(139,116,199,0.38);
}
.btn-primary:hover,
.cta-primary:hover,
.btn-primary-main:hover,
.btn-p:hover,
.btn-submit:hover {
  transform: translateY(var(--lift-sm));
  box-shadow: 0 10px 34px rgba(139,116,199,0.52);
  color: #fff;
  text-decoration: none;
}
.btn-primary:active,
.cta-primary:active,
.btn-primary-main:active,
.btn-p:active,
.btn-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 12px rgba(139,116,199,0.34);
}

/* Secondary — outlined, for the paired action next to a primary. */
.btn-secondary,
.cta-secondary,
.btn-o {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: transparent;
  border: 1px solid rgba(200,191,240,0.20);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #c8bff0;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) ease,
              border-color var(--dur-base) ease,
              color var(--dur-base) ease;
}
.btn-secondary:hover,
.cta-secondary:hover,
.btn-o:hover {
  background: rgba(200,191,240,0.07);
  border-color: rgba(200,191,240,0.45);
  color: #fff;
  transform: translateY(var(--lift-sm));
  text-decoration: none;
}

/* A disabled control must not still look clickable. */
.btn:disabled,
.btn-primary:disabled,
.btn-submit:disabled,
.btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Full-width variant, used by the contact form's submit. */
.btn-submit { width: 100%; }

/* Arrow glyphs nudge forward on hover. */
.btn svg, .btn-primary svg, .cta-primary svg,
.btn-primary-main svg, .btn-p svg, .btn-submit svg {
  flex-shrink: 0;
  transition: transform var(--dur-fast) ease;
}
.btn:hover svg, .btn-primary:hover svg, .cta-primary:hover svg,
.btn-primary-main:hover svg, .btn-p:hover svg, .btn-submit:hover svg {
  transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════════════════════
   Section header rhythm — shared by the About and Services pages.

   Both pages had the same monotony the homepage did: every section opening
   with a centered eyebrow pill, a two-line headline whose second line was
   gradient-filled, and a one-line subhead. The section BODIES differ; the
   headers made them all read the same.

   These are the page-level equivalents of .sec-head on the homepage, built
   against those pages' existing .eb / .sh / .ss vocabulary so the markup
   change per section is a single class.
   ══════════════════════════════════════════════════════════════════════════ */

/* Header block. Default is left-aligned; .center opts in to centering and
   carries the eyebrow and subhead with it, replacing the
   `style="margin:0 auto 18px"` that was pasted onto each eyebrow. */
.pg-head { max-width: 620px; margin-bottom: 8px; position: relative; padding-top: 22px; }
.pg-head.center { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; padding-top: 0; }
.pg-head.center .eb { margin-left: auto; margin-right: auto; }
.pg-head.center .ss { margin-left: auto; margin-right: auto; text-align: center; }
.pg-head.wide { max-width: 880px; }

/* The left-aligned variant gets a short rule as its anchor, matching the
   homepage. Hangs off the container so it sits above the eyebrow rather than
   between the eyebrow and the headline. */
.pg-head:not(.center)::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 3px;
  border-radius: var(--radius-full);
  background: var(--grad);
}
/* Bootstrap columns bring their own gutter padding and width. */
.pg-head[class*="col-"] { max-width: none; }
.pg-head[class*="col-"]::before { left: 15px; }

/* Section spacing modifiers, so consecutive sections can differ. */
.sec.tight { padding: 72px 0; }
.sec.roomy { padding: 132px 0; }