/* ==========================================================================
   chocoflow.css - Chocoflow.hu Hungarian rebuild - the ONLY stylesheet.
   --------------------------------------------------------------------------
   Hand-authored, dependency-free. No framework, no copied normalize.css, no
   webfont declarations, no @import and no remote resource of any kind: the
   page must open from a local file with zero network requests.

   Every colour, size and rhythm value comes from the frozen custom properties
   in SECTION 1 (contract D.1 / D.2 / D.3). Numeric literals appear only where
   the contract itself freezes a literal (button padding 15px 25px, copyright
   42px 0 26px, marquee 160px / 15px / 90s, card image 500px, icon 20px, ...).

   Breakpoints in use - these four only: 1199px, 991px, 767px, 479px,
   plus one `prefers-reduced-motion: reduce` query and one print block.
   `!important` declarations: exactly 1, inside the reduced-motion block
   (contract F.1.2 allows at most 2 documented ones); every other override in
   this file is an ordinary cascade win.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS (frozen - values verbatim, do not re-derive)
   ========================================================================== */
:root{
  /* brand ---------------------------------------------------------------- */
  --cf-gold:            #C19F5F; /* --main/--second: h3 accents, footer rule, links */
  --cf-gold-accent:     #B99961; /* Elementor "accent": primary button fill */
  --cf-yellow:          #F7B614; /* --yellow (unused on this page, kept for CRM UI) */
  --cf-gray:            #2D2627; /* --gray  (panels, inputs on light) */
  --cf-charcoal:        #241F20; /* HERO background - exact mirror value */
  --cf-black:           #0F0E0F; /* --black: PAGE background */
  --cf-near-black:      #0B0A0B; /* footer band background (mirror #lte-widgets-footer) */
  --cf-white:           #FFFFFF;
  --cf-red:             #D12323; /* -red:   validation error BORDERS (non-text) */
  --cf-red-text:        #FF8A80; /* error TEXT on dark: 8.44:1 vs #0F0E0F (WCAG AA+AAA).
                                    --cf-red is only 3.65:1 as text, so text uses this
                                    lighter shade of the same hue. */
  --cf-green:           #39b972; /* -green: success */

  /* derived (frozen, do not invent new ones) ----------------------------- */
  --cf-text:            rgba(255,255,255,.80); /* text-editor opacity .8 */
  --cf-text-dim:        rgba(255,255,255,.60); /* on-black paragraph opacity .6 */
  --cf-hairline:        rgba(255,255,255,.15); /* thin dividers on dark */
  --cf-btn-hover-bg:    #231F20;               /* button:hover background */
  --cf-btn-hover-fg:    #C19F5F;               /* button:hover text */
  --cf-input-bg:        #090909;               /* dark input background */
  --cf-focus:           #F7B614;               /* :focus-visible ring */

  /* fonts: system stacks only - the mirror ships no local font file ------- */
  --cf-font-primary: "Gilroy","Poppins","Montserrat","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --cf-font-accent:  "Athelas","Iowan Old Style",Georgia,"Times New Roman",serif;

  /* container + rhythm --------------------------------------------------- */
  --cf-container:       1140px;
  --cf-gutter:          15px;
  --cf-radius-pill:     25px;   /* buttons: border-radius 25px */
  --cf-radius:          8px;    /* cards / inputs / FAQ */
  --cf-radius-sm:       4px;
  --cf-space-1:         4px;
  --cf-space-2:         8px;
  --cf-space-3:         12px;
  --cf-space-4:         16px;
  --cf-space-5:         24px;
  --cf-space-6:         32px;
  --cf-space-7:         48px;
  --cf-space-8:         64px;
  --cf-space-9:         96px;
  --cf-section-y:       96px;   /* default section vertical padding (desktop) */
  --cf-section-y-sm:    56px;   /* <=767px */

  /* hero ----------------------------------------------------------------- */
  --cf-hero-bg:         #241F20;
  --cf-hero-pad-top:    200px;
  --cf-hero-pad-bottom: 150px;
  --cf-hero-pad-x:      70px;
  --cf-hero-pad-top-sm: 140px;
  --cf-hero-pad-bottom-sm: 70px;
  --cf-hero-pad-x-sm:   20px;

  /* type ----------------------------------------------------------------- */
  --cf-fs-hero-1:       60px;   /* mirror h2 base, line-height 1.2 */
  --cf-fs-hero-1-sm:    41px;   /* <=767px */
  --cf-fs-hero-2:       60px;
  --cf-fs-hero-2-sm:    36px;   /* <=767px */
  --cf-fs-card-title:   2.5rem; /* 40px */
  --cf-fs-card-title-md: 18px;  /* <=1199px */
  --cf-fs-card-title-sm: 20px;  /* <=767px */
  --cf-fs-body:         18px;
  --cf-fs-list:         17px;   /* icon-list desktop */
  --cf-fs-list-md:      18px;   /* <=1199px */
  --cf-fs-list-sm:      20px;   /* <=767px */
  --cf-fs-h3:           30px;
  --cf-lh-heading:      1.2;
  --cf-lh-body:         1.6;

  /* media inside the feature cards --------------------------------------- */
  --cf-card-img-h:      500px;
  --cf-card-img-h-sm:   350px;

  /* misc ----------------------------------------------------------------- */
  --cf-icon-size:       20px;
  --cf-list-gap:        13px;   /* icon-list item spacing (13px/2 top+bottom) */
}


