/* ============================================================
   CONTACT . Contact sales, help (contact.html) . 2026-10-21
   Ground truth: 21.10 notes otabek/Contact sales, help/Spec+Html/contact-sales.html
                 + contact-sales-page-spec.md; the PDF is 1440 x 4545 pt (1 pt = 1 px).
   Figma "DD-Website" frame "Contact sales, help" (1275:9586).

   Same recipe as sept-bbat/brol.css: <main> IS the designer's markup (classes cnt-*,
   qa/oracle/designer_to_main.py) and this is his stylesheet with the mechanical changes, transcribed by
   qa/oracle/skin_css.py:
     .x                 -> [data-skin="cnt"] #main .cnt-x
     hero photo         -> his CSS background, data: URI -> sept/contact/hero.webp; his radial shade (::before) kept
     embedded images    -> his named files under sept/contact/ (md5-matched; photos as webp, 5 icons as his svg)
     body min-width     -> gone (D1): his numbers hold from 1300 up; the block at the end relaxes them below.
     nav + footer       -> his rules dropped (41 selectors), chrome stays live (D2): dd-nav.css + sept-footer.css
     slider             -> his marquee kept; skin_css.py flattens @keyframes/@media, both restored by hand below

   Deviations from his HTML, each on record (Yuval 2026-10-21 "all ok"):
     hero       live hero chips dropped (03.10).
     booking    his card is the launch state of the live click-to-load Microsoft Bookings block (feedback-july3 P0):
                ids, the fallback, the iframe and the script are the live ones (row B3); the sales email was removed 26 Oct (no inbound email).
     contact    email and phone are two links (mailto + tel); the fraud line mails with the "Urgent, Fraud" subject.
     copy       live text wins: "How complaints are handled →", "Let’s talk ↑"; his hard <br> joined.
     reveals    kept (D3): scroll-driven, same timing family as alt-home.css, defined at the end.
   ============================================================ */

