/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra Child theme for Falaj Tech, gate automation and access control, Oman.
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* =========================================================================
   FALAJ TECH  ·  DESIGN SYSTEM v3.0  ·  White / Navy / Amber / Cream accent
   Gate automation and access control, Oman.  https://falajtech.com

   GOVERNING COLOUR RULE
   Amber #FFB000 is legible ONLY on navy 600 (#243B8F) or darker.
   It fails on white at 1.83:1 and on cream at 1.63:1.
   Navy carries every interaction. Amber lives inside navy surfaces.
   Cream is an ACCENT surface: wells, chips, highlight panels. Never paper.
   ========================================================================= */

/* Fonts load via the Code Snippets PHP enqueue. If you ever remove that
   snippet, uncomment the line below instead.
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Martian+Mono:wght@400..600&family=Spline+Sans:wght@300..600&display=swap');
*/


/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root{

  /* --- CREAM RAMP. Accent only. --------------------------------------- */
  --ft-cream-50:  #FFFCF2;
  --ft-cream-100: #FFF9E8;
  --ft-cream-200: #FFF6DC;
  --ft-cream-300: #FFF0C9;   /* anchor */
  --ft-cream-400: #F7E4B4;
  --ft-cream-500: #E8D29A;
  --ft-cream-600: #D2B87B;

  /* --- NAVY RAMP ------------------------------------------------------ */
  --ft-navy-900: #0E1740;
  --ft-navy-800: #16215C;
  --ft-navy-700: #1B2C72;
  --ft-navy-600: #243B8F;    /* anchor */
  --ft-navy-500: #3450B0;
  --ft-navy-400: #5A76D4;    /* large text only on white, 4.22:1 */
  --ft-navy-300: #A8BAEC;
  --ft-navy-200: #C9D4F5;
  --ft-navy-100: #E3E7F6;
  --ft-slate:    #57638C;

  /* --- AMBER. Navy 600 or darker only. -------------------------------- */
  --ft-amber:      #FFB000;
  --ft-amber-lift: #FFC742;
  --ft-amber-deep: #E09400;                  /* fill only, never text */
  --ft-amber-wash: rgba(255,176,0,.16);      /* over navy only */

  /* --- SEMANTIC SURFACES. White base. --------------------------------- */
  --ft-base:    #FFFFFF;   /* every page background                       */
  --ft-raised:  #FFFFFF;   /* panels on a tinted band                     */
  --ft-overlay: #FFFFFF;   /* modals, dropdowns, sticky bars, inputs      */
  --ft-mist:    #FAFBFC;   /* card fill, lifts off pure white             */
  --ft-sunken:  #F4F6F8;   /* alternating band, image wells               */
  --ft-deep:    var(--ft-navy-600);
  --ft-deepest: var(--ft-navy-900);

  /* --- CREAM AS ACCENT SURFACE. Never a page background. -------------- */
  --ft-cream:      var(--ft-cream-300);   /* icon wells, index chips      */
  --ft-cream-soft: var(--ft-cream-200);   /* highlight panels, hovers     */

  /* --- SEMANTIC TEXT. Ratios measured on #FFFFFF. --------------------- */
  --ft-ink:   var(--ft-navy-900);   /* 17.28:1 */
  --ft-ink-2: var(--ft-navy-600);   /* 10.01:1 */
  --ft-ink-3: var(--ft-slate);      /*  5.75:1 */

  --ft-on-deep:   var(--ft-cream-300);   /* 8.90:1 on navy 600 */
  --ft-on-deep-2: var(--ft-navy-200);    /* 6.79:1 */
  --ft-on-deep-3: var(--ft-navy-300);    /* 5.20:1 */
  --ft-on-amber:  var(--ft-navy-900);    /* 9.43:1 */

  /* --- LINES ---------------------------------------------------------- */
  --ft-line:         #E3E7EC;
  --ft-line-strong:  #C9D0D9;
  --ft-line-control: var(--ft-slate);      /* 5.75:1, any input or control */
  --ft-line-on-deep: rgba(201,212,245,.28);

  /* --- CONTEXTUAL ACCENT ----------------------------------------------
     Interactive parts read --ft-live and --ft-flow, never a colour name.
     On white they resolve to navy. Inside .ft-navy they flip to amber.  */
  --ft-live:     var(--ft-navy-600);
  --ft-live-hot: var(--ft-navy-400);
  --ft-flow:     var(--ft-navy-600);
  --ft-focus:    var(--ft-navy-600);

  /* --- TYPE FAMILIES --------------------------------------------------- */
  --ft-font-display: 'Archivo', 'Arial Narrow', 'Arial Black', sans-serif;
  --ft-font-body:    'Spline Sans', system-ui, -apple-system, sans-serif;
  --ft-font-util:    'Martian Mono', ui-monospace, 'Courier New', monospace;

  /* --- DISPLAY WIDTH AXIS. Condensed uppercase is the house voice. ----- */
  --ft-wdth-display: 72;   /* h1 and hero scale */
  --ft-wdth-head:    76;   /* h2                */
  --ft-wdth-sub:     84;   /* h3 and h4         */

  /* --- FLUID TYPE SCALE ------------------------------------------------ */
  --ft-text-2xs: clamp(0.688rem, 0.671rem + 0.07vw, 0.750rem);
  --ft-text-xs:  clamp(0.750rem, 0.729rem + 0.09vw, 0.813rem);
  --ft-text-sm:  clamp(0.875rem, 0.854rem + 0.09vw, 0.938rem);
  --ft-text-md:  clamp(1.000rem, 0.958rem + 0.19vw, 1.125rem);
  --ft-text-lg:  clamp(1.125rem, 1.042rem + 0.37vw, 1.375rem);
  --ft-text-xl:  clamp(1.375rem, 1.208rem + 0.74vw, 1.875rem);
  --ft-text-2xl: clamp(1.625rem, 1.350rem + 1.22vw, 2.375rem);
  --ft-text-3xl: clamp(2.000rem, 1.550rem + 2.00vw, 3.250rem);
  --ft-text-4xl: clamp(2.250rem, 1.500rem + 3.20vw, 4.000rem);
  --ft-text-5xl: clamp(2.625rem, 1.250rem + 5.10vw, 5.250rem);

  --ft-lh-tight: 0.90;
  --ft-lh-head:  0.96;
  --ft-lh-body:  1.62;
  --ft-lh-util:  1.35;
  --ft-track-display: -0.012em;
  --ft-track-util:     0.14em;

  /* --- SPACING (4px module) -------------------------------------------- */
  --ft-space-1:  0.25rem;   --ft-space-7:  2.5rem;
  --ft-space-2:  0.5rem;    --ft-space-8:  3.5rem;
  --ft-space-3:  0.75rem;   --ft-space-9:  4.5rem;
  --ft-space-4:  1rem;      --ft-space-10: 6rem;
  --ft-space-5:  1.5rem;    --ft-space-11: 8rem;
  --ft-space-6:  2rem;      --ft-space-12: 11rem;
  --ft-section:  clamp(3rem, 1.8rem + 4.6vw, 6.5rem);
  --ft-gutter:   clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --ft-maxw:      1466px;
  --ft-maxw-text: 68ch;

  /* --- RADII ------------------------------------------------------------ */
  --ft-radius-xs: 2px;
  --ft-radius-sm: 4px;
  --ft-radius-md: 8px;
  --ft-radius-lg: 14px;
  --ft-radius-pill: 999px;

  /* --- SHADOWS (navy tinted, never black) ------------------------------- */
  --ft-shadow-0: 0 0 0 1px rgba(14,23,64,.06);
  --ft-shadow-1: 0 1px 2px rgba(14,23,64,.05), 0 2px 8px rgba(14,23,64,.05);
  --ft-shadow-2: 0 2px 4px rgba(14,23,64,.07), 0 12px 28px rgba(14,23,64,.10);
  --ft-shadow-3: 0 4px 8px rgba(14,23,64,.09), 0 28px 56px rgba(14,23,64,.14);
  --ft-shadow-navy:  0 6px 20px rgba(36,59,143,.28);
  --ft-shadow-amber: 0 6px 20px rgba(255,176,0,.32);
  --ft-shadow-inset: inset 0 1px 0 rgba(255,255,255,.65);

  /* --- MOTION ----------------------------------------------------------- */
  --ft-ease-gate:  cubic-bezier(.65,0,.35,1);     /* soft start, soft stop  */
  --ft-ease-limit: cubic-bezier(.16,1,.30,1);     /* settles into the limit */
  --ft-ease-latch: cubic-bezier(.34,1.42,.64,1);  /* the lock engaging      */
  --ft-ease-hold:  linear;

  --ft-dur-latch:  120ms;
  --ft-dur-travel: 320ms;
  --ft-dur-cycle:  620ms;
  --ft-dur-open:   900ms;
  --ft-dur-orbit:  5200ms;
  --ft-dur-flow:   1600ms;

  --ft-hair: 1.5px;
}