/* ==========================================================================
   2. MINIMAL RESET (hand-written, nothing lifted wholesale from a library)
   ========================================================================== */
*,
*::before,
*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color-scheme:dark;                  /* native form controls / scrollbars on dark */
  scroll-padding-top:var(--cf-space-8); /* anchor targets clear the sticky header */
}

body,
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,
ul,ol{margin:0}

ul,ol{padding:0;list-style:none}

img,svg,video{display:block;max-width:100%}
img{height:auto}                       /* component rules below set explicit heights */

button,input,select,textarea{font:inherit;color:inherit}

summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}


/* ==========================================================================
   3. BASE DOCUMENT + TYPOGRAPHY
   ========================================================================== */
body{
  /* D.1: body on --cf-black with white text (mirror body.lte-body-black) */
  background:var(--cf-black);
  color:var(--cf-white);
  font-family:var(--cf-font-primary);
  font-size:var(--cf-fs-body);
  font-weight:300;
  line-height:var(--cf-lh-body);
  font-synthesis-weight:none;          /* never fake-bold a 500/300 face */
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--cf-font-primary);
  font-weight:500;                     /* D.2: 500 = medium headings/buttons */
  line-height:var(--cf-lh-heading);
  color:var(--cf-white);
}

/* The privacy page (adatvedelem.html) uses a single h1 - same heading rhythm */
h1{font-size:var(--cf-fs-card-title)}
h3{font-size:var(--cf-fs-h3)}

p{line-height:var(--cf-lh-body)}

a{color:var(--cf-gold);text-decoration:none}
a:hover{text-decoration:underline}

svg{flex-shrink:0}