/* ---------- resets his page relied on, scoped to main (skin_css.py standard block) ---------- */
html[data-skin="cnt"] body{background:#fff}
[data-skin="cnt"] main{
  width:100%;overflow-x:clip;color:#121212;font-size:16px;line-height:normal;letter-spacing:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;
}
[data-skin="cnt"] #main *,[data-skin="cnt"] #main *::before,[data-skin="cnt"] #main *::after{box-sizing:border-box}
[data-skin="cnt"] #main *{margin:0;padding:0}
[data-skin="cnt"] #main ul{list-style:none}
[data-skin="cnt"] #main a{color:inherit;text-decoration:none}
[data-skin="cnt"] #main img,[data-skin="cnt"] #main svg{display:block}
[data-skin="cnt"] #main h1,[data-skin="cnt"] #main h2,[data-skin="cnt"] #main h3,[data-skin="cnt"] #main p{max-width:none;letter-spacing:0;text-wrap:initial}
[data-skin="cnt"] #main section{position:relative;width:100%}   /* his absolute .divider hairlines hang off the section (Payments and FX taught this) */

/* ---------- his page, transcribed (skin_css.py) ---------- */
[data-skin="cnt"] #main{--ink:#121212; --nav-active:#2B2926; --muted:#7B756D; --text-2:#555049; --text-body:#5C5750;
  --surface:#F4F3F0; --border:#D6D2C7; --footer-rule:#CCC8BC; --link:#B75F00; --link-footer:#AC5900;
  --brand-orange:#F37F00; --company-head:#221A14;}
[data-skin="cnt"] #main .cnt-wrap{width:1440px;margin:0 auto}
/* Buttons */
[data-skin="cnt"] #main .cnt-btn{display:inline-flex;align-items:center;justify-content:center;height:47px;padding:14px 24px;border:0;border-radius:100px;font:inherit;font-size:16px;line-height:19px;white-space:nowrap;cursor:pointer;flex-shrink:0}
[data-skin="cnt"] #main .cnt-btn:hover{opacity:.85}
[data-skin="cnt"] #main .cnt-btn-dark{background:var(--ink);color:#fff;font-weight:700}
[data-skin="cnt"] #main .cnt-btn-light{background:var(--surface);color:var(--text-2);font-weight:500}
[data-skin="cnt"] #main .cnt-btn-white{background:#fff;color:var(--ink);font-weight:700}
[data-skin="cnt"] #main .cnt-btn-ghost{background:rgba(255,255,255,.16);color:#fff;font-weight:500}
[data-skin="cnt"] #main .cnt-btn:focus-visible{outline:2px solid var(--brand-orange);outline-offset:2px}
/* 1. Navbar */
/* 2. Hero */
[data-skin="cnt"] #main .cnt-hero{padding:0 80px}
[data-skin="cnt"] #main .cnt-hero-card{position:relative;width:1280px;height:640px;border-radius:48px;overflow:hidden;background:#2C2620 url(sept/contact/hero.webp) center/cover no-repeat;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:80px}
[data-skin="cnt"] #main .cnt-hero-card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 940px 1830px at 70.3% 41.8%,rgba(44,38,32,0) 0%,rgba(44,38,32,0) 13%,rgba(44,38,32,1) 100%);pointer-events:none}
[data-skin="cnt"] #main .cnt-hero-text{position:relative;width:500px;display:flex;flex-direction:column;gap:20px}
[data-skin="cnt"] #main .cnt-hero-text h1{font-weight:500;font-size:52px;line-height:63px;color:#fff}
[data-skin="cnt"] #main .cnt-hero-text p{width:480px;font-size:16px;line-height:24px;color:#fff;opacity:.8}
/* Shared type */
[data-skin="cnt"] #main .cnt-h-section{font-weight:500;font-size:44px;line-height:53px;color:var(--ink)}
[data-skin="cnt"] #main .cnt-body16{font-size:16px;line-height:24px}
/* 3. Booking card */
[data-skin="cnt"] #main .cnt-booking{padding:80px;display:flex;flex-direction:column;align-items:center;gap:20px}
[data-skin="cnt"] #main .cnt-booking-card{width:1280px;height:470px;background:var(--surface);border-radius:48px;display:flex;align-items:center;justify-content:center;gap:80px;padding:40px 80px}
[data-skin="cnt"] #main .cnt-booking-card > img{width:520px;height:390px;object-fit:cover;flex-shrink:0}
[data-skin="cnt"] #main .cnt-text-col{width:520px;display:flex;flex-direction:column;gap:40px;flex-shrink:0}
[data-skin="cnt"] #main .cnt-stack20{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
[data-skin="cnt"] #main .cnt-booking-card .cnt-desc{color:var(--text-2)}
[data-skin="cnt"] #main .cnt-booking-caption{font-size:16px;line-height:24px;color:var(--muted);text-align:center;white-space:nowrap}
/* 4. Contact */
[data-skin="cnt"] #main .cnt-contact{height:980px;display:flex;justify-content:center;align-items:flex-start;gap:120px;padding:100px 160px;overflow:hidden}
[data-skin="cnt"] #main .cnt-contact-left{width:480px;display:flex;flex-direction:column;gap:20px;flex-shrink:0}
[data-skin="cnt"] #main .cnt-contact-left p{color:var(--text-body)}
[data-skin="cnt"] #main .cnt-contact-list{width:520px;display:flex;flex-direction:column;flex-shrink:0}
[data-skin="cnt"] #main .cnt-contact-item{padding:40px 0 39px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
[data-skin="cnt"] #main .cnt-contact-item:first-child{border-top:1px solid var(--border);padding-top:39px}
[data-skin="cnt"] #main .cnt-contact-item h3{font-weight:500;font-size:24px;line-height:29px;color:var(--ink)}
[data-skin="cnt"] #main .cnt-contact-item p{color:var(--text-body)}
[data-skin="cnt"] #main .cnt-contact-item a{font-size:16px;line-height:24px;color:var(--link)}
/* 5. Calendar + slider */
[data-skin="cnt"] #main .cnt-calendar{padding:80px 160px;display:flex;flex-direction:column;gap:80px}
[data-skin="cnt"] #main .cnt-cal-row{width:1120px;height:480px;display:flex;align-items:center;gap:80px}
[data-skin="cnt"] #main .cnt-cal-text{width:320px;display:flex;flex-direction:column;gap:60px;align-items:flex-start;flex-shrink:0}
[data-skin="cnt"] #main .cnt-cal-text p{color:var(--text-body)}
[data-skin="cnt"] #main .cnt-cal-row > img{width:720px;height:480px;border-radius:48px;object-fit:cover;flex-shrink:0}
[data-skin="cnt"] #main .cnt-slider{width:1120px;height:212px;overflow:hidden}
[data-skin="cnt"] #main .cnt-track{display:flex;gap:20px;width:max-content;animation:cnt-marquee 40s linear infinite}
[data-skin="cnt"] #main .cnt-slider:hover .cnt-track{animation-play-state:paused}
@keyframes cnt-marquee{from{transform:translateX(0)}to{transform:translateX(-1360px)}}   /* 4 cards x (320 + 20 gap) */
@media (prefers-reduced-motion:reduce){[data-skin="cnt"] #main .cnt-track{animation:none}}
[data-skin="cnt"] #main .cnt-card{width:320px;height:212px;flex-shrink:0;background:#fff;border:1px solid var(--border);border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:30px;overflow:hidden}
[data-skin="cnt"] #main .cnt-card .cnt-icon{height:40px;display:flex;align-items:center}
[data-skin="cnt"] #main .cnt-card .cnt-icon img{height:40px}
[data-skin="cnt"] #main .cnt-card-text{width:260px;display:flex;flex-direction:column;gap:10px}
[data-skin="cnt"] #main .cnt-card-text h3{font-weight:500;font-size:20px;line-height:24px;color:var(--ink)}
[data-skin="cnt"] #main .cnt-card-text p{color:var(--text-body)}
/* 6. Dark CTA */
[data-skin="cnt"] #main .cnt-cta{padding:80px}
[data-skin="cnt"] #main .cnt-cta-card{width:1280px;height:390px;background:var(--ink);border-radius:48px;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:80px;padding:0 80px}
[data-skin="cnt"] #main .cnt-cta-card > img{width:520px;height:390px;object-fit:cover;flex-shrink:0}
[data-skin="cnt"] #main .cnt-cta-card h2{color:#fff;white-space:nowrap}
[data-skin="cnt"] #main .cnt-btn-row{display:flex;align-items:center;gap:20px}
/* 7. Footer */

/* ---------- live booking states inside his card (row B3) ---------- */
[data-skin="cnt"] #main .cnt-bframe{width:1280px;display:flex;flex-direction:column;align-items:center}
[data-skin="cnt"] #main .cnt-bframe [hidden]{display:none!important}
[data-skin="cnt"] #main .cnt-bfallback{width:1280px;padding:24px 80px;background:var(--surface);border-radius:48px 48px 0 0;text-align:center;color:var(--muted);font-size:16px;line-height:24px}
[data-skin="cnt"] #main .cnt-bfallback a{color:var(--link)}
[data-skin="cnt"] #main .cnt-bframe iframe{display:block;width:1280px;height:1100px;border:0;border-radius:0 0 48px 48px;background:var(--surface)}

/* ---------- his heading breaks after "person," with a hard <br>; the live heading is one node, so the box narrows
     to draw his line (347px fits, "not" does not; oracle README trap 4) ---------- */
[data-skin="cnt"] #main .cnt-contact-left .cnt-h-section{width:400px}

/* ---------- the email + phone pair: his link colour on both links, the separator in his body colour ---------- */
[data-skin="cnt"] #main .cnt-contact-item .cnt-links{font-size:16px;line-height:24px;color:var(--text-body)}

/* ---------- D3: reveals, the alt-home family ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes cnt-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
    @keyframes cnt-scale-in{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}}
    [data-skin="cnt"] #main .cnt-hero-card,[data-skin="cnt"] #main .cnt-booking-card,[data-skin="cnt"] #main .cnt-cta-card{animation:cnt-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%}
    [data-skin="cnt"] #main .cnt-contact-left,[data-skin="cnt"] #main .cnt-contact-item,[data-skin="cnt"] #main .cnt-cal-row,[data-skin="cnt"] #main .cnt-slider{animation:cnt-rise both;animation-timeline:view();animation-range:entry 0% entry 48%}
  }
}

/* ---------- D1: below 1300 his fixed canvas relaxes (desktop only, D4; nothing here is a mobile layout) ---------- */
@media (max-width:1299.98px){
  [data-skin="cnt"] #main .cnt-wrap{width:100%;max-width:1440px}
  [data-skin="cnt"] #main .cnt-hero{padding:0 40px}
  [data-skin="cnt"] #main .cnt-hero-card{width:100%;padding:60px}
  [data-skin="cnt"] #main .cnt-hero-text,[data-skin="cnt"] #main .cnt-hero-text p{width:auto;max-width:500px}
  [data-skin="cnt"] #main .cnt-booking{padding:80px 40px}
  [data-skin="cnt"] #main .cnt-bframe,[data-skin="cnt"] #main .cnt-booking-card,[data-skin="cnt"] #main .cnt-bfallback,[data-skin="cnt"] #main .cnt-bframe iframe{width:100%}
  [data-skin="cnt"] #main .cnt-booking-card,[data-skin="cnt"] #main .cnt-cta-card{height:auto;min-height:390px;gap:48px;padding:40px 48px}
  [data-skin="cnt"] #main .cnt-booking-card > img,[data-skin="cnt"] #main .cnt-cta-card > img{width:40%;height:auto;flex-shrink:1;min-width:0}
  [data-skin="cnt"] #main .cnt-text-col{width:auto;flex:1 1 0;min-width:0}
  [data-skin="cnt"] #main .cnt-booking-caption,[data-skin="cnt"] #main .cnt-cta-card h2{white-space:normal}
  [data-skin="cnt"] #main .cnt-contact{height:auto;gap:60px;padding:100px 40px}
  [data-skin="cnt"] #main .cnt-contact-left,[data-skin="cnt"] #main .cnt-contact-list{width:auto;flex:1 1 0;min-width:0}
  [data-skin="cnt"] #main .cnt-calendar{padding:80px 40px}
  [data-skin="cnt"] #main .cnt-cal-row,[data-skin="cnt"] #main .cnt-slider{width:100%}
  [data-skin="cnt"] #main .cnt-cal-row{height:auto;gap:48px}
  [data-skin="cnt"] #main .cnt-cal-row > img{width:auto;flex:1 1 0;min-width:0;height:auto;aspect-ratio:3/2}
  [data-skin="cnt"] #main .cnt-cta{padding:80px 40px}
  [data-skin="cnt"] #main .cnt-cta-card{width:100%}
  [data-skin="cnt"] #main .cnt-btn-row{flex-wrap:wrap}
}

/* ---------- chrome the skinned business pages carry (sept-bbat.css lines 207-211, keyed on data-skin) ---------- */
html[data-skin="cnt"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary{background:#121212!important;border-color:#121212!important;color:#fff!important;font-weight:700!important;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important}
html[data-skin="cnt"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary:hover{background:#2b2b2b!important;border-color:#2b2b2b!important}
html[data-skin="cnt"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline{background:#F4F3F0!important;border-color:#F4F3F0!important;color:#555049!important;font-weight:500!important;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important}
html[data-skin="cnt"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline:hover{background:#121212!important;border-color:#121212!important;color:#fff!important}
html[data-skin="cnt"] .cookiebar .cb-accept{background:#121212!important;color:#fff!important}