/* ============================================================================
   Hanamal — Component styles (ships in the token closure via styles.css).
   All classes are `hn-` prefixed and RTL-native (logical properties only).
   React components in components/ apply these classes; consumers get real
   hover/focus states with zero CSS-in-JS.
   ============================================================================ */

/* ---------- container helper ---------- */
.hn-container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}
.hn-container--narrow{max-width:var(--container-narrow)}

/* ============================ BUTTON ============================ */
.hn-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:inherit;font-weight:var(--fw-bold);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;padding:14px 26px;min-height:var(--tap-min);text-decoration:none;font-size:var(--fs-base);line-height:1;transition:background var(--transition-base),color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-fast)}
.hn-btn svg{width:19px;height:19px;fill:currentColor;flex-shrink:0}
.hn-btn:active{transform:translateY(1px)}
.hn-btn--primary{background:var(--color-accent);color:#fff}
.hn-btn--primary:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-md);color:#fff}
.hn-btn--secondary{background:var(--color-primary);color:#fff}
.hn-btn--secondary:hover{background:var(--color-primary-hover);color:#fff}
.hn-btn--outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.hn-btn--outline:hover{background:var(--color-primary);color:#fff}
.hn-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hn-btn--ghost:hover{background:#fff;color:var(--color-primary)}
.hn-btn--sm{padding:9px 18px;font-size:var(--fs-sm);min-height:38px}
.hn-btn--lg{padding:16px 40px;font-size:var(--fs-md)}
.hn-btn--block{width:100%}
.hn-btn:disabled,.hn-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ============================ BADGE / PILL ============================ */
.hn-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);line-height:1;border-radius:var(--radius-sm);padding:4px 10px}
.hn-badge--accent{color:var(--color-red-500);background:transparent;padding-inline:0}
.hn-badge--solid{background:var(--color-accent);color:#fff}
.hn-badge--navy{background:var(--color-navy-500);color:#fff}
.hn-badge--soft{background:var(--color-navy-50);color:var(--color-navy-700)}
.hn-pill{display:inline-flex;align-items:center;gap:6px;background:var(--color-navy-50);color:var(--color-navy-700);border-radius:var(--radius-pill);padding:6px 14px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:1}
.hn-pill svg{width:15px;height:15px;fill:var(--color-red-500)}
.hn-pill--onDark{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--color-navy-100)}
.hn-pill--onDark svg{fill:var(--color-red-300)}

/* ============================ STRIPE (maritime accent) ============================ */
.hn-stripe{height:6px;background:var(--stripe)}
.hn-stripe--thin{height:4px;background:repeating-linear-gradient(-45deg,var(--color-navy-500) 0 10px,var(--color-navy-300) 10px 20px)}
.hn-stripe--dots{height:4px;background:repeating-linear-gradient(-45deg,var(--color-red-500) 0 12px,transparent 12px 24px)}

/* ============================ SECTION HEADING ============================ */
.hn-sechead{max-width:640px;margin:0 auto var(--space-10)}
.hn-sechead--center{text-align:center}
.hn-sechead--start{text-align:start;margin-inline:0}
.hn-sechead__kicker{color:var(--color-red-500);font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:var(--ls-wide)}
.hn-sechead__title{font-size:var(--fs-2xl);font-weight:var(--fw-extra);color:var(--color-text-heading);margin:var(--space-2) 0 0;line-height:var(--lh-tight)}
.hn-sechead--onDark .hn-sechead__kicker{color:var(--color-red-300)}
.hn-sechead--onDark .hn-sechead__title{color:#fff}

/* ============================ FIELD (form) ============================ */
.hn-field{display:block}
.hn-field__label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text);margin-bottom:6px}
.hn-field__req{color:var(--color-red-500)}
.hn-field__control{width:100%;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px var(--space-3);font-family:inherit;font-size:var(--fs-base);min-height:var(--tap-min);color:var(--color-text);background:#fff}
.hn-field__control::placeholder{color:var(--color-gray-400)}
.hn-field__control:focus{outline:none;border-color:var(--color-navy-400);box-shadow:var(--shadow-focus)}
textarea.hn-field__control{min-height:110px;resize:vertical}
.hn-field__hint{font-size:var(--fs-xs);color:var(--color-text-subtle);margin-top:5px}
.hn-field--error .hn-field__control{border-color:var(--color-error)}
.hn-field--error .hn-field__hint{color:var(--color-error)}
/* on-dark variant (navy quote band) */
.hn-field--onDark .hn-field__control{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff}
.hn-field--onDark .hn-field__control::placeholder{color:var(--color-navy-200)}
.hn-field--onDark .hn-field__control option{color:#111}

/* ============================ QUOTE FORM band ============================ */
.hn-quote{background:var(--color-navy-500);color:#fff;padding-block:var(--section-gap-sm);position:relative;overflow:hidden}
.hn-quote__stripe{height:6px;background:var(--stripe);position:absolute;inset-block-start:0;inset-inline:0}
.hn-quote__title{font-size:var(--fs-xl);font-weight:var(--fw-bold);text-align:center;margin:var(--space-2) 0 var(--space-6)}
.hn-quote__fields{display:grid;grid-template-columns:1fr;gap:var(--space-3);max-width:760px;margin-inline:auto}
.hn-quote__full{grid-column:1/-1}
.hn-quote__submit{grid-column:1/-1;text-align:center}
@media(min-width:600px){.hn-quote__fields{grid-template-columns:1fr 1fr 1fr}}

/* ============================ CARDS ============================ */
/* product card */
.hn-pcard{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--transition-base),transform var(--transition-base),border-color var(--transition-base)}
.hn-pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--color-navy-200)}
.hn-pcard__media{aspect-ratio:1/1;overflow:hidden;background:#fff}
.hn-pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.hn-pcard:hover .hn-pcard__media img{transform:scale(1.04)}
.hn-pcard__b{padding:var(--space-4);display:flex;flex-direction:column;flex:1}
.hn-pcard__cat{font-size:var(--fs-xs);color:var(--color-red-500);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide)}
.hn-pcard__t{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--color-text-heading);margin:3px 0 var(--space-3);line-height:var(--lh-snug)}
.hn-pcard__spec{font-size:var(--fs-xs);color:var(--color-text-subtle);margin:0 0 var(--space-4);padding-top:var(--space-2);border-top:1px solid var(--color-border-subtle)}
.hn-pcard__btn{margin-top:auto;display:block;text-align:center;background:var(--color-primary);color:#fff;font-weight:var(--fw-bold);border-radius:var(--radius-md);padding:11px;font-size:var(--fs-sm);text-decoration:none;min-height:var(--tap-min);transition:background var(--transition-base)}
.hn-pcard__btn:hover{background:var(--color-primary-hover);color:#fff}

/* recipe card */
.hn-rcard{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform var(--transition-base),box-shadow var(--transition-base)}
.hn-rcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.hn-rcard__media{display:block;aspect-ratio:3/2;overflow:hidden}
.hn-rcard__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.hn-rcard:hover .hn-rcard__media img{transform:scale(1.05)}
.hn-rcard__b{padding:var(--space-4)}
.hn-rcard__tag{font-size:var(--fs-xs);color:var(--color-red-500);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide)}
.hn-rcard__t{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-text-heading);margin:6px 0 var(--space-2);line-height:var(--lh-snug)}
.hn-rcard__l{color:var(--color-primary);font-weight:var(--fw-bold);font-size:var(--fs-sm);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.hn-rcard__l svg{width:16px;height:16px;fill:currentColor}
.hn-rcard__l:hover{color:var(--color-accent)}

/* category tile */
.hn-ccard{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base)}
.hn-ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.hn-ccard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.hn-ccard:hover img{transform:scale(1.06)}
.hn-ccard__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,61,.1),rgba(20,30,61,.82))}
.hn-ccard__s{position:absolute;top:0;inset-inline:0;height:5px;background:repeating-linear-gradient(-45deg,var(--color-red-500) 0 12px,transparent 12px 24px)}
.hn-ccard__t{position:absolute;bottom:0;inset-inline:0;padding:var(--space-4);color:#fff;font-size:var(--fs-lg);font-weight:var(--fw-bold)}

/* blog card */
.hn-bcard{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--transition-base),box-shadow var(--transition-base)}
.hn-bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.hn-bcard__media{aspect-ratio:16/10;overflow:hidden}
.hn-bcard__media img{width:100%;height:100%;object-fit:cover}
.hn-bcard__b{padding:var(--space-5);display:flex;flex-direction:column;flex:1}
.hn-bcard__tag{font-size:var(--fs-xs);color:var(--color-red-500);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide)}
.hn-bcard__t{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-text-heading);margin:6px 0 var(--space-2);line-height:var(--lh-snug)}
.hn-bcard__x{font-size:var(--fs-sm);color:var(--color-text-muted);line-height:var(--lh-relaxed);margin:0 0 var(--space-4)}
.hn-bcard__f{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.hn-bcard__d{font-size:var(--fs-xs);color:var(--color-text-subtle)}
.hn-bcard__l{color:var(--color-primary);font-weight:var(--fw-bold);font-size:var(--fs-sm);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.hn-bcard__l svg{width:16px;height:16px;fill:currentColor}
.hn-bcard__l:hover{color:var(--color-accent)}

/* stat card */
.hn-stat{border-radius:var(--radius-lg);padding:var(--space-6) var(--space-4);text-align:center}
.hn-stat--onDark{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff}
.hn-stat--red{background:var(--color-red-500);color:#fff}
.hn-stat__n{font-size:var(--fs-3xl);font-weight:var(--fw-extra);line-height:1}
.hn-stat__n .u{color:var(--color-red-300)}
.hn-stat--red .hn-stat__n .u{color:#fff}
.hn-stat__r{width:36px;height:3px;background:var(--color-red-500);margin:var(--space-2) auto 0;border-radius:2px}
.hn-stat--red .hn-stat__r{background:rgba(255,255,255,.6)}
.hn-stat__l{font-size:var(--fs-sm);color:var(--color-navy-100);margin-top:var(--space-2)}
.hn-stat--red .hn-stat__l{color:#fff;opacity:.9}

/* ============================ SPEC TABLE ============================ */
.hn-spec{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
.hn-spec__row{display:flex;justify-content:space-between;gap:var(--space-4);padding:12px var(--space-4);font-size:var(--fs-sm)}
.hn-spec__row:nth-child(odd){background:var(--color-gray-50)}
.hn-spec__k{color:var(--color-text-muted);display:flex;align-items:center;gap:8px}
.hn-spec__k svg{width:16px;height:16px;fill:var(--color-navy-400)}
.hn-spec__v{color:var(--color-text-heading);font-weight:var(--fw-bold);unicode-bidi:plaintext}

/* ============================ FAQ ============================ */
.hn-faq{border:0;padding:0}
.hn-faq details{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-3);overflow:hidden}
.hn-faq summary{padding:var(--space-4) var(--space-5);font-weight:var(--fw-bold);color:var(--color-text-heading);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.hn-faq summary::-webkit-details-marker{display:none}
.hn-faq summary::after{content:"+";color:var(--color-red-500);font-size:22px;font-weight:700;line-height:1}
.hn-faq details[open] summary::after{content:"–"}
.hn-faq p{margin:0;padding:0 var(--space-5) var(--space-5);color:var(--color-text-muted);line-height:var(--lh-relaxed)}

/* ============================ TRUST STRIP ============================ */
.hn-trust{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hn-trust .hn-trust__b{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--color-navy-100);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-pill);padding:8px 16px}
.hn-trust__b svg{width:16px;height:16px;fill:var(--color-red-300)}
.hn-trust__b b{color:#fff}
.hn-trust--light .hn-trust__b{color:var(--color-text-muted);background:var(--color-navy-50);border-color:transparent}
.hn-trust--light .hn-trust__b svg{fill:var(--color-red-500)}
.hn-trust--light .hn-trust__b b{color:var(--color-navy-700)}

/* ============================ BREADCRUMBS ============================ */
.hn-crumbs{background:#fff;border-bottom:1px solid var(--color-border-subtle)}
.hn-crumbs__in{padding-block:var(--space-3);font-size:var(--fs-sm);color:var(--color-text-subtle);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hn-crumbs a{color:var(--color-text-muted);text-decoration:none}
.hn-crumbs a:hover{color:var(--color-navy-500)}
.hn-crumbs__sep{color:var(--color-border-strong)}
.hn-crumbs [aria-current]{color:var(--color-navy-500);font-weight:var(--fw-semibold)}

/* ============================ PAGINATION ============================ */
.hn-pager{display:flex;justify-content:center;gap:var(--space-2)}
.hn-pager a,.hn-pager button{min-width:var(--tap-min);height:var(--tap-min);display:grid;place-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);text-decoration:none;color:var(--color-navy-600);font-weight:var(--fw-semibold);padding:0 12px;background:#fff;cursor:pointer;font-family:inherit;font-size:var(--fs-base)}
.hn-pager a:hover,.hn-pager button:hover{background:var(--color-navy-50)}
.hn-pager .on{background:var(--color-navy-500);color:#fff;border-color:var(--color-navy-500)}

/* ============================ HERO ============================ */
.hn-hero{background:linear-gradient(180deg,var(--color-navy-500),var(--color-navy-700));color:#fff;position:relative;overflow:hidden}
.hn-hero__stripe{height:6px;background:var(--stripe)}
.hn-hero__in{display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:center;padding-block:var(--section-gap)}
.hn-hero__kicker{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-pill);padding:6px 16px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide)}
.hn-hero__kicker svg{width:15px;height:15px;fill:var(--color-red-300)}
.hn-hero h1{font-size:var(--fs-3xl);font-weight:var(--fw-extra);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);margin:var(--space-4) 0}
.hn-hero h1 .u{border-bottom:5px solid var(--color-red-500);padding-bottom:2px}
.hn-hero__lead{font-size:var(--fs-md);color:var(--color-navy-100);max-width:52ch;line-height:var(--lh-relaxed);margin:0 0 var(--space-6)}
.hn-hero__cta{display:flex;gap:var(--space-4);flex-wrap:wrap}
.hn-hero__trust{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.14)}
.hn-hero__trust .t{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--color-navy-100)}
.hn-hero__trust .t b{color:#fff;font-size:var(--fs-md)}
.hn-hero__trust svg{width:20px;height:20px;fill:var(--color-red-300)}
.hn-hero__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-height:440px;width:100%;object-fit:cover}
@media(min-width:768px){.hn-hero__in{grid-template-columns:1.05fr .95fr;gap:var(--space-12)}.hn-hero__media{order:2}}

/* ============================ HEADER ============================ */
.hn-hdr{position:sticky;top:0;z-index:var(--z-sticky);background:#fff;box-shadow:var(--shadow-sm)}
.hn-hdr__top{background:var(--color-navy-500);color:var(--color-navy-100);font-size:var(--fs-xs)}
.hn-hdr__top .hn-container{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:var(--space-4)}
.hn-hdr__top a{color:var(--color-navy-100);text-decoration:none}
.hn-hdr__top a:hover{color:#fff}
.hn-hdr__right{display:flex;align-items:center;gap:var(--space-4)}
.hn-hdr__soc{display:flex;gap:4px}
.hn-hdr__soc a{width:28px;height:28px;display:grid;place-items:center;border-radius:4px}
.hn-hdr__soc a:hover{background:var(--color-navy-600)}
.hn-hdr__soc svg{width:14px;height:14px;fill:currentColor}
.hn-hdr__lang{display:flex;gap:4px;padding-inline-start:var(--space-3);border-inline-start:1px solid var(--color-navy-400)}
.hn-hdr__lang a{font-size:11px;font-weight:600;padding:3px 6px;border-radius:4px;opacity:.7;color:var(--color-navy-100);text-decoration:none}
.hn-hdr__lang a:hover,.hn-hdr__lang a.on{opacity:1;background:var(--color-navy-600);color:#fff}
.hn-hdr__main .hn-container{display:flex;align-items:center;gap:var(--space-6);min-height:68px}
.hn-hdr__logo img{height:48px}
.hn-hdr__nav{display:none}
.hn-hdr__nav ul{list-style:none;display:flex;gap:var(--space-1);margin:0;padding:0}
.hn-hdr__nav a{display:block;padding:10px var(--space-3);text-decoration:none;color:var(--color-navy-700);font-weight:var(--fw-semibold);font-size:var(--fs-sm);border-radius:var(--radius-sm);white-space:nowrap}
.hn-hdr__nav a:hover{background:var(--color-navy-50);color:var(--color-navy-500)}
.hn-hdr__nav a.on{box-shadow:inset 0 -3px 0 var(--color-red-500);color:var(--color-navy-500)}
.hn-hdr__actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-2)}
.hn-hdr__icon{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-pill);color:var(--color-navy-500);cursor:pointer;border:0;background:transparent}
.hn-hdr__icon:hover{background:var(--color-navy-50)}
.hn-hdr__icon svg{width:22px;height:22px;fill:currentColor}
@media(min-width:900px){.hn-hdr__nav{display:block}.hn-hdr__burger{display:none}}

/* mobile drawer — scrim+panel live in a fixed overflow-clipped wrapper so the
   off-canvas (translateX) parked state can't create horizontal page scroll */
.hn-mnav{position:absolute;opacity:0;pointer-events:none}
.hn-mdrawer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:var(--z-overlay)}
.hn-mmenu{position:absolute;inset:0 0 0 auto;width:min(86vw,340px);background:#fff;transform:translateX(100%);transition:transform var(--transition-slow);box-shadow:var(--shadow-lg);overflow-y:auto;padding:var(--space-4);pointer-events:auto}
.hn-mnav:checked ~ .hn-mdrawer{pointer-events:auto}
.hn-mnav:checked ~ .hn-mdrawer .hn-mmenu{transform:translateX(0)}
.hn-mscrim{position:absolute;inset:0;background:rgba(14,22,45,.5);opacity:0;visibility:hidden;transition:var(--transition-base);pointer-events:auto}
.hn-mnav:checked ~ .hn-mdrawer .hn-mscrim{opacity:1;visibility:visible}
.hn-mmenu__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}
.hn-mmenu__head img{height:38px}
.hn-mmenu__close{width:44px;height:44px;border:0;background:var(--color-gray-100);border-radius:var(--radius-sm);font-size:22px;color:var(--color-navy-500);cursor:pointer;display:grid;place-items:center}
.hn-mmenu ul{list-style:none;margin:0;padding:0}
.hn-mmenu li{border-bottom:1px solid var(--color-border-subtle)}
.hn-mmenu a{display:block;text-decoration:none;color:var(--color-navy-700);font-weight:var(--fw-semibold);font-size:var(--fs-md);padding:14px var(--space-2);min-height:var(--tap-min)}

/* ============================ FOOTER ============================ */
.hn-ft__stripe{height:6px;background:var(--stripe)}
.hn-ftsocial{background:var(--color-red-500)}
.hn-ftsocial .hn-container{display:flex;justify-content:space-between;align-items:center;padding-block:var(--space-4);flex-wrap:wrap;gap:var(--space-3)}
.hn-ftsocial h2{color:#fff;margin:0;font-size:var(--fs-lg)}
.hn-ftsocial__icons{display:flex;gap:var(--space-2)}
.hn-ftsocial__icons a{width:44px;height:44px;border-radius:var(--radius-pill);background:rgba(255,255,255,.16);display:grid;place-items:center}
.hn-ftsocial__icons a:hover{background:rgba(255,255,255,.28)}
.hn-ftsocial svg{width:19px;height:19px;fill:#fff}
.hn-ft{background:var(--color-navy-800);color:var(--color-navy-100);position:relative;overflow:hidden}
.hn-ft__anchor{position:absolute;bottom:-9%;inset-inline-end:-3%;width:min(28vw,300px);color:rgba(255,255,255,.04);pointer-events:none;z-index:0}
.hn-ft__anchor svg{width:100%;height:auto;display:block}
.hn-ft .hn-container{padding-block:var(--section-gap-sm);display:grid;grid-template-columns:1fr;gap:var(--space-8);position:relative;z-index:1}
@media(min-width:600px){.hn-ft .hn-container{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.hn-ft .hn-container{grid-template-columns:1.5fr 1.3fr 1fr 1fr 1.4fr}}
.hn-ft h3{color:#fff;font-size:var(--fs-md);margin:0 0 var(--space-4);padding-bottom:var(--space-2);position:relative}
.hn-ft h3::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:32px;height:3px;background:var(--color-red-500);border-radius:2px}
.hn-ft ul{list-style:none;margin:0;padding:0}
.hn-ft li{margin-bottom:var(--space-2)}
.hn-ft a{color:var(--color-navy-100);text-decoration:none;font-size:var(--fs-sm)}
.hn-ft a:hover{color:#fff}
@media(max-width:767px){.hn-ft a{display:inline-flex;align-items:center;min-height:40px}.hn-ft li{margin-bottom:var(--space-1)}}
.hn-ft__logo{height:56px;margin-bottom:var(--space-3)}
.hn-ft__brand p{font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.hn-ft__social{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
.hn-ft__social a{width:38px;height:38px;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);display:grid;place-items:center}
.hn-ft__social a:hover{background:var(--color-red-500)}
.hn-ft__social svg{width:17px;height:17px;fill:#fff}
.hn-ft__sublist{margin-bottom:var(--space-6)}
.hn-ft__contact li{display:flex;gap:var(--space-2);align-items:flex-start;margin-bottom:var(--space-3);font-size:var(--fs-sm);line-height:var(--lh-normal)}
.hn-ft__contact svg{width:18px;height:18px;fill:var(--color-red-300);flex-shrink:0;margin-top:2px}
.hn-ft__contact a{color:var(--color-navy-100)}
.hn-ft__contact a:hover{color:#fff}
.hn-fttrust{background:var(--color-navy-800);border-top:1px solid rgba(255,255,255,.12)}
.hn-fttrust .hn-container{display:flex;flex-wrap:wrap;gap:var(--space-3);padding-block:var(--space-6)}
.hn-fttrust .b{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-xs);color:var(--color-navy-100);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-pill);padding:8px 16px}
.hn-fttrust .b svg{width:16px;height:16px;fill:var(--color-red-300);flex-shrink:0}
.hn-fttrust .b b{color:#fff}
.hn-copy{background:var(--color-navy-900);color:var(--color-navy-200);font-size:var(--fs-sm)}
.hn-copy .hn-container{display:flex;justify-content:space-between;padding-block:var(--space-4);flex-wrap:wrap;gap:var(--space-2)}
.hn-copy a{color:var(--color-navy-100);text-decoration:none}

/* ============================ FIELD (form) ============================ */
.hn-field label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text);margin-bottom:6px}
.hn-field label .req{color:var(--color-red-500)}
.hn-field input,.hn-field select,.hn-field textarea{width:100%;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px var(--space-3);font-family:inherit;font-size:var(--fs-base);min-height:var(--tap-min);color:var(--color-text);background:#fff}
.hn-field input::placeholder,.hn-field textarea::placeholder{color:var(--color-text-subtle)}
.hn-field input:focus,.hn-field select:focus,.hn-field textarea:focus{outline:none;border-color:var(--color-navy-400);box-shadow:0 0 0 3px rgba(83,97,139,.25)}
.hn-field--full{grid-column:1/-1}
.hn-field textarea{min-height:110px;resize:vertical}

/* ============================ QUOTE FORM ============================ */
html{scroll-behavior:smooth}
.hn-qf,.hn-qf-standalone{scroll-margin-top:100px}
.hn-qf{background:var(--color-navy-500);color:#fff;position:relative;overflow:hidden}
.hn-qf__stripe{height:6px;background:var(--stripe);background-size:60px 6px;position:absolute;inset-block-start:0;inset-inline:0}
.hn-qf .hn-container{padding-block:var(--section-gap-sm);display:grid;grid-template-columns:1fr;gap:var(--space-8);position:relative;align-items:center}
@media(min-width:900px){.hn-qf .hn-container{grid-template-columns:1fr 1.15fr;gap:var(--space-12)}}
.hn-qf__intro .k{color:var(--color-red-300);font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:var(--ls-wide)}
.hn-qf__intro h2{font-size:var(--fs-xl);font-weight:var(--fw-extra);margin:var(--space-2) 0 var(--space-3);line-height:var(--lh-tight)}
.hn-qf__intro p{color:var(--color-navy-100);line-height:var(--lh-relaxed);margin:0;max-width:46ch}
.hn-qf__trust{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);margin-top:var(--space-6)}
.hn-qf__trust span{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--color-navy-100)}
.hn-qf__trust svg{width:18px;height:18px;fill:var(--color-red-300);flex-shrink:0}
.hn-qf__card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-6);color:var(--color-text)}
.hn-qf__ct{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-text-heading);margin:0 0 var(--space-4)}
.hn-qf__grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media(min-width:520px){.hn-qf__grid{grid-template-columns:1fr 1fr}}
.hn-qf__submit{grid-column:1/-1}