::selection{background:var(--cf-gold-accent);color:#000}


/* ==========================================================================
   4. ACCESSIBILITY UTILITIES
   ========================================================================== */
/* Real visually-hidden implementation (keeps the element in the a11y tree and
   in the tab order). Used by the visually hidden `#referenciak` h2. */
.cf-visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.cf-skip-link{
  position:absolute;
  top:0;
  left:-9999px;
  z-index:100;
  padding:var(--cf-space-3) var(--cf-space-5);
  background:var(--cf-gold);
  color:#000;
  font-weight:500;
  border-radius:0 0 var(--cf-radius) 0;
}
.cf-skip-link:focus{left:0;text-decoration:none}

/* Mandatory, everywhere: 2px focus ring with 2px offset (D.3) */
:focus-visible{
  outline:2px solid var(--cf-focus);
  outline-offset:2px;
}


/* ==========================================================================
   5. LAYOUT: container, sections, grid
   ========================================================================== */
.cf-container{
  width:100%;
  max-width:var(--cf-container);
  margin-inline:auto;
  padding-inline:var(--cf-gutter);
}

.cf-section{padding-block:var(--cf-section-y)}

/* Tuned variants - the two "new" sections carry the default rhythm explicitly
   so each section renders correctly on its own. */
.cf-section--features{padding-block:var(--cf-space-8) var(--cf-section-y)}
.cf-section--refs{padding-block:var(--cf-space-8)}
.cf-section--faq{padding-block:var(--cf-section-y)}
.cf-section--quote{padding-block:var(--cf-section-y)}

.cf-section__title{
  font-size:var(--cf-fs-card-title);
  font-weight:500;
  line-height:var(--cf-lh-heading);
  color:var(--cf-white);
  margin-bottom:var(--cf-space-4);
}

.cf-section__lead{
  color:var(--cf-text);
  font-weight:300;
  max-width:var(--cf-container);
  margin-bottom:var(--cf-space-6);
}

.cf-grid{
  display:grid;
  gap:var(--cf-space-5);   /* closest frozen token to the mirror's 20px widget spacing */
}

/* #rolunk: mirror `--e-con-grid-template-columns:repeat(2, 1fr)` +
   `--e-con-grid-template-rows:repeat(2, 1fr)`, `--grid-auto-flow:row` */
.cf-grid--2{
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
  grid-auto-flow:row;
}


/* ==========================================================================
   6. HEADER + NAVIGATION
   ========================================================================== */
.cf-header{
  position:sticky;                 /* replaces the mirror's waypoint/affix JS */
  top:0;
  z-index:50;
  background:rgba(15,14,15,.92);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--cf-hairline);
}

.cf-header__inner{
  display:flex;
  flex-wrap:wrap;                  /* lets the mobile nav panel drop to line 2 */
  align-items:center;
  justify-content:space-between;
  gap:var(--cf-space-4);
  padding-block:var(--cf-space-3);
}

.cf-logo{display:inline-flex;align-items:center;flex:0 0 auto}
.cf-logo:hover{text-decoration:none}
.cf-logo__img{height:40px;width:auto;display:block}

.cf-nav{display:flex;align-items:center}

.cf-nav__list{display:flex;align-items:center;flex-wrap:wrap;gap:0}

/* Mirror nav: plain 1-row list, links coloured white with a light weight */
.cf-nav__link{
  display:inline-block;
  padding:var(--cf-space-2) var(--cf-space-4);
  color:var(--cf-white);
  font-weight:300;
  font-size:15px;                  /* not tokenised: mirror nav is 14px */
  line-height:var(--cf-lh-body);
}
.cf-nav__link:hover,
.cf-nav__link:focus-visible{color:var(--cf-gold);text-decoration:none}

.cf-nav__toggle{
  display:none;                    /* desktop: the list is always visible */
  align-items:center;
  gap:var(--cf-space-2);
  padding:var(--cf-space-2) var(--cf-space-3);
  border:1px solid var(--cf-hairline);
  border-radius:var(--cf-radius-sm);
  background:transparent;
  color:var(--cf-white);
  font-family:var(--cf-font-primary);
  font-size:15px;
  font-weight:300;
  cursor:pointer;
}
.cf-nav__toggle:hover{color:var(--cf-gold);border-color:var(--cf-gold)}
.cf-nav__toggle svg{width:var(--cf-icon-size);height:var(--cf-icon-size)}

/* Phone CTA: desktop only (contract B.2) */
.cf-header__phone{
  display:inline-flex;
  align-items:center;
  gap:var(--cf-space-2);
  color:var(--cf-white);
  font-weight:300;
  font-size:15px;
  white-space:nowrap;
}
.cf-header__phone svg{width:var(--cf-icon-size);height:var(--cf-icon-size);color:var(--cf-gold)}
.cf-header__phone:hover{color:var(--cf-gold);text-decoration:none}


/* ==========================================================================
   7. HERO
   ========================================================================== */
.cf-hero{
  /* mirror f457557: solid #241F20, padding 200/150/70/70 */
  background:var(--cf-hero-bg);
  padding:var(--cf-hero-pad-top) var(--cf-hero-pad-x) var(--cf-hero-pad-bottom);
  text-align:center;
}