/* =========================================================================
   2. BASE
   ========================================================================= */

/* Sticky header requires this. overflow-x:hidden on body creates a scroll
   container and breaks position:sticky. overflow-x:clip stops horizontal
   scrolling the same way without creating one. */
html{ overflow-x: clip; }
body{ overflow-x: clip !important; }

body{
  background: var(--ft-base);
  color: var(--ft-ink);
  font-family: var(--ft-font-body);
  font-size: var(--ft-text-md);
  line-height: var(--ft-lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings. Condensed, uppercase, tight. This is the house voice.
   The overflow rules override Astra, which otherwise splits long words
   in half at large sizes. */
h1,h2,h3,h4,
.ft-h1,.ft-h2,.ft-h3,.ft-h4{
  font-family: var(--ft-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ft-track-display);
  color: var(--ft-ink);
  margin: 0 0 var(--ft-space-4);
  overflow-wrap: normal;
  word-break: normal;
  word-wrap: normal;
  hyphens: none;
}
h1,.ft-h1{
  font-variation-settings: 'wdth' var(--ft-wdth-display);
  font-size: var(--ft-text-4xl); line-height: var(--ft-lh-tight);
}
h2,.ft-h2{
  font-variation-settings: 'wdth' var(--ft-wdth-head);
  font-size: var(--ft-text-3xl); line-height: var(--ft-lh-head);
}
h3,.ft-h3{
  font-variation-settings: 'wdth' var(--ft-wdth-sub);
  font-size: var(--ft-text-xl); line-height: 1.05;
}
h4,.ft-h4{
  font-variation-settings: 'wdth' var(--ft-wdth-sub);
  font-weight: 700;
  font-size: var(--ft-text-lg); line-height: 1.1;
}
.ft-display{
  font-variation-settings: 'wdth' var(--ft-wdth-display);
  font-size: var(--ft-text-5xl); line-height: var(--ft-lh-tight);
}

p{ margin: 0 0 var(--ft-space-4); max-width: var(--ft-maxw-text); }
.ft-lead{ font-size: var(--ft-text-lg); color: var(--ft-ink-2); font-weight: 300; }
.ft-muted{ color: var(--ft-ink-3); }

a{
  color: var(--ft-navy-600);
  text-decoration: none;
  transition: color var(--ft-dur-latch) var(--ft-ease-gate);
}
a:hover{ color: var(--ft-navy-900); }

/* Astra and WooCommerce both add their own underlines with higher
   specificity than a bare a{} rule, so this states it explicitly. */
a, a:hover, a:focus, a:active,
.ft-btn, .ft-btn:hover, .ft-btn:focus, .ft-btn:active,
.woocommerce a.button, .woocommerce-page a.button{
  text-decoration: none;
}

/* The one exception, opt in only. Inside long form article copy, colour
   alone does not identify a link, so paragraph links keep an underline.
   Add class="ft-prose" to the wrapper of blog posts and SEO text blocks.
   Nothing else on the site gets one. */
.ft-prose p a,
.ft-prose li a{
  text-decoration: underline;
  text-decoration-color: var(--ft-navy-400);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ft-prose p a:hover,
.ft-prose li a:hover{ text-decoration-color: var(--ft-navy-600); }

::selection{ background: var(--ft-navy-600); color: var(--ft-cream-300); }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline: 3px solid var(--ft-focus);
  outline-offset: 2px;
  border-radius: var(--ft-radius-xs);
}

.ft-wrap{ width:100%; max-width: var(--ft-maxw);
          margin-inline:auto; padding-inline: var(--ft-gutter); }
.ft-section{ padding-block: var(--ft-section); }
.ft-band-mist{ background: var(--ft-mist); }
.ft-band-sunken{ background: var(--ft-sunken); }


/* =========================================================================
   3. THE NAVY BAND
   The only place amber is allowed. Adding .ft-navy flips every contextual
   token, so buttons, channels and borders switch to amber automatically.
   ========================================================================= */
.ft-navy, .ft-deep{
  background: var(--ft-navy-600);
  color: var(--ft-on-deep);

  --ft-live:     var(--ft-amber);
  --ft-live-hot: var(--ft-amber-lift);
  --ft-flow:     var(--ft-amber);
  --ft-focus:    var(--ft-amber);
  --ft-line:     var(--ft-line-on-deep);
  --ft-line-strong: rgba(201,212,245,.42);
  --ft-line-control: var(--ft-navy-200);
}
.ft-navy--deep, .ft-deep--900{ background: var(--ft-navy-900); }
.ft-navy--800{ background: var(--ft-navy-800); }

.ft-navy h1,.ft-navy h2,.ft-navy h3,.ft-navy h4,
.ft-deep h1,.ft-deep h2,.ft-deep h3,.ft-deep h4{ color: var(--ft-on-deep); }
.ft-navy .ft-lead, .ft-deep .ft-lead{ color: var(--ft-on-deep-2); }
.ft-navy .ft-muted, .ft-deep .ft-muted{ color: var(--ft-on-deep-3); }
.ft-navy a, .ft-deep a{ color: var(--ft-amber); text-decoration: none; }
.ft-navy a:hover, .ft-deep a:hover{ color: var(--ft-amber-lift); }


/* =========================================================================
   4. CREAM ACCENT SURFACES
   Cream's jobs on a white site. Navy 900 on cream is 15.36:1.
   ========================================================================= */
.ft-well{
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ft-cream); color: var(--ft-navy-600);
  border-radius: var(--ft-radius-sm);
  transition: background var(--ft-dur-travel) var(--ft-ease-gate),
              color var(--ft-dur-travel) var(--ft-ease-gate);
}
.ft-navy .ft-well, .ft-deep .ft-well{
  background: var(--ft-amber-wash); color: var(--ft-amber);
}
.ft-highlight{
  background: var(--ft-cream);
  color: var(--ft-navy-900);
  border-radius: var(--ft-radius-md);
  padding: var(--ft-space-5);
}
.ft-highlight--soft{ background: var(--ft-cream-soft); }


/* =========================================================================
   5. UTILITY TYPE  ·  the machine's voice
   Numbers, ratings, part codes and prices. Never prose.
   ========================================================================= */
.ft-eyebrow{
  font-family: var(--ft-font-util);
  font-size: var(--ft-text-2xs);
  font-weight: 600;
  letter-spacing: var(--ft-track-util);
  line-height: var(--ft-lh-util);
  text-transform: uppercase;
  color: var(--ft-navy-600);
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: var(--ft-space-3);
  margin-bottom: var(--ft-space-4);
}
.ft-eyebrow__no{
  color: var(--ft-navy-900);
  background: var(--ft-cream);           /* 15.36:1 */
  padding: 3px 8px;
  border-radius: var(--ft-radius-xs);
}
.ft-navy .ft-eyebrow, .ft-deep .ft-eyebrow{ color: var(--ft-on-deep-3); }
.ft-navy .ft-eyebrow__no, .ft-deep .ft-eyebrow__no{
  background: var(--ft-amber-wash);
  color: var(--ft-amber);                /* 5.46:1 on navy 600 */
}

.ft-spec{
  font-family: var(--ft-font-util);
  font-size: var(--ft-text-xs);
  letter-spacing: 0.02em;
  color: var(--ft-ink-2);
  font-variant-numeric: tabular-nums;
}

.ft-specs{ margin:0; padding:0; }
.ft-specs div{
  display:flex; align-items:baseline; gap: var(--ft-space-2);
  padding-block: var(--ft-space-2);
  border-bottom: 1px solid var(--ft-line);
}
.ft-specs dt{
  font-family: var(--ft-font-util); font-size: var(--ft-text-2xs);
  letter-spacing: var(--ft-track-util); text-transform: uppercase;
  color: var(--ft-ink-3); white-space: nowrap;
}
.ft-specs dd{
  margin:0 0 0 auto; font-family: var(--ft-font-util);
  font-size: var(--ft-text-xs); font-weight:600; color: var(--ft-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ft-navy .ft-specs dt, .ft-deep .ft-specs dt{ color: var(--ft-on-deep-3); }
.ft-navy .ft-specs dd, .ft-deep .ft-specs dd{ color: var(--ft-on-deep); }

/* Price. Navy 900 on light, cream on navy. Never amber. Three decimals. */
.ft-price{
  font-family: var(--ft-font-util); font-weight: 600;
  font-size: var(--ft-text-xl); color: var(--ft-navy-900);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  display:inline-flex; align-items:baseline; gap: 0.35em;
  white-space: nowrap;
}
.ft-price__cur{
  font-size: var(--ft-text-2xs); font-weight: 400;
  letter-spacing: var(--ft-track-util); color: var(--ft-ink-3);
  text-transform: uppercase;
}
.ft-price__baiza{ font-size: 0.62em; color: var(--ft-ink-2); }
.ft-navy .ft-price, .ft-deep .ft-price{ color: var(--ft-on-deep); }
.ft-navy .ft-price__cur, .ft-deep .ft-price__cur{ color: var(--ft-on-deep-3); }
.ft-navy .ft-price__baiza, .ft-deep .ft-price__baiza{ color: var(--ft-on-deep-2); }


/* =========================================================================
   6. SIGNATURE ELEMENT  ·  THE CHANNEL
   A cut groove with a head of water that travels it once, on entry.
   Navy head on white. Amber head inside a navy band.
   ========================================================================= */
.ft-channel{
  position: relative;
  padding-inline-start: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.ft-channel::before{
  content:"";
  position:absolute; inset-block:0; inset-inline-start:0;
  width:6px; border-radius: 3px;
  background: var(--ft-line-strong);
  box-shadow: inset 0 0 0 1px rgba(14,23,64,.08),
              inset 0 2px 3px rgba(14,23,64,.12);
}
.ft-channel::after{
  content:"";
  position:absolute; inset-inline-start:0; top:0;
  width:6px; height:26%; border-radius:3px;
  background: linear-gradient(180deg,
              transparent 0%, var(--ft-flow) 42%,
              var(--ft-flow) 66%, transparent 100%);
  transform: translateY(-30%);
}
.ft-channel.is-flowing::after{
  animation: ft-flow var(--ft-dur-flow) var(--ft-ease-gate) forwards;
}
@keyframes ft-flow{
  from{ transform: translateY(-30%); opacity:0; }
  12% { opacity:1; }
  88% { opacity:1; }
  to  { transform: translateY(400%); opacity:0; }
}

.ft-channel--h{ padding-inline-start:0; padding-block-start: var(--ft-space-5); }
.ft-channel--h::before{ inset-block:auto; top:0; inset-inline:0; width:auto; height:6px; }
.ft-channel--h::after{
  top:0; inset-inline-start:0; width:26%; height:6px;
  background: linear-gradient(90deg,
              transparent 0%, var(--ft-flow) 42%,
              var(--ft-flow) 66%, transparent 100%);
  transform: translateX(-30%);
}
.ft-channel--h.is-flowing::after{
  animation: ft-flow-h var(--ft-dur-flow) var(--ft-ease-gate) forwards;
}
@keyframes ft-flow-h{
  from{ transform: translateX(-30%); opacity:0; }
  12% { opacity:1; }
  88% { opacity:1; }
  to  { transform: translateX(400%); opacity:0; }
}
.ft-navy .ft-channel::before, .ft-deep .ft-channel::before,
.ft-navy .ft-channel--h::before, .ft-deep .ft-channel--h::before{
  background: rgba(201,212,245,.20);
  box-shadow: inset 0 0 0 1px rgba(201,212,245,.12);
}


/* =========================================================================
   7. CARD SHELL
   ========================================================================= */
.ft-card{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ft-mist);
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius-lg);
  padding: var(--ft-space-6);
  box-shadow: var(--ft-shadow-1);
  transition:
    transform    var(--ft-dur-travel) var(--ft-ease-limit),
    box-shadow   var(--ft-dur-travel) var(--ft-ease-limit),
    border-color var(--ft-dur-travel) var(--ft-ease-gate);
}
.ft-card:hover,
.ft-card:focus-within{
  transform: translateY(-4px);
  border-color: var(--ft-navy-600);
  box-shadow: var(--ft-shadow-2);
}
.ft-card__media{
  margin: calc(var(--ft-space-6) * -1) calc(var(--ft-space-6) * -1) var(--ft-space-5);
  border-radius: var(--ft-radius-lg) var(--ft-radius-lg) 0 0;
  overflow: hidden; background: var(--ft-sunken);
}
.ft-card__media img{ display:block; width:100%; height:auto;
  transition: transform var(--ft-dur-cycle) var(--ft-ease-gate); }
.ft-card:hover .ft-card__media img{ transform: scale(1.035); }
.ft-card__title{
  font-family: var(--ft-font-display); font-weight: 800;
  font-variation-settings:'wdth' var(--ft-wdth-sub);
  text-transform: uppercase;
  font-size: var(--ft-text-lg); line-height: 1.05;
  margin: 0 0 var(--ft-space-2);
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.ft-card__foot{
  margin-top: auto; padding-top: var(--ft-space-5);
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--ft-space-4); flex-wrap: wrap;
}

.ft-card--navy{
  background: var(--ft-navy-600);
  border-color: var(--ft-line-on-deep);
  color: var(--ft-on-deep);
  box-shadow: var(--ft-shadow-2);
  --ft-live: var(--ft-amber);
  --ft-live-hot: var(--ft-amber-lift);
  --ft-flow: var(--ft-amber);
  --ft-focus: var(--ft-amber);
  --ft-line: var(--ft-line-on-deep);
}
.ft-card--navy .ft-card__title{ color: var(--ft-on-deep); }
.ft-card--navy:hover{ border-color: var(--ft-navy-300); }


/* =========================================================================
   8. ANIMATED BORDER  ·  .ft-live
   A single point of light traverses the card edge, the way a leaf traverses
   its track. Hover and keyboard focus only, so a grid of twelve products is
   not twelve looping animations. Add .ft-live--always for one hero card.
   ========================================================================= */
@property --ft-travel{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.ft-live{ position: relative; isolation: isolate; }
.ft-live::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius: inherit;
  padding: var(--ft-hair);
  background:
    conic-gradient(from var(--ft-travel) at 50% 50%,
      transparent 0 58%,
      var(--ft-line-strong) 66%,
      var(--ft-live) 74%,
      var(--ft-live-hot) 78%,
      var(--ft-live) 82%,
      var(--ft-line-strong) 90%,
      transparent 96% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--ft-dur-travel) var(--ft-ease-gate);
}
.ft-live:hover::before,
.ft-live:focus-within::before,
.ft-live--always::before{
  opacity: 1;
  animation: ft-travel var(--ft-dur-orbit) var(--ft-ease-hold) infinite;
}
@keyframes ft-travel{ to{ --ft-travel: 360deg; } }

@supports not (background: conic-gradient(from var(--ft-travel), red, blue)){
  .ft-live::before{
    background: linear-gradient(135deg, var(--ft-live) 0%,
                var(--ft-line-strong) 34%, var(--ft-line) 100%);
  }
}


/* =========================================================================
   9. BUTTONS
   Primary is NAVY everywhere on light. Amber buttons exist only inside
   navy surfaces. Labels say what happens: "Get a Free Quote", never "Submit".
   ========================================================================= */
.ft-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: var(--ft-space-2);
  font-family: var(--ft-font-util);
  font-size: var(--ft-text-2xs);
  font-weight: 600;
  letter-spacing: var(--ft-track-util);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border-radius: var(--ft-radius-sm);
  border: 1px solid transparent;
  background: var(--ft-navy-600);
  color: var(--ft-cream-300);                 /* 8.90:1 */
  cursor: pointer;
  transition:
    background var(--ft-dur-travel) var(--ft-ease-gate),
    transform  var(--ft-dur-latch)  var(--ft-ease-latch),
    box-shadow var(--ft-dur-travel) var(--ft-ease-gate);
}
.ft-btn:hover{
  background: var(--ft-navy-700);
  color: var(--ft-cream-300);
  transform: translateY(-2px);
  box-shadow: var(--ft-shadow-navy);
}
.ft-btn:active{ transform: translateY(0); background: var(--ft-navy-800); }

.ft-btn--ghost{
  background: transparent; color: var(--ft-navy-600);
  border-color: var(--ft-line-control);
}
.ft-btn--ghost:hover{
  background: var(--ft-cream-soft); color: var(--ft-navy-900);
  border-color: var(--ft-navy-600); box-shadow: var(--ft-shadow-1);
}

/* Amber button. VALID ONLY inside .ft-navy or .ft-card--navy. */
.ft-navy .ft-btn--amber,
.ft-deep .ft-btn--amber,
.ft-card--navy .ft-btn--amber{
  background: var(--ft-amber);
  color: var(--ft-on-amber);                  /* 9.43:1 */
  border-color: transparent;
}
.ft-navy .ft-btn--amber:hover,
.ft-deep .ft-btn--amber:hover,
.ft-card--navy .ft-btn--amber:hover{
  background: var(--ft-amber-lift);           /* 11.11:1 */
  color: var(--ft-on-amber);
  box-shadow: var(--ft-shadow-amber);
}
.ft-navy .ft-btn--amber:active,
.ft-deep .ft-btn--amber:active,
.ft-card--navy .ft-btn--amber:active{ background: var(--ft-amber-deep); }

/* Guard rail. Outside a navy surface .ft-btn--amber falls back to navy
   rather than rendering a control at 1.83:1. */
.ft-btn--amber{ background: var(--ft-navy-600); color: var(--ft-cream-300); }

.ft-navy .ft-btn--ghost, .ft-deep .ft-btn--ghost{
  color: var(--ft-cream-300); border-color: var(--ft-navy-200);
}
.ft-navy .ft-btn--ghost:hover, .ft-deep .ft-btn--ghost:hover{
  background: var(--ft-navy-700); color: var(--ft-cream-300);
  border-color: var(--ft-amber);
}


/* =========================================================================
   10. CHIPS AND FORM CONTROLS
   ========================================================================= */
.ft-chip{
  display:inline-flex; align-items:center; gap: var(--ft-space-2);
  font-family: var(--ft-font-util); font-size: var(--ft-text-2xs);
  font-weight: 600; letter-spacing: var(--ft-track-util);
  text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: var(--ft-radius-pill);
  background: var(--ft-cream); color: var(--ft-navy-900);   /* 15.36:1 */
}
.ft-chip--quiet{
  background: transparent; color: var(--ft-ink-3);
  box-shadow: inset 0 0 0 1px var(--ft-line-control);
}
.ft-navy .ft-chip, .ft-deep .ft-chip{
  background: var(--ft-amber-wash); color: var(--ft-amber);  /* 5.46:1 */
}

/* Controls fill WHITE on a white site. The border does the identifying,
   at 5.75:1, well over the 3:1 non text threshold. */
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=search], select, textarea, .ft-input{
  background: var(--ft-overlay);
  border: 1px solid var(--ft-line-control);
  border-radius: var(--ft-radius-sm);
  color: var(--ft-ink);
  font-family: var(--ft-font-body);
  font-size: var(--ft-text-md);
  padding: 0.8rem 1rem;
  transition: border-color var(--ft-dur-latch) var(--ft-ease-gate),
              box-shadow var(--ft-dur-latch) var(--ft-ease-gate);
}
input::placeholder, textarea::placeholder{ color: var(--ft-ink-3); }
input:focus, select:focus, textarea:focus, .ft-input:focus{
  border-color: var(--ft-navy-600);
  box-shadow: 0 0 0 3px rgba(36,59,143,.18);
}


/* =========================================================================
   11. SCROLL REVEAL HOOK  (GSAP adds .is-in)
   ========================================================================= */
.ft-reveal{
  opacity:0; transform: translateY(18px);
  transition: opacity var(--ft-dur-open) var(--ft-ease-limit),
              transform var(--ft-dur-open) var(--ft-ease-limit);
}
.ft-reveal.is-in{ opacity:1; transform:none; }
html:not(.js) .ft-reveal{ opacity:1; transform:none; }


/* =========================================================================
   12. REDUCED MOTION
   Every animation resolves to its finished state. Nothing stays hidden.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .ft-live::before{
    animation: none !important;
    opacity: 1;
    background: linear-gradient(135deg, var(--ft-live) 0%,
                var(--ft-line-strong) 30%, var(--ft-line) 100%);
  }
  .ft-channel::after{ animation: none !important;
    transform: translateY(120%); opacity:1; }
  .ft-channel--h::after{ animation: none !important;
    transform: translateX(120%); opacity:1; }
  .ft-card:hover{ transform: none; }
  .ft-btn:hover{ transform: none; }
  .ft-reveal{ opacity:1 !important; transform:none !important; }
}