/* Company Profile mode. Loaded independently of the Sport Center stylesheet. */
:root {
  --compro-ink: #172f29;
  --compro-ink-soft: #63716b;
  --compro-forest: #174739;
  --compro-forest-deep: #102e28;
  --compro-cream: #f8f8f3;
  --compro-paper: #fffefa;
  --compro-line: #dce2db;
  --compro-gold: #aa7737;
  --compro-gold-light: #e5c58e;
  --compro-gutter: clamp(16px, 2.2vw, 40px);
  --compro-section-space: clamp(36px, 4vw, 60px);
}
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
.compro-site { margin: 0; background: var(--compro-cream); color: var(--compro-ink); font: 14px/1.6 Inter, system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.compro-site *, .compro-site *::before, .compro-site *::after { box-sizing: border-box; }
.compro-site [hidden] { display: none !important; }
.compro-site img { max-width: 100%; }
.compro-site svg { flex-shrink: 0; }
.compro-site a { text-decoration: none; }
.compro-site :focus-visible { outline: 3px solid #b48546; outline-offset: 5px; }
.compro-site p { color: var(--compro-ink-soft); }
.compro-site h1, .compro-site h2, .compro-site h3 { font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
.compro-site button, .compro-site input, .compro-site textarea { font: inherit; }
.compro-skip { position: fixed; top: -80px; left: 16px; padding: 12px 20px; background: white; color: var(--compro-ink); z-index: 1100; }
.compro-skip:focus { top: 10px; }
.compro-main { flex: 1; min-width: 0; }
.compro-main-content { min-width: 0; }
.compro-page { width: 100%; max-width: 1320px; margin: auto; padding: 22px var(--compro-gutter) 46px; }
.compro-landing { max-width: none; padding: 14px var(--compro-gutter) 0; }
.compro-alert { margin: 18px var(--compro-gutter); }
.compro-server-notices { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.compro-eyebrow, .compro-section__label { color: var(--compro-gold); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.compro-eyebrow { display: flex; align-items: center; gap: 10px; }
.compro-eyebrow > span { width: 24px; height: 1px; background: currentColor; }
.compro-btn { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; border: 1px solid transparent; border-radius: 8px; padding: 11px 18px; font-size: 12px; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; transition: background .2s, transform .2s; }
.compro-btn:hover { transform: translateY(-2px); }
.compro-btn--gold { background: var(--compro-gold-light); color: #172f29 !important; }
.compro-btn--gold:hover { background: #efd6a8; }
.compro-btn--dark { background: var(--compro-forest-deep); color: white !important; }
.compro-btn--dark:hover { background: #245a48; }
.compro-btn--ghost { color: #f9f6ec !important; border-color: #ffffff35; }
.compro-btn--ghost:hover { background: #ffffff12; }
.compro-btn--outline, .compro-btn--ghost-dark { color: var(--compro-ink); border-color: #becbc1; background: transparent; }
.compro-btn--sm { min-height: 36px; padding: 8px 11px; border-radius: 7px; font-size: 10px; gap: 7px; }
.compro-text-link { display: inline-flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 600; color: var(--compro-forest); padding-bottom: 7px; border-bottom: 1px solid #b7c7bd; }
.compro-text-link:hover { color: var(--compro-gold); }

/* A single compact header, including the mobile menu. */
.compro-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--compro-line); background: #f8f8f3f5; backdrop-filter: blur(16px); }
.compro-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; padding: 10px var(--compro-gutter); }
.compro-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--compro-ink); min-width: 0; }
.compro-brand:hover { color: inherit; }
.compro-brand__symbol { position: relative; flex-shrink: 0; width: 43px; height: 43px; border-radius: 11px; overflow: hidden; background: var(--compro-forest-deep); }
.compro-brand__fallback { display: flex; justify-content: center; align-items: center; height: 100%; color: #fff9eb; font-size: 30px; font-weight: 700; letter-spacing: -.1em; padding-right: 4px; }
.compro-brand__fallback span { color: var(--compro-gold-light); }
.compro-brand__symbol img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--compro-cream); }
.compro-brand__text { display: grid; gap: 3px; min-width: 0; }
.compro-brand__text strong { font-size: 14px; line-height: 1.3; font-weight: 700; max-width: 260px; overflow-wrap: anywhere; }
.compro-brand__text small { font-size: 8px; font-weight: 600; letter-spacing: .22em; color: var(--compro-ink-soft); }
.compro-navigation { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.compro-navigation > a:not(.compro-btn), .compro-logout { color: #68766e; font-size: 12px; font-weight: 500; padding-block: 12px; }
.compro-navigation > a:hover, .compro-navigation > a[aria-current] { color: var(--compro-forest); }
.compro-navigation > a[aria-current] { box-shadow: 0 2px var(--compro-forest); }
.compro-navigation .compro-btn { min-height: 42px; }
.compro-navigation__divider { width: 1px; height: 20px; background: var(--compro-line); }
.compro-navigation form { margin: 0; }
.compro-logout { border: 0; background: transparent; cursor: pointer; }
.compro-menu-toggle { display: none; border: 1px solid var(--compro-line); background: transparent; border-radius: 8px; width: 42px; height: 42px; color: var(--compro-ink); }

/* Editable hero first, then image banners. Both share a compact height. */
.compro-carousel { --hero-height: clamp(360px, 31vw, 454px); position: relative; }
.compro-carousel__slides { overflow: hidden; border-radius: 18px; background: var(--compro-forest-deep); }
.compro-slide { position: relative; }
.compro-slide.is-active { animation: compro-slide-in .35s ease both; }
.compro-hero { display: grid; grid-template-columns: 1.1fr .9fr; min-height: var(--hero-height); color: #fcfaef; background: var(--compro-forest-deep); overflow: hidden; position: relative; }
.compro-hero__copy { padding: clamp(28px, 2.6vw, 46px) clamp(28px, 4vw, 68px); align-self: center; position: relative; z-index: 2; }
.compro-hero .compro-eyebrow { color: var(--compro-gold-light); font-size: 9px; }
.compro-hero h1 { max-width: 20ch; font-size: clamp(30px, 3.25vw, 56px); line-height: 1.08; margin: 16px 0; font-weight: 600; color: #fcfaef; overflow-wrap: anywhere; }
.compro-hero__lead { max-width: 490px; color: #ccd6ce !important; font-size: clamp(12px, 1vw, 15px); line-height: 1.75; margin: 0; }
.compro-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.compro-hero__meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; color: #a3b9aa; font-size: 9px; }
.compro-hero__meta span { display: inline-flex; align-items: center; gap: 5px; }
.compro-hero__visual { position: relative; min-width: 0; overflow: hidden; display: grid; background: radial-gradient(ellipse at 70% 25%, #4d766340, transparent 70%), #173f32; }
.compro-hero__image { position: absolute; inset: -20px 0; width: 100%; height: calc(100% + 40px); object-fit: cover; }
.compro-hero-art { position: relative; width: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 36px 9%; overflow: hidden; }
.compro-hero-art__top { display: flex; justify-content: space-between; color: #b1c6b5; font-size: 9px; letter-spacing: .15em; position: absolute; inset: 28px 9% auto; }
.compro-hero-art__top > span:last-child { font-size: 21px; }
.compro-hero-art__orbit { width: 390px; height: 390px; border: 1px solid #bdcbb11c; border-radius: 50%; position: absolute; left: 10%; top: 10%; box-shadow: 0 0 0 36px #bdcbb106, 0 0 0 72px #bdcbb105; }
.compro-hero-art__car { position: relative; width: 100%; max-height: 220px; margin-top: 16px; }
.compro-hero-art__note { position: relative; display: flex; align-items: center; gap: 12px; align-self: center; padding: 12px 16px; border: 1px solid #f7ead92b; border-radius: 10px; background: #103529aa; color: #f4f1e8; backdrop-filter: blur(6px); }
.compro-hero-art__note b, .compro-hero-art__note small { display: block; font-size: 11px; }
.compro-hero-art__note small { color: #acbeaf; font-size: 9px; margin-top: 3px; }
.compro-hero-art__tick { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #d9c393; color: #12372c; }
.compro-hero-art__caption { position: absolute; bottom: 24px; left: 9%; color: #9bb59f; font-size: 8px; letter-spacing: .18em; }
.compro-parallax { transform: translate3d(0, var(--compro-parallax-y, 0px), 0); }
.compro-slide--image { height: var(--hero-height); min-height: 360px; }
.compro-slide--image > img { width: 100%; height: 100%; object-fit: cover; }
.compro-slide__caption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: start; justify-content: center; padding: 32px clamp(28px, 4vw, 68px); background: linear-gradient(90deg, #102e28ed, #102e2870 65%, transparent); color: #fff9ef; }
.compro-slide__caption .compro-eyebrow { color: #e5c58e; }
.compro-slide__caption h2 { max-width: 650px; font-size: clamp(28px, 3.2vw, 54px); margin: 16px 0; line-height: 1.12; }
.compro-slide__caption p { max-width: 550px; color: #e1e8df; }
.compro-slide__caption .compro-btn { margin-top: 10px; }
.compro-slide__link { position: absolute; inset: 0; }
.compro-carousel__controls { display: flex; align-items: center; justify-content: end; gap: 8px; min-height: 50px; }
.compro-carousel__count { margin-right: auto; font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .13em; color: #69796d; }
.compro-carousel__controls button { display: grid; place-items: center; border: 1px solid var(--compro-line); border-radius: 6px; padding: 5px 10px; min-width: 34px; min-height: 34px; color: var(--compro-ink); background: transparent; font-size: 12px; }
.compro-carousel__controls button:hover { background: #e8ede6; }
.compro-carousel__controls button:disabled { opacity: .5; }
.compro-carousel__dots { display: flex; gap: 2px; margin-right: 12px; }
.compro-carousel__dots button { position: relative; border: 0; width: 24px; min-width: 24px; padding: 0; }
.compro-carousel__dots button::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #c1ccbf; }
.compro-carousel__dots button[aria-pressed=true]::after { width: 18px; border-radius: 5px; background: var(--compro-forest); }
.compro-service-strip { display: flex; align-items: center; gap: 28px; padding: 20px 2%; border-bottom: 1px solid var(--compro-line); }
.compro-service-strip > span { font-size: 8px; line-height: 1.7; letter-spacing: .12em; color: #7a857d; flex-shrink: 0; padding-right: 24px; border-right: 1px solid var(--compro-line); }
.compro-service-strip b { color: var(--compro-ink); font-weight: 600; }
.compro-service-strip a { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1; font-size: 11px; font-weight: 500; color: #647367; }
.compro-service-strip a:hover { color: var(--compro-forest); }

/* Tighter rhythm: small outer gutters, a full-width services band. */
.compro-section { padding: var(--compro-section-space) clamp(8px, 2vw, 32px); scroll-margin-top: 92px; }
.compro-section h2 { margin: 14px 0; font-size: clamp(27px, 2.6vw, 42px); line-height: 1.16; color: var(--compro-ink); }
.compro-section__intro { max-width: 450px; font-size: 14px; line-height: 1.7; }
.compro-about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8%; align-items: center; }
.compro-about h2 { max-width: 480px; }
.compro-about__heading .compro-text-link { margin-top: 9px; }
.compro-about__story { padding-left: 30px; border-left: 1px solid var(--compro-line); }
.compro-about__image { width: 100%; height: 170px; object-fit: cover; border-radius: 12px; margin-bottom: 20px; }
.compro-richtext { font-size: 15px; line-height: 1.85; color: var(--compro-ink-soft); overflow-wrap: anywhere; }
.compro-richtext p { margin: 0 0 1em; }
.compro-richtext h2, .compro-richtext h3 { margin: 1em 0 .5em; color: var(--compro-ink); }
.compro-richtext img { height: auto; border-radius: 10px; }
.compro-richtext ul, .compro-richtext ol { padding-left: 1.3em; }
.compro-richtext table { display: block; max-width: 100%; overflow: auto; }
.compro-about__principles { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; }
.compro-about__principles span { display: inline-flex; align-items: center; gap: 8px; color: var(--compro-forest); font-size: 11px; font-weight: 500; }
.compro-about__principles svg { width: 16px; height: 16px; }
.compro-section--bleed { margin-inline: calc(-1 * var(--compro-gutter)); padding-inline: calc(var(--compro-gutter) + clamp(8px, 2vw, 32px)); background: #eef1e9; border-block: 1px solid #e3e7de; }
.compro-section__heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.compro-section__heading h2 { margin-bottom: 0; }
.compro-section__heading > p { max-width: 340px; font-size: 12px; line-height: 1.8; margin-bottom: 3px; }
.compro-service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.compro-service-card { position: relative; display: flex; flex-direction: column; border: 1px solid #dbe2d6; border-radius: 12px; color: var(--compro-ink); background: #fafbf6; padding: 24px; min-height: 254px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.compro-service-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px #183d2810; color: var(--compro-ink); }
.compro-service-card--featured, .compro-service-card--featured:hover { background: var(--compro-forest); border-color: var(--compro-forest); color: #f6f5eb; }
.compro-service-card__image { display: block; width: calc(100% + 48px); max-width: none !important; height: 140px; object-fit: cover; margin: -24px -24px 20px; }
.compro-service-card__top { display: flex; justify-content: space-between; align-items: center; }
.compro-service-card__number { font-size: 10px; color: #83947c; letter-spacing: .08em; }
.compro-service-card__icon { color: var(--compro-forest); }
.compro-service-card--featured .compro-service-card__icon { color: var(--compro-gold-light); }
.compro-service-card__body { display: flex; flex-direction: column; flex: 1; }
.compro-service-card h3 { margin: 26px 0 12px; font-size: 20px; line-height: 1.25; letter-spacing: -.035em; }
.compro-service-card p { font-size: 12px; line-height: 1.7; margin: 0 0 24px; }
.compro-service-card--featured p { color: #b8cebe; }
.compro-service-card__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 15px; border-top: 1px solid #a9b8a936; margin-top: auto; font-size: 10px; font-weight: 600; }
.compro-service-card--featured .compro-service-card__link { color: var(--compro-gold-light); }
.compro-empty-state { grid-column: 1 / -1; padding: 20px; }
.compro-cta { display: flex; align-items: center; gap: 22px; margin: 30px clamp(8px, 2vw, 32px) 0; padding: 27px 32px; border-radius: 12px; background: #e9dbbe; }
.compro-cta__icon { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #c8b990; border-radius: 50%; flex-shrink: 0; }
.compro-cta h2 { font-size: clamp(22px, 2vw, 30px); line-height: 1.2; margin: 8px 0; }
.compro-cta p { margin: 0; color: #70654f; font-size: 12px; }
.compro-cta > .compro-btn { margin-left: auto; flex-shrink: 0; }
.compro-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; margin: 0; padding: var(--compro-section-space) clamp(8px, 2vw, 32px); scroll-margin-top: 90px; }
.compro-contact h2 { font-size: clamp(27px, 2.5vw, 38px); margin: 14px 0 12px; line-height: 1.2; }
.compro-contact p { font-size: 12px; }
.compro-contact .compro-btn { margin-top: 6px; }
.compro-contact__details { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; align-content: center; }
.compro-contact__details a, .compro-contact__details div { font-size: 12px; color: var(--compro-ink); overflow-wrap: anywhere; }
.compro-contact__details span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--compro-ink-soft); margin-bottom: 6px; }

/* Footer belongs to the company brand, independent of the sports theme. */
.compro-footer { padding: 0 calc(var(--compro-gutter) + clamp(8px, 2vw, 32px)); background: #102e28; color: #f6f3e8; }
.compro-footer__top { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 34px 0; border-bottom: 1px solid #b7c9b827; }
.compro-footer__top .compro-section__label { color: #c7b788; font-size: 8px; }
.compro-footer__top h2 { font-size: clamp(28px, 3vw, 46px); margin: 10px 0 0; }
.compro-footer__grid { display: grid; grid-template-columns: 1.5fr .75fr 1fr 1fr; gap: 44px; padding: 36px 0; }
.compro-footer .compro-brand { color: #f4f3e7; }
.compro-footer .compro-brand__symbol { background: #ffffff12; border: 1px solid #ffffff26; }
.compro-footer .compro-brand__text small { color: #92ad9b; }
.compro-footer__grid h3 { font-size: 11px; font-weight: 600; letter-spacing: 0; margin-bottom: 16px; color: #e5c58e; }
.compro-footer__grid > div > a:not(.compro-brand) { display: block; color: #a8bdb0; font-size: 11px; margin-bottom: 10px; overflow-wrap: anywhere; }
.compro-footer__grid a:hover, .compro-footer__bottom a:hover { color: white; }
.compro-footer__grid p { color: #a8bdb0; font-size: 11px; line-height: 1.8; margin: 12px 0; }
.compro-footer__brand p { max-width: 260px; }
.compro-footer__hours { display: flex; align-items: start; gap: 8px; }
.compro-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid #b7c9b827; font-size: 9px; color: #8daa97; }
.compro-footer__bottom a { color: #b8cbba; }

/* Content-managed section backgrounds keep the original visual language as the fallback. */
.compro-section--custom-bg { background-color: var(--compro-section-bg-color, transparent); background-image: linear-gradient(135deg, rgba(255,255,255,.08), rgba(16,46,40,.10)), var(--compro-section-bg-image, none); background-position: center; background-size: cover; background-repeat: no-repeat; }
.compro-section--custom-bg > * { position: relative; z-index: 1; }
.compro-landing-style-card { height: 100%; padding: 17px; border: 1px solid var(--compro-line); border-radius: 14px; background: #fbfcf8; }
.compro-landing-style-card__preview { display: block; width: 100%; height: 94px; margin-top: 12px; border-radius: 9px; object-fit: cover; }
.compro-color-picker { width: 38px; height: 38px; padding: 3px; border: 1px solid var(--compro-line); border-radius: 8px; background: white; cursor: pointer; }
.compro-landing-editor { overflow: hidden; }
.compro-landing-editor > summary { list-style: none; cursor: pointer; }
.compro-landing-editor > summary::-webkit-details-marker { display: none; }
.compro-landing-editor__toggle { color: var(--compro-ink-soft); font-size: 11px; font-weight: 700; }
.compro-landing-editor[open] .compro-landing-editor__toggle span { display: inline-block; transform: rotate(45deg); }
.compro-admin-card .tox-tinymce { border: 1px solid var(--compro-line); border-radius: 10px; }

/* Admin layout only appears on management routes, never on the public preview. */
.compro-workspace { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 30px; padding: 20px var(--compro-gutter) 30px; flex: 1; }
.compro-workspace__nav { align-self: start; position: sticky; top: 98px; padding: 12px 0; }
.compro-admin-nav .navsec { color: #899488; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin: 20px 10px 10px; }
.compro-admin-nav .navlink { display: block; padding: 10px; color: var(--compro-ink-soft); font-size: 12px; border-radius: 8px; margin: 3px 0; }
.compro-admin-nav .navlink.active, .compro-admin-nav .navlink:hover { background: #e6ece1; color: var(--compro-forest); }
.compro-admin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.compro-admin-help { display: flex; align-items: start; gap: 14px; background: #eaf0e5; border: 1px solid #d5dfcf; padding: 18px; border-radius: 10px; margin-bottom: 20px; }
.compro-admin-help p { margin: 0; font-size: 12px; }
.compro-admin-preview { max-width: 320px; border-radius: 12px; }

/* Public detail, form, confirmation */
.compro-backlink, .compro-back-link { display: inline-block; color: var(--compro-ink-soft); font-size: 11px; font-weight: 800; text-decoration: none; }
.compro-backlink:hover, .compro-back-link:hover { color: var(--compro-gold); }
.compro-detail-hero, .compro-form-header { padding: 60px 7% 55px; border-radius: 25px; background: var(--compro-forest-deep); }
.compro-detail-hero h1, .compro-form-header h1 { max-width: 740px; margin: 18px 0 12px; color: #fffaf0; font-size: clamp(38px, 5vw, 64px); line-height: 1; }
.compro-detail-hero p, .compro-form-header p { max-width: 650px; margin: 0; color: rgba(255,250,240,.68) !important; font-size: 15px; line-height: 1.7; }
.compro-detail-hero__grid { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 55px; }
.compro-detail-hero__mark { color: rgba(231,199,137,.7); font-family: Georgia, serif; font-size: 105px; line-height: .7; }
.compro-detail-body { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; padding: 80px 7% 0; }
.compro-detail-image { width: 100%; max-height: 390px; margin-bottom: 30px; border-radius: 18px; object-fit: cover; }
.compro-detail-aside, .compro-form-aside, .compro-order-aside { align-self: start; padding: 32px; border-radius: 18px; background: #ebe5d8; }
.compro-detail-aside h2, .compro-form-aside h2, .compro-order-aside h2 { margin: 14px 0 25px; font-size: 28px; line-height: 1.08; }
.compro-detail-aside .compro-btn { width: 100%; margin-top: 10px; }
.compro-form-header { padding-bottom: 58px; }
.compro-form-header h1 { max-width: 650px; }
.compro-form-layout, .compro-order-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 24px; align-items: start; padding: 38px 3% 0; }
.compro-form-card, .compro-order-card { padding: 35px; border: 1px solid var(--compro-line); border-radius: 20px; background: var(--compro-paper); box-shadow: 0 12px 40px rgba(24,48,43,.06); }
.compro-form-card__intro { display: flex; align-items: start; gap: 15px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--compro-line); }
.compro-form-card__intro:not(:first-child) { margin-top: 35px; }
.compro-form-card__step { color: var(--compro-gold); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.compro-form-card__intro h2 { margin: 0; font-size: 22px; }
.compro-form-card__intro p { margin: 4px 0 0; font-size: 12px; }
.compro-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }
.compro-field--full { grid-column: 1 / -1; }
.compro-field label, .compro-form-card__footer span { display: block; margin-bottom: 7px; color: var(--compro-ink); font-size: 11px; font-weight: 800; }
.compro-field sup, .compro-form-card__footer sup { color: #b7793c; }
.compro-field input, .compro-field select, .compro-field textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--compro-line); border-radius: 9px; color: var(--compro-ink); background: #fff; font-size: 13px; outline: none; transition: border-color .2s, box-shadow .2s; }
.compro-field input:focus, .compro-field select:focus, .compro-field textarea:focus { border-color: var(--compro-gold); box-shadow: 0 0 0 3px rgba(196,150,85,.14); }
.compro-form-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--compro-line); }
.compro-form-card__footer span { margin: 0; color: var(--compro-ink-soft); font-size: 10px; font-weight: 500; }
.compro-form-aside__icon { margin-bottom: 28px; color: var(--compro-gold); font-size: 30px; }
.compro-form-aside ol { display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; }
.compro-form-aside li { display: flex; gap: 11px; color: var(--compro-ink-soft); font-size: 12px; line-height: 1.5; }
.compro-form-aside li span { color: var(--compro-gold); font-weight: 800; }
.compro-aside-link { display: inline-block; margin-top: 30px; color: var(--compro-forest); font-size: 11px; font-weight: 800; text-decoration: none; }
.compro-confirmation-head { display: flex; align-items: center; gap: 22px; padding: 55px 7%; border-radius: 24px; background: var(--compro-forest-deep); }
.compro-confirmation-head__check { display: grid; width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; color: var(--compro-forest-deep); background: var(--compro-gold-light); font-size: 27px; place-items: center; }
.compro-confirmation-head h1 { margin: 13px 0 7px; color: #fffaf0; font-size: clamp(30px, 4vw, 50px); line-height: 1; }
.compro-confirmation-head p { margin: 0; color: rgba(255,255,255,.65) !important; }
.compro-order-card__top { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding-bottom: 25px; border-bottom: 1px solid var(--compro-line); }
.compro-order-card__top strong { display: block; margin-top: 8px; color: var(--compro-ink); font-size: 25px; letter-spacing: .04em; }
.compro-order-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 27px 0; border-bottom: 1px solid var(--compro-line); }
.compro-order-details span, .compro-order-complaint > span, .compro-order-note > span { display: block; margin-bottom: 5px; color: var(--compro-gold); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.compro-order-details b { color: var(--compro-ink); font-size: 13px; }
.compro-order-complaint, .compro-order-note { padding-top: 22px; }
.compro-order-complaint p, .compro-order-note p { margin: 0; font-size: 13px; line-height: 1.7; }
.compro-order-note { margin-top: 15px; padding: 15px; border-radius: 10px; background: #f5eddb; }
.compro-order-aside .compro-btn { width: 100%; margin-top: 10px; }
.compro-status { display: inline-flex; align-items: center; min-height: 25px; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.compro-status--info { color: #12617b; background: #dff4fa; }
.compro-status--primary { color: #334b90; background: #e6e9fa; }
.compro-status--success { color: #216b4a; background: #ddf4e7; }
.compro-status--warning { color: #84591d; background: #fbebc9; }
.compro-status--dark { color: #fff; background: var(--compro-forest); }
.compro-status--secondary, .compro-status--muted { color: #69716e; background: #e8eae8; }

/* Admin workspace */
.compro-admin-page { width: 100%; padding: 20px 0 70px; }
.compro-admin-page:has([data-compro-sticky-submit]) { padding-bottom: 118px; }
.compro-admin-page [data-compro-sticky-submit] { position: fixed; right: clamp(18px, 2.4vw, 38px); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 1040; width: auto !important; min-width: 178px; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 16px 34px rgba(16,46,40,.23), 0 2px 5px rgba(16,46,40,.12); }
.compro-admin-page [data-compro-sticky-submit]:hover { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(16,46,40,.28), 0 3px 7px rgba(16,46,40,.14); }
.compro-admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 0 28px; }
.compro-admin-heading h1 { margin: 10px 0 6px; font-size: clamp(30px, 4vw, 47px); line-height: 1; }
.compro-admin-heading p { margin: 0; font-size: 13px; }
.compro-admin-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.compro-admin-stat { min-height: 130px; padding: 20px; border: 1px solid var(--compro-line); border-radius: 16px; background: rgba(255,253,248,.82); }
.compro-admin-stat--featured { color: #fff; background: var(--compro-forest); border-color: var(--compro-forest); }
.compro-admin-stat span, .compro-admin-stat small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.compro-admin-stat span { color: var(--compro-gold); }
.compro-admin-stat--featured span { color: var(--compro-gold-light); }
.compro-admin-stat strong { display: block; margin: 13px 0 7px; color: var(--compro-ink); font-size: 34px; line-height: 1; }
.compro-admin-stat--featured strong { color: #fff; }
.compro-admin-stat small { color: var(--compro-ink-soft); font-weight: 500; letter-spacing: 0; text-transform: none; }
.compro-admin-stat--featured small { color: rgba(255,255,255,.6); }
.compro-admin-card { padding: 24px; border: 1px solid var(--compro-line); border-radius: 18px; background: rgba(255,253,248,.88); box-shadow: 0 10px 30px rgba(24,48,43,.04); }
.compro-admin-card__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.compro-admin-card__header h2 { margin: 7px 0 0; font-size: 23px; }
.compro-admin-card__header a { color: var(--compro-forest); font-size: 11px; font-weight: 800; text-decoration: none; }
.compro-admin-table { --bs-table-bg: transparent; --bs-table-border-color: var(--compro-line); color: var(--compro-ink); font-size: 12px; }
.compro-admin-table thead th { padding: 12px 10px; color: var(--compro-ink-soft); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.compro-admin-table tbody td { padding: 15px 10px; vertical-align: middle; }
.compro-admin-table tbody td strong, .compro-admin-table tbody td small { display: block; }
.compro-admin-table tbody td strong { font-size: 11px; }
.compro-admin-table tbody td small { margin-top: 4px; color: var(--compro-ink-soft); font-size: 10px; }
.compro-catalog-table { min-width: 680px; }
.compro-catalog-table tbody tr { transition: background .18s ease; }
.compro-catalog-table tbody tr:hover { background: rgba(230,236,225,.45); }
.compro-modal-content { overflow: hidden; border: 1px solid var(--compro-line); border-radius: 18px; color: var(--compro-ink); background: var(--compro-paper); box-shadow: 0 24px 70px rgba(16,46,40,.18); }
.compro-modal-content .modal-header { padding: 20px 22px; border-bottom-color: var(--compro-line); }
.compro-modal-content .modal-body { padding: 22px; }
.compro-modal-content .modal-footer { padding: 0 22px 22px; border-top: 0; }
.compro-modal-content .btn-close { box-shadow: none; }
.compro-form-errors { min-height: 0; color: #a33f3f; font-size: 11px; line-height: 1.5; }
.compro-js-toast { position: fixed; top: calc(20px + env(safe-area-inset-top)); right: 22px; z-index: 1080; display: flex; align-items: flex-start; gap: 14px; max-width: min(410px, calc(100vw - 32px)); padding: 15px 14px 15px 17px; border: 1px solid #cfe4d2; border-radius: 14px; color: #205f41; background: #edf9ef; box-shadow: 0 18px 42px rgba(16,46,40,.18); font-size: 12px; font-weight: 700; animation: compro-toast-in .24s ease both; }
.compro-js-toast__message { flex: 1; min-width: 0; line-height: 1.5; }
.compro-js-toast__close { display: grid; width: 22px; height: 22px; flex: 0 0 22px; margin: -3px -2px 0 0; padding: 0; border: 0; border-radius: 50%; color: currentColor; background: transparent; cursor: pointer; place-items: center; font-size: 18px; line-height: 1; opacity: .65; }
.compro-js-toast__close:hover { background: rgba(16,46,40,.08); opacity: 1; }
.compro-js-toast--error { color: #8b3434; border-color: #f0cccc; background: #fff1f1; }
.compro-js-toast--warning { color: #84591d; border-color: #f0dfb8; background: #fff8e9; }
.compro-confirm-modal__content .modal-footer { display: flex; justify-content: flex-end; gap: 9px; }
@keyframes compro-toast-in { from { opacity: 0; transform: translate3d(20px, -10px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.compro-table-link { color: var(--compro-forest); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.compro-filter-bar { margin-bottom: 22px; padding: 18px; }
.compro-filter-bar .form-label, .compro-admin-card .form-label { margin-bottom: 7px; color: var(--compro-ink); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.compro-filter-bar .form-control, .compro-filter-bar .form-select, .compro-admin-card .form-control, .compro-admin-card .form-select { border-color: var(--compro-line); border-radius: 9px; color: var(--compro-ink); background-color: #fff; font-size: 13px; }
.compro-filter-bar .form-control:focus, .compro-filter-bar .form-select:focus, .compro-admin-card .form-control:focus, .compro-admin-card .form-select:focus { border-color: var(--compro-gold); box-shadow: 0 0 0 3px rgba(196,150,85,.14); }
.compro-detail-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 21px; margin: 25px 0 0; }
.compro-detail-list div { min-width: 0; }
.compro-detail-list__wide { grid-column: 1 / -1; padding-top: 4px; }
.compro-detail-list dt { margin-bottom: 5px; color: var(--compro-gold); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.compro-detail-list dd { margin: 0; color: var(--compro-ink); font-size: 13px; line-height: 1.6; }
.compro-form-hint { font-size: 12px; line-height: 1.6; }
.compro-admin-note { padding: 17px; border-left: 3px solid var(--compro-gold); border-radius: 0 10px 10px 0; background: #f5eddb; }
.compro-admin-note strong { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.compro-admin-note p { margin: 7px 0 0; font-size: 12px; }
.compro-content-type { color: var(--compro-gold); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.compro-image-preview img { display: block; width: 100%; max-height: 150px; margin-bottom: 10px; border-radius: 10px; object-fit: cover; }
.compro-image-preview label { color: var(--compro-ink-soft); font-size: 11px; }
.compro-settings-callout { padding: 20px; border: 1px solid #d9e4d5; border-radius: 16px; background: linear-gradient(135deg, #f4f7ef, #fffdf8); }
.compro-settings-callout h2 { color: var(--compro-forest); }
.compro-settings-callout p { color: var(--compro-ink-soft); font-size: 12px; line-height: 1.6; }
.compro-contact-verify__icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 18px; border-radius: 15px; color: #fff; background: var(--compro-forest); font-size: 24px; box-shadow: 0 10px 22px rgba(0, 69, 55, .18); }
.compro-contact-verify__targets { display: flex; flex-wrap: wrap; gap: 8px; }
.compro-contact-verify__targets span { padding: 8px 11px; border-radius: 999px; color: var(--compro-forest); background: #edf3e9; font-size: 12px; }

/* Dedicated, compact verification flow for new company-profile partners. */
.compro-verification-page { display: grid; min-height: 650px; padding: clamp(28px, 5vw, 70px) var(--compro-gutter); place-items: center; background: radial-gradient(circle at 8% 12%, #f0e6d0 0, transparent 28%), radial-gradient(circle at 92% 88%, #dfeadf 0, transparent 30%); }
.compro-verification-shell { display: grid; width: min(100%, 960px); grid-template-columns: .86fr 1.14fr; overflow: hidden; border: 1px solid #d9e1d8; border-radius: 26px; background: var(--compro-paper); box-shadow: 0 28px 80px rgba(16, 46, 40, .14); }
.compro-verification-aside { position: relative; display: flex; min-height: 580px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(28px, 4vw, 48px); color: #f5f3e9; background: var(--compro-forest-deep); }
.compro-verification-aside__glow { position: absolute; width: 360px; height: 360px; right: -160px; top: -110px; border: 1px solid rgba(229, 197, 142, .24); border-radius: 50%; box-shadow: 0 0 0 42px rgba(229, 197, 142, .04), 0 0 0 84px rgba(229, 197, 142, .025); }
.compro-verification-aside__content, .compro-verification-aside__foot { position: relative; z-index: 1; }
.compro-verification__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--compro-gold); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.compro-verification-aside .compro-verification__eyebrow { color: var(--compro-gold-light); }
.compro-verification__mark { display: flex; align-items: baseline; margin: 44px 0 18px; color: #fff9ec; font-size: 62px; font-weight: 800; letter-spacing: -.12em; line-height: .8; }
.compro-verification__mark b { color: var(--compro-gold-light); font-size: 32px; }
.compro-verification-aside h1 { max-width: 9ch; margin: 0; color: #fff9ec; font-size: clamp(29px, 3vw, 44px); line-height: 1.08; }
.compro-verification-aside p { max-width: 280px; margin: 18px 0 0; color: #b8cdbd; font-size: 12px; line-height: 1.75; }
.compro-verification-steps { display: grid; gap: 12px; margin-top: 46px; }
.compro-verification-step { display: grid; grid-template-columns: 30px 1fr 20px; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid transparent; border-radius: 12px; color: #87a394; }
.compro-verification-step > span { color: #6c8d7a; font-size: 10px; font-weight: 800; }
.compro-verification-step strong, .compro-verification-step small { display: block; }
.compro-verification-step strong { color: #b5cabe; font-size: 11px; font-weight: 700; }
.compro-verification-step small { margin-top: 2px; font-size: 9px; }
.compro-verification-step > b { color: #6c8d7a; font-size: 14px; text-align: right; }
.compro-verification-step.is-complete > b { color: var(--compro-gold-light); }
.compro-verification-step.is-active { border-color: #d9c3932e; background: #ffffff0d; }
.compro-verification-step.is-active > span, .compro-verification-step.is-active strong { color: #fff9ec; }
.compro-verification-step.is-active > b { color: var(--compro-gold-light); }
.compro-verification-aside__foot { display: flex; justify-content: space-between; gap: 12px; color: #718e7c; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.compro-verification-card { padding: clamp(30px, 5vw, 66px); }
.compro-verification-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
.compro-verification__status { display: inline-flex; align-items: center; gap: 7px; color: #3e7658; font-size: 10px; font-weight: 700; }
.compro-verification__status i { width: 7px; height: 7px; border-radius: 50%; background: #5aa473; box-shadow: 0 0 0 4px #5aa4731c; }
.compro-verification-card__step { color: #96a49a; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.compro-verification-card__icon { display: grid; width: 52px; height: 52px; margin-bottom: 20px; place-items: center; border-radius: 16px; color: var(--compro-forest); background: #edf2e9; }
.compro-verification-card__icon svg { width: 25px; height: 25px; }
.compro-verification-card h2 { margin: 14px 0 10px; color: var(--compro-ink); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.compro-verification-card__intro { max-width: 430px; margin: 0; color: var(--compro-ink-soft); font-size: 12px; line-height: 1.75; }
.compro-verification-card__intro strong { color: var(--compro-ink); font-weight: 700; }
.compro-otp-form { margin-top: 30px; }
.compro-otp-form__label { display: block; margin-bottom: 10px; color: var(--compro-ink); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.compro-otp-group { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.compro-otp-digit { width: 100%; height: 56px; border: 1px solid var(--compro-line); border-radius: 12px; outline: 0; color: var(--compro-ink); background: #fbfcf8; font-size: 22px; font-weight: 800; text-align: center; transition: border-color .2s, box-shadow .2s, background .2s, transform .2s; }
.compro-otp-digit:focus { border-color: var(--compro-gold); background: #fffdf8; box-shadow: 0 0 0 4px rgba(196, 150, 85, .14); transform: translateY(-2px); }
.compro-otp-digit:not(:placeholder-shown) { border-color: #9eb6a0; background: #f5f8f1; }
.compro-otp-group.is-invalid .compro-otp-digit { border-color: #d57a7a; background: #fff7f7; }
.compro-otp-fallback { display: block; width: 100%; margin-top: 8px; border: 0; color: var(--compro-ink); background: transparent; font-size: 12px; letter-spacing: .16em; text-align: center; outline: 0; }
.compro-otp-form.is-enhanced .compro-otp-fallback { display: none; }
.compro-otp-form:not(.is-enhanced) .compro-otp-group { display: none; }
.compro-otp-form__hint { margin: 11px 0 0; color: #87958c; font-size: 10px; }
.compro-otp-form__hint span { color: var(--compro-gold); }
.compro-otp-form__error { margin: 10px 0 0; color: #ad4a4a !important; font-size: 11px; }
.compro-verification-submit { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: 23px; padding: 12px 17px; border: 0; border-radius: 10px; color: #fff9ec; background: var(--compro-forest); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s, transform .2s, opacity .2s; }
.compro-verification-submit:hover { background: #245e4b; transform: translateY(-2px); }
.compro-verification-submit:disabled { cursor: wait; opacity: .65; }
.compro-verification-resend { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding-top: 19px; border-top: 1px solid #e7ebe4; }
.compro-verification-resend strong, .compro-verification-resend small { display: block; }
.compro-verification-resend strong { color: var(--compro-ink); font-size: 11px; }
.compro-verification-resend small { margin-top: 3px; color: #929e95; font-size: 10px; }
.compro-verification-resend button { padding: 0; border: 0; color: var(--compro-forest); background: transparent; font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.compro-verification-resend button:hover { color: var(--compro-gold); }
.compro-verification-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; color: #7c8d82; font-size: 11px; font-weight: 700; }
.compro-verification-back:hover { color: var(--compro-forest); }


/* Detail pages share the same typography and compact spacing as the home page. */
.compro-breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; font-size: 11px; color: #93a99a; }
.compro-breadcrumbs a { color: #d1dfcf; }
.compro-detail-hero { padding: 32px 4%; border-radius: 16px; }
.compro-detail-hero h1 { font-size: clamp(32px, 4vw, 54px); max-width: 800px; line-height: 1.1; }
.compro-detail-hero .compro-section__label { color: var(--compro-gold-light); }
.compro-detail-hero__grid { margin-top: 0; }
.compro-detail-hero__mark { font-family: inherit; font-size: 68px; }
.compro-detail-body { padding: 38px 3% 0; gap: 40px; grid-template-columns: minmax(0, 1.6fr) minmax(240px, .7fr); }
.compro-detail-aside { position: sticky; top: 98px; padding: 26px; background: #eaf0e4; border: 1px solid #dce5d5; }
.compro-detail-aside h2 { font-size: 25px; margin-bottom: 16px; }
.compro-detail-aside p { font-size: 12px; }
.compro-detail-image { max-height: 370px; }
.compro-detail-services { margin-top: 24px; border-top: 1px solid #d2dec9; padding-top: 16px; }
.compro-detail-services > a { display: block; font-size: 12px; padding-block: 8px; color: var(--compro-forest); }
.compro-detail-services > span { display: block; font-size: 9px; color: #74846b; text-transform: uppercase; letter-spacing: .1em; }
.compro-form-header { padding: 32px 4%; border-radius: 16px; }
.compro-form-header h1 { font-size: clamp(30px, 3.4vw, 46px); }
.compro-form-header .compro-backlink { color: #c4d3c5; margin-bottom: 22px; }
.compro-form-header .compro-section__label { color: var(--compro-gold-light); }
.compro-form-layout, .compro-order-layout { padding-top: 28px; }
.compro-site .login-wrap { min-height: 620px; padding-block: 38px; }

@keyframes compro-slide-in { from { opacity: .4; } to { opacity: 1; } }
@media (min-width: 1800px) {
  .compro-hero__copy { padding-left: 5vw; }
  .compro-hero h1 { max-width: 24ch; }
}
@media (max-width: 1100px) {
  .compro-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compro-admin-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compro-hero__copy { padding: 30px; }
  .compro-footer__grid { gap: 24px; }
}
@media (max-width: 1050px) {
  .compro-header__inner { position: relative; min-height: 72px; flex-wrap: wrap; }
  .compro-menu-toggle { display: grid; place-items: center; }
  .compro-navigation { width: 100%; flex-wrap: wrap; gap: 8px 18px; padding: 12px 0; }
  .compro-header:has(.compro-menu-toggle:not([hidden])) .compro-navigation { position: absolute; top: 100%; left: 0; background: var(--compro-cream); padding: 18px var(--compro-gutter); border-bottom: 1px solid var(--compro-line); box-shadow: 0 12px 15px #1233250d; }
  .compro-navigation__divider { display: none; }
  .compro-navigation > a:not(.compro-btn) { min-width: 25%; }
  .compro-navigation > a[aria-current] { box-shadow: none; font-weight: 700; }
  .compro-service-strip { flex-wrap: wrap; gap: 12px 20px; }
  .compro-service-strip > span { border: 0; padding: 0; }
  .compro-service-strip a { flex: 1 1 25%; }
}
@media (max-width: 767.98px) {
  .compro-hero { grid-template-columns: 1fr; min-height: 380px; }
  .compro-hero__copy { padding: 30px 24px; }
  .compro-hero h1 { font-size: clamp(30px, 6.8vw, 44px); max-width: 22ch; }
  .compro-hero__visual { position: absolute; inset: 0; opacity: .15; pointer-events: none; }
  .compro-hero-art__top, .compro-hero-art__note, .compro-hero-art__caption { display: none; }
  .compro-hero-art__car { margin-left: 35%; opacity: .3; }
  .compro-hero__lead { max-width: 450px; }
  .compro-hero__meta { font-size: 8px; gap: 10px; }
  .compro-hero__actions .compro-btn { font-size: 11px; padding: 11px 12px; gap: 7px; }
  .compro-slide--image { height: 380px; }
  .compro-slide__caption { padding: 28px 24px; }
  .compro-service-strip { padding: 16px 4px; gap: 12px 18px; }
  .compro-service-strip > span { display: none; }
  .compro-service-strip a { flex-basis: 40%; font-size: 9px; }
  .compro-about, .compro-contact { grid-template-columns: 1fr; gap: 24px; }
  .compro-about__story { border-left: 0; padding: 0; }
  .compro-section__heading { align-items: start; flex-direction: column; gap: 14px; }
  .compro-section__heading > p { max-width: none; }
  .compro-service-card { padding: 20px; min-height: 250px; }
  .compro-service-card h3 { font-size: 18px; }
  .compro-service-card__image { width: calc(100% + 40px); margin: -20px -20px 18px; }
  .compro-cta { flex-wrap: wrap; padding: 24px; gap: 16px; margin-top: 24px; }
  .compro-cta__icon { display: none; }
  .compro-cta > .compro-btn { margin-left: 0; }
  .compro-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; padding-block: 28px; }
  .compro-footer__top { padding-block: 28px; align-items: start; flex-direction: column; gap: 18px; }
  .compro-footer__bottom { flex-wrap: wrap; }
  .compro-workspace { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .compro-workspace__nav { position: static; padding: 10px 0; }
  .compro-admin-nav { display: flex; gap: 8px; overflow-x: auto; padding: 0 !important; }
  .compro-admin-nav .navsec, .compro-admin-nav form { display: none; }
  .compro-admin-nav .navlink { flex-shrink: 0; white-space: nowrap; }
  .compro-admin-heading { align-items: start; flex-direction: column; gap: 16px; }
  .compro-admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compro-admin-card { padding: 18px; }
  .compro-catalog-table { min-width: 620px; }
  .compro-modal-content .modal-body { padding: 18px; }
  .compro-js-toast { top: calc(16px + env(safe-area-inset-top)); right: 16px; left: 16px; max-width: none; }
  .compro-admin-page [data-compro-sticky-submit] { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); min-width: 0; }
  .compro-admin-card__header { align-items: start; flex-wrap: wrap; }
  .compro-detail-body, .compro-form-layout, .compro-order-layout { grid-template-columns: 1fr; gap: 24px; padding: 28px 0 0; }
  .compro-detail-aside { position: static; }
  .compro-detail-hero__mark { display: none; }
  .compro-detail-hero, .compro-form-header, .compro-confirmation-head { padding: 28px 24px; }
  .compro-form-card, .compro-order-card { padding: 22px; }
  .compro-order-details, .compro-form-grid { gap: 16px; }
  .compro-form-card__footer { flex-wrap: wrap; }
  .compro-site .login-wrap { min-height: 540px; }
  .compro-verification-page { min-height: 0; padding: 26px 16px 42px; }
  .compro-verification-shell { grid-template-columns: 1fr; border-radius: 20px; }
  .compro-verification-aside { min-height: 0; padding: 28px 24px 24px; }
  .compro-verification__mark { margin: 26px 0 14px; font-size: 48px; }
  .compro-verification-aside h1 { max-width: 15ch; font-size: 31px; }
  .compro-verification-aside p { max-width: 390px; }
  .compro-verification-steps { margin-top: 28px; }
  .compro-verification-aside__foot { margin-top: 28px; }
  .compro-verification-card { padding: 28px 24px 30px; }
  .compro-verification-card__top { margin-bottom: 24px; }
}
@media (max-width: 460px) {
  .compro-brand__text strong { max-width: 220px; font-size: 12px; }
  .compro-brand__text small { font-size: 7px; }
  .compro-brand__symbol { width: 38px; height: 38px; }
  .compro-header__inner { gap: 12px; }
  .compro-service-grid { grid-template-columns: 1fr; }
  .compro-service-card { min-height: 220px; }
  .compro-carousel__dots { margin-right: 0; gap: 0; flex-wrap: wrap; }
  .compro-carousel__controls { gap: 4px; }
  .compro-carousel__count { font-size: 9px; }
  .compro-form-grid, .compro-order-details, .compro-detail-list { grid-template-columns: 1fr; }
  .compro-field--full, .compro-detail-list__wide { grid-column: auto; }
  .compro-contact__details { gap: 20px; }
  .compro-footer__grid { gap: 24px 20px; }
  .compro-footer__brand { grid-column: 1 / -1; }
  .compro-footer__grid > div:last-child { grid-column: 1 / -1; }
  .compro-verification-card { padding-inline: 20px; }
  .compro-verification-card h2 { font-size: 28px; }
  .compro-otp-group { gap: 6px; }
  .compro-otp-digit { height: 50px; border-radius: 10px; font-size: 19px; }
  .compro-verification-resend { align-items: flex-start; flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .compro-site *, .compro-site *::before, .compro-site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .compro-parallax { transform: none !important; }
}