.cf-hero__title{
  display:block;
  max-width:var(--cf-container);   /* mirror hero boxed container = 1280px - 2*70px */
  margin-inline:auto;
  font-size:var(--cf-fs-hero-1);
  font-weight:500;                 /* line 1: Gilroy 500 (mirror 8e39af0) */
  line-height:var(--cf-lh-heading);
  color:var(--cf-white);
  text-align:center;
}

.cf-hero__title--light{
  font-size:var(--cf-fs-hero-2);
  font-weight:300;                 /* line 2: Gilroy 300 (mirror 086d22f) */
}

.cf-hero__cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--cf-space-3);
  margin-top:var(--cf-space-6);
}


/* ==========================================================================
   8. FEATURE CARDS
   ========================================================================== */
.cf-card{
  display:flex;
  flex-direction:column;   /* mirror --display:flex + --flex-direction:column */
  align-self:center;       /* mirror .e-con{--align-self:center} */
  gap:var(--cf-space-5);
  min-width:0;             /* allows long HU words to wrap inside the grid */
}

.cf-card__body{
  display:flex;
  flex-direction:column;
  gap:var(--cf-space-5);
  justify-content:center;  /* mirror 9ce2a05 / c8d2b4e --justify-content:center */
  align-items:flex-start;
  min-width:0;
}

.cf-card__media{
  display:flex;
  flex-direction:column;
  gap:var(--cf-space-3);
  width:100%;
}

.cf-card__media img{
  width:100%;
  height:var(--cf-card-img-h);   /* mirror 453d53c/f2556c0 img height:500px */
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:var(--cf-radius);
}

.cf-card__title{
  font-size:var(--cf-fs-card-title);   /* mirror b693da6/e44d391/97d21c1: 2.5rem/500 */
  font-weight:500;
  line-height:var(--cf-lh-heading);
  color:var(--cf-white);
}

.cf-card__text{
  color:var(--cf-text);                /* mirror text-editor opacity .8 */
  font-size:var(--cf-fs-body);
  font-weight:300;
  line-height:var(--cf-lh-body);
}

/* Cards A and C on mobile: media above the text (see the 767px block). */
.cf-card--media-first{min-width:0}


/* ==========================================================================
   9. ICON LIST (card B: the 4 bullet points)
   ========================================================================== */
.cf-list{display:flex;flex-direction:column;width:100%}

.cf-list__item{
  display:flex;
  align-items:center;
  gap:var(--cf-space-3);               /* mirror: icon padding-inline-end 6px + gap */
  padding-block:calc(var(--cf-list-gap) / 2);  /* 6.5px + 6.5px = 13px between rows */
  font-family:var(--cf-font-primary);
  font-size:var(--cf-fs-list);         /* 17px desktop */
  font-weight:300;
  color:var(--cf-white);
}

.cf-list__icon{
  width:var(--cf-icon-size);
  height:var(--cf-icon-size);
  color:var(--cf-white);               /* mirror icon colour #FFF */
}
.cf-list__icon svg{width:100%;height:100%}


/* ==========================================================================
   10. BUTTONS
   ========================================================================== */
.cf-btn{
  display:inline-block;
  font-family:var(--cf-font-primary);
  font-size:15px;                      /* Elementor default button size */
  font-weight:500;
  line-height:var(--cf-lh-heading);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  border-radius:var(--cf-radius-pill);
  padding:15px 25px;                   /* mirror: padding 15px 25px */
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cf-btn:hover,
.cf-btn:focus-visible{text-decoration:none}
.cf-btn[disabled],
.cf-btn[aria-busy="true"]{opacity:.6;cursor:progress}

/* mirror: background accent #B99961, black text, 1px accent border, 25px radius */
.cf-btn--primary{
  background:var(--cf-gold-accent);
  color:#000;
  border-color:var(--cf-gold-accent);
}
/* mirror: hover/focus -> background #231F20, text #C19F5F, accent border kept */
.cf-btn--primary:hover,
.cf-btn--primary:focus-visible{
  background:var(--cf-btn-hover-bg);
  color:var(--cf-btn-hover-fg);
  border-color:var(--cf-gold-accent);
}


/* ==========================================================================
   11. REFERENCE MARQUEE (pure CSS - replaces Swiper autoplay)
   ========================================================================== */
.cf-marquee{
  overflow:hidden;
  width:100%;
  min-height:260px;                    /* D.6: fixed band height -> no layout shift */
  display:flex;
  align-items:center;
}

.cf-marquee__track{
  display:flex;                        /* mirror: .swiper-wrapper{display:flex;align-items:center} */
  align-items:center;
  gap:15px;                            /* mirror image_spacing_custom = 15px */
  width:max-content;
  animation:cf-marquee 90s linear infinite;
}

.cf-marquee__item{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.cf-marquee__item img{
  height:160px;
  width:auto;
  max-width:260px;
  object-fit:contain;
  display:block;
}

@keyframes cf-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}       /* track is duplicated once -> seamless */
}


/* ==========================================================================
   12. FAQ (native <details>, no JS)
   ========================================================================== */
.cf-faq{display:flex;flex-direction:column;gap:var(--cf-space-3)}

.cf-faq__item{
  background:rgba(255,255,255,.03);
  border:1px solid var(--cf-hairline);
  border-radius:var(--cf-radius);
  padding:var(--cf-space-4) var(--cf-space-5);
}

.cf-faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--cf-space-3);
  font-family:var(--cf-font-primary);
  font-size:var(--cf-fs-body);
  font-weight:500;
  color:var(--cf-white);
}
.cf-faq__q:hover{color:var(--cf-gold)}
.cf-faq__q svg{width:var(--cf-icon-size);height:var(--cf-icon-size);color:var(--cf-gold);
  transition:transform .25s ease}
.cf-faq__item[open] .cf-faq__q{color:var(--cf-gold)}
.cf-faq__item[open] .cf-faq__q svg{transform:rotate(180deg)}

.cf-faq__a{
  margin-top:var(--cf-space-4);
  color:var(--cf-text);
  font-weight:300;
  line-height:var(--cf-lh-body);
}
.cf-faq__a p:not(:last-child){margin-bottom:var(--cf-space-3)}


/* ==========================================================================
   13. QUOTE FORM
   ========================================================================== */
.cf-form{display:flex;flex-direction:column;gap:var(--cf-space-5)}

.cf-form__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--cf-space-5);
}

.cf-field{
  display:flex;
  flex-direction:column;
  gap:var(--cf-space-2);
  min-width:0;
}
.cf-field--full{grid-column:1 / -1}

.cf-field__label{
  font-size:15px;
  font-weight:500;
  color:var(--cf-white);
}

/* the frozen `*` marker on required labels */
.cf-req{color:var(--cf-gold);margin-left:var(--cf-space-1)}

/* mirror .lte-background-black input/textarea/select: background #090909 */
.cf-field__input,
.cf-field__select,
.cf-field__textarea{
  background:var(--cf-input-bg);
  color:var(--cf-white);
  border:1px solid var(--cf-hairline);
  border-radius:var(--cf-radius);
  padding:12px 14px;
  font-family:var(--cf-font-primary);
  font-size:16px;
  line-height:var(--cf-lh-body);
  width:100%;
}
.cf-field__input::placeholder,
.cf-field__textarea::placeholder{color:var(--cf-text-dim)}

.cf-field__textarea{min-height:160px;resize:vertical}

/* Native select widget kept on purpose: no arrow image can be used offline. */
.cf-field__select{cursor:pointer}

.cf-field__check{
  display:flex;
  align-items:flex-start;
  gap:var(--cf-space-3);
  font-size:15px;
  font-weight:300;
  line-height:var(--cf-lh-body);
  color:var(--cf-text);
}
.cf-field__check input[type="checkbox"]{
  flex:0 0 auto;
  width:var(--cf-icon-size);
  height:var(--cf-icon-size);
  margin:2px 0 0;
  accent-color:var(--cf-gold-accent);
}
.cf-field__check a{color:var(--cf-gold);text-decoration:underline}

.cf-field__error{
  color:var(--cf-red);
  font-size:14px;
  font-weight:300;
  margin:var(--cf-space-1) 0 0;
}

.cf-field__hint{
  color:var(--cf-text-dim);
  font-size:14px;
  font-weight:300;
  margin:var(--cf-space-1) 0 0;
}

/* malformed field */
.cf-form [aria-invalid="true"]{border-color:var(--cf-red)}

.cf-form__actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--cf-space-4);
}

.cf-form__status{
  min-height:var(--cf-space-5);   /* reserve the line: no layout shift on status */
  font-size:15px;
  font-weight:300;
  color:var(--cf-text);
}
.cf-form__status--ok{color:var(--cf-green)}
.cf-form__status--err{color:var(--cf-red)}
.cf-form__status a{color:var(--cf-gold);text-decoration:underline}

/* honeypot: off-screen but never `display:none` (bots skip hidden fields) */
.cf-hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}


/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.cf-footer{
  /* mirror #lte-widgets-footer background + gold wrapper rule */
  background:var(--cf-near-black);
  border-top:1px solid var(--cf-gold);
  color:var(--cf-white);
  padding-block:var(--cf-space-8) 0;
}

.cf-footer a{color:var(--cf-white)}
.cf-footer a:hover{color:var(--cf-gold);text-decoration:underline}

.cf-footer__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--cf-space-7);
}

.cf-footer__col{
  display:flex;
  flex-direction:column;
  gap:var(--cf-space-4);
  min-width:0;
}

/* contact column headings are gold (D.3) */
.cf-footer__heading{
  font-size:var(--cf-fs-h3);
  font-weight:500;
  line-height:var(--cf-lh-heading);
  color:var(--cf-gold);
}

.cf-contact-list{
  display:flex;
  flex-direction:column;
  gap:var(--cf-space-3);
}

.cf-contact-list__item{
  display:flex;
  align-items:flex-start;
  gap:var(--cf-space-3);
  font-size:15px;
  font-weight:300;
  line-height:var(--cf-lh-body);
}
.cf-contact-list__item svg{
  width:var(--cf-icon-size);
  height:var(--cf-icon-size);
  margin-top:2px;
  color:var(--cf-gold);
}

.cf-contact-list__label{color:var(--cf-text-dim);flex:0 0 auto}
.cf-contact-list__value{color:var(--cf-white);word-break:break-word}

.cf-social{
  display:flex;
  align-items:center;
  gap:var(--cf-space-3);
}

.cf-social__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--cf-hairline);
  border-radius:50%;
  color:var(--cf-white);
}
.cf-social__link:hover,
.cf-social__link:focus-visible{
  color:var(--cf-gold);
  border-color:var(--cf-gold);
  text-decoration:none;
}
.cf-social__link svg{width:var(--cf-icon-size);height:var(--cf-icon-size)}

/* mirror .copyright-block: transparent, white, centered, padding 42px 0 26px, 14px */
.cf-copyright{
  background:transparent;
  color:var(--cf-text-dim);
  text-align:center;
  padding:42px 0 26px;
  font-size:14px;
  font-weight:300;
}


/* ==========================================================================
   15. RESPONSIVE OVERRIDES (1199 / 991 / 767 / 479 only)
   ========================================================================== */

/* ---- <=1199px (mirror @media(max-width:1199px)) ------------------------- */
@media (max-width:1199px){
  .cf-card__title{font-size:var(--cf-fs-card-title-md)}   /* mirror: 18px */
  .cf-list__item{font-size:var(--cf-fs-list-md)}          /* mirror: 18px */
}

/* ---- <=991px: nav collapses into a toggled panel ------------------------ */
@media (max-width:991px){
  .cf-nav{
    display:none;            /* hidden until site.js adds .cf-nav--open */
    order:3;
    width:100%;
    padding-bottom:var(--cf-space-3);
  }
  .cf-nav--open{display:block}

  .cf-nav__toggle{display:inline-flex;order:2}

  .cf-nav__list{flex-direction:column;align-items:stretch;width:100%}
  .cf-nav__item{width:100%}
  .cf-nav__link{
    display:block;
    padding:var(--cf-space-3) 0;
    border-top:1px solid var(--cf-hairline);
    font-size:var(--cf-fs-body);
  }

  .cf-header__phone{display:none}   /* contract B.2: desktop only */

  .cf-footer__cols{grid-template-columns:repeat(2,1fr)}
}

/* ---- <=767px (mirror @media(max-width:767px)) -------------------------- */
@media (max-width:767px){
  .cf-hero{
    padding:var(--cf-hero-pad-top-sm) var(--cf-hero-pad-x-sm) var(--cf-hero-pad-bottom-sm);
  }
  .cf-hero__title{font-size:var(--cf-fs-hero-1-sm)}        /* mirror: 41px */
  .cf-hero__title--light{font-size:var(--cf-fs-hero-2-sm)} /* mirror: 36px */

  .cf-section,
  .cf-section--features,
  .cf-section--faq,
  .cf-section--quote{padding-block:var(--cf-section-y-sm)}
  .cf-section--refs{padding-block:var(--cf-space-7)}

  .cf-section__title{font-size:var(--cf-fs-h3)}

  /* cards stack A, B, C */
  .cf-grid--2{grid-template-columns:1fr}

  .cf-card__title{font-size:var(--cf-fs-card-title-sm)}    /* mirror: 20px */
  .cf-card__media img{height:var(--cf-card-img-h-sm)}      /* mirror: 350px */

  /* MOBILE ORDER RULE: the card image renders above the card text
     (mirror `--order` overrides on 453d53c / e2ef733). */
  .cf-card__media,
  .cf-card--media-first .cf-card__media{order:-1}

  .cf-list__item{font-size:var(--cf-fs-list-sm)}           /* mirror: 20px */

  .cf-form__grid{grid-template-columns:1fr}

  .cf-footer__cols{grid-template-columns:1fr}

  .cf-marquee{min-height:200px}
  .cf-marquee__item img{height:120px}
}

/* ---- <=479px: very small phones ---------------------------------------- */
@media (max-width:479px){
  .cf-header__inner{padding-block:var(--cf-space-2)}

  .cf-hero__title{font-size:var(--cf-fs-hero-2-sm)}        /* 36px */
  .cf-hero__title--light{font-size:var(--cf-fs-h3)}        /* 30px */

  .cf-btn{width:100%}                                      /* full-width tap targets */
  .cf-form__actions{flex-direction:column;align-items:stretch}

  .cf-contact-list__item{flex-wrap:wrap}
  .cf-social{flex-wrap:wrap}
}


/* ==========================================================================
   16. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .cf-marquee{min-height:0}
  .cf-marquee__track{
    animation:none;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
    row-gap:var(--cf-space-5);
  }
  .cf-marquee__item img{height:120px}
  .cf-faq__q svg{transition:none}
  /* the single documented `!important`: a user asking for reduced motion must win
     over every component transition, including ones declared later in this file */
  *,*::before,*::after{transition-duration:.001ms !important}
}


/* ==========================================================================
   17. PRINT - black text on white, no dark bands
   ========================================================================== */
@media print{
  html,body{background:#fff;color:#000}
  .cf-skip-link,
  .cf-hp{display:none}
  .cf-header{position:static;background:#fff;border-bottom:1px solid #000}
  :is(.cf-hero,.cf-footer,.cf-copyright,.cf-faq__item,.cf-marquee,
      .cf-field__input,.cf-field__select,.cf-field__textarea,
      .cf-form__status,.cf-card__media img){
    background:#fff;
    border-color:#bbb;
  }
  :is(.cf-header,.cf-hero,.cf-footer,.cf-copyright,.cf-card__title,.cf-card__text,
      .cf-section__title,.cf-section__lead,.cf-faq__q,.cf-faq__a,.cf-list__item,
      .cf-nav__link,.cf-header__phone,.cf-field__label,.cf-field__check,
      .cf-field__hint,.cf-field__error,.cf-form__status){color:#000}
  .cf-btn--primary{background:#fff;color:#000;border-color:#000}
  .cf-marquee{min-height:0;overflow:visible}
  .cf-marquee__track{animation:none;flex-wrap:wrap;width:auto}
}