/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Body */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f9f9f9;
}
a {
    color: inherit;
    text-decoration: none;
}

/* Navbar */
.navbar {
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    position: sticky;
    top: 0;
    z-index: 100;
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
}
.logo__img {
    max-height: 60px;
    width: auto;
}

/* Nav Links */
.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}
.nav-links li {
    position: relative; /* for dropdown positioning */
}
.nav-links a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;
    transition: color 0.2s ease;
}
.nav-links a:hover {
    color: #0070f3;
}

/* Top-level Dropdown Arrow */
.has-dropdown > a .dropdown-icon {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    transform: rotate(0deg); /* down by default if you use ▼ */
}
.has-dropdown:hover > a .dropdown-icon {
    transform: rotate(180deg); /* up on hover */
}

/* Dropdown Menu */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
    min-width: 200px;
    white-space: nowrap;
    z-index: 200;
}
.has-dropdown:hover .dropdown {
    display: block;
}
.dropdown li {
    padding: 0.5rem 1rem;
    transition: background 0.15s ease;
}
.dropdown li:hover {
    background: #f5f5f5;
}

/* Sub-dropdown (side) */
.dropdown-sub {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
    min-width: 200px;
    white-space: nowrap;
    z-index: 300;
}
.dropdown li.has-dropdown:hover > .dropdown-sub {
    display: block;
}
/* Sub-arrow rotation: ▼ → ◀ */
.dropdown li.has-dropdown > a .dropdown-icon {
    display: inline-block;
    transition: transform 0.2s ease;
    transform: rotate(0deg);      /* start ▼ */
}
.dropdown li.has-dropdown:hover > a .dropdown-icon {
    transform: rotate(-90deg);    /* turn ◀ on hover */
}

/* Hero */
.hero {
    background: #f5f5f5;
    padding: 4rem 0;
    text-align: center;
}
.hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.hero p  { font-size: 1.125rem; color: #555; margin-bottom: 2rem; }
.btn {
    background: #0070f3;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    display: inline-block;
    transition: background 0.2s ease;
}
.btn:hover {
    background: #005bb5;
}

/* Contacts */
.contacts {
    background: #fff;
    padding: 4rem 0;
}
.contacts h2 {
    text-align: center;
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
}
.grid-contact {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 1.5rem;
}
.contact-card {
    background: #fafafa;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    padding: 1.5rem;
}
.contact-card h3 { margin-bottom: 0.75rem; font-size: 1.125rem; }
.contact-card p  {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #555;
}
.contact-card p img {
    width: 1rem;
    height: 1rem;
}

/* Footer */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}



/* 1) Remove list-style bullets everywhere in these dropdowns */
.dropdown,
.dropdown-sub {
    list-style: none;       /* no bullets on the UL itself */
    margin: 0;
    padding: 0;
}
.dropdown li,
.dropdown-sub li {
    list-style: none;       /* no bullets on the LIs either */
}

/* 2) Position the sub-menu to the LEFT of its parent item */
.dropdown-sub {
    left: auto !important;  /* override any prior left:100% */
    right: 100%;            /* hug the left side of the parent */
}

/* 3) Fix the arrow glyphs and rotations */

/* Top-level “Products” arrow (▼ ⇄ ▲) */
.nav-links > li.has-dropdown > a .dropdown-icon {
    display: inline-block;
    transform: rotate(0deg);        /* ▼ by default */
    transition: transform 0.2s ease;
}
.nav-links > li.has-dropdown:hover > a .dropdown-icon {
    transform: rotate(180deg);      /* ▲ on hover */
}

/* Sub-menu arrows (▼ ⇄ ◀) */
.dropdown li.has-dropdown > a .dropdown-icon {
    display: inline-block;
    transform: rotate(0deg);        /* ▼ by default */
    transition: transform 0.2s ease;
}
.dropdown li.has-dropdown:hover > a .dropdown-icon {
    transform: rotate(90deg);      /* ◀ on hover */
}

/* Optional: if you still see odd spacing around the arrows, force font-size */
.dropdown-icon {
    font-size: 0.8rem !important;
    line-height: 1;
}

/* index.css */
:root { --logo-size: 60px; }

.logo__img {
    height: var(--logo-size);     /* fixed, consistent size */
    width: auto;
    max-height: none;             /* prevent smaller overrides */
}
.navbar .container { padding: 0.75rem 0; }   /* keep header height stable */

/* ===== NAV LOCK (keep this block LAST in index.css) ===== */
:root{
    --nav-h: 88px;   /* total header row height */
    --logo-h: 60px;  /* visual logo height */
}

.navbar{ position: sticky; top: 0; z-index: 1000; overflow: visible; }
.navbar .container{
    height: var(--nav-h);
    padding: 0;                    /* remove variability */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* lock the logo image size everywhere */
.logo{ display: flex; align-items: center; }
.logo__img{
    height: var(--logo-h) !important;
    width: auto;
    display: block;                /* removes baseline gap */
    max-height: none !important;   /* defeats older rules */
}

/* make sure nothing clips the sticky bar */
header, nav, .navbar{ overflow: visible !important; }

/* === Lock navbar + logo globally (wins everywhere) === */
nav.navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
    border-bottom: 1px solid #eaeaea;
}

nav.navbar .container {
    padding: 0.75rem 0 !important;      /* stable header height */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav.navbar img.logo__img {
    height: 60px !important;             /* FIXED size */
    max-height: none !important;
    width: auto !important;
    display: block;                      /* avoids baseline shrink/shift */
    object-fit: contain;
}

/* Force Affiliates list into a 2×2 grid */
.contacts .grid-contact {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 1.5rem;
    align-items: stretch;
}

/* Stack on narrow screens */
@media (max-width: 720px) {
    .contacts .grid-contact {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
}

/* (optional) make each card equal height */
.contacts .contact-card {
    height: 100%;
}

/* ===== Contact Us (2-col) ===== */
.contact-us {
    background: #fff;
    padding: 3rem 0;
}

.contact-us h2 {
    text-align: center;
    font-size: 2rem;
    color: #333;
    margin-bottom: 1.25rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* two columns on desktop */
    gap: 1.5rem;
    align-items: stretch;
}

.contact-card {
    background: #fafafa;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 1.5rem;
    height: 100%;
}

.contact-card h3 { margin-bottom: .75rem; }
.contact-card p  { margin: .35rem 0; }

.contact-card .icon {
    width: 1rem;
    height: 1rem;
    vertical-align: -2px;
    margin-right: .5rem;
}


/* Contact Us – centered single card */
.contact-us { background:#fff; padding:3rem 0; }
.contact-us h2 { text-align:center; font-size:2rem; color:#333; margin-bottom:1.25rem; }

/* keeps the card centered with a comfy max width */
.contact-center { max-width: 720px; margin: 0 auto; }

.contact-card {
    background:#fafafa;
    border:1px solid #eaeaea;
    border-radius:8px;
    padding:1.5rem;
}

.contact-card h3 { margin-bottom:.75rem; }
.contact-card p  { margin:.35rem 0; }

.contact-card .icon {
    width:1rem; height:1rem; vertical-align:-2px; margin-right:.5rem;
}

/* Contact rows: one fixed icon column + one text column */
.contacts .contact-card p{
    /* kill default paragraph margins everywhere in the card */
    margin: 0 !important;
    padding: .25rem 0;

    /* align icon + text perfectly */
    display: grid;
    grid-template-columns: 20px 1fr; /* icon column, text column */
    column-gap: .5rem;
    align-items: center;
}

/* lock icon box so it doesn't change row height */
.contacts .contact-card p .icon{
    width: 20px;
    height: 20px;
    display: block;   /* removes baseline wiggle */
    object-fit: contain;
}

/* base paragraph spacing */
.contacts .contact-card p{
    margin:0;
    padding:.35rem 0;
}

/* only rows that have an icon get the 2-column grid */
.contacts .contact-card p.with-icon{
    display:grid;
    grid-template-columns:20px 1fr;
    column-gap:.5rem;
    align-items:center;
}

/* icon sizing */
.contacts .contact-card .icon{
    width:20px; height:20px;
    display:block;
    object-fit:contain;
}

/* ========= NAV CORE ========= */
nav.navbar{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eaeaea}
nav.navbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0}
.logo__img{height:60px;width:auto;display:block}

nav a{color:inherit;text-decoration:none}
#primary-nav{list-style:none;margin:0;padding:0;display:flex;gap:1.25rem}
#primary-nav>li{position:relative}
#primary-nav>li>a{display:flex;align-items:center;gap:.35rem;padding:.65rem .25rem}

#primary-nav .dropdown-icon{display:inline-block;font-size:.8rem;transition:transform .2s}

/* Desktop dropdowns */
#primary-nav .dropdown{
    display:none;position:absolute;top:100%;left:0;min-width:220px;
    background:#fff;border:1px solid #eaeaea;border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);padding:.35rem 0;z-index:1000
}
#primary-nav li:hover>.dropdown{display:block}
#primary-nav .dropdown li{position:relative}
#primary-nav .dropdown a{display:flex;align-items:center;gap:.35rem;padding:.5rem .75rem}
#primary-nav .dropdown li:hover>a{background:#f5f7fb}

/* Desktop sub-menu to the right */
#primary-nav .dropdown-sub{
    display:none;position:absolute;top:0;left:100%;min-width:220px;
    background:#fff;border:1px solid #eaeaea;border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.08)
}
#primary-nav .dropdown li:hover>.dropdown-sub{display:block}

/* ========= HAMBURGER ========= */
#nav-toggle{display:none;position:relative;width:44px;height:44px;background:none;border:0;cursor:pointer}
#nav-toggle .bar{
    position:absolute;left:10px;right:10px;height:2px;background:#222;border-radius:2px;
    transition:transform .25s,opacity .25s
}
#nav-toggle .bar:nth-child(1){top:14px}
#nav-toggle .bar:nth-child(2){top:21px}
#nav-toggle .bar:nth-child(3){top:28px}
#nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
#nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
#nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ========= OVERLAY ========= */
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:900}
.nav-overlay.is-visible{display:block}
body.no-scroll{overflow:hidden}

/* ========= MOBILE (≤900px): off-canvas right ========= */
@media (max-width:900px){
    #nav-toggle{display:inline-block}

    /* convert main UL into a right panel */
    #primary-nav{
        position:fixed; top:var(--nav-h,72px); right:0; left:auto;
        width:82vw; max-width:320px; height:calc(100vh - var(--nav-h,72px));
        overflow:auto; background:#fff; border-left:1px solid #eaeaea;
        box-shadow:0 20px 40px rgba(0,0,0,.18); padding:.5rem .5rem 1rem;
        display:flex; flex-direction:column; gap:.25rem;
        transform:translateX(100%); transition:transform .25s ease; z-index:1001;
    }
    #primary-nav.is-open{ transform:translateX(0) }

    /* make dropdowns act like accordions (no absolute positioning) */
    #primary-nav .dropdown,
    #primary-nav .dropdown-sub{
        position:static; display:none; border:0; box-shadow:none; padding:0; background:transparent;
    }
    #primary-nav li.dd-open > .dropdown{ display:block }
    #primary-nav .dropdown li.dd-open > .dropdown-sub{ display:block }

    #primary-nav .dropdown a{ padding-left:1rem }
    #primary-nav .dropdown-sub a{ padding-left:2rem }

    /* rotate caret when section open */
    #primary-nav li.dd-open > a .dropdown-icon{ transform:rotate(180deg) }
}

/* Desktop hover helpers (keep last so they win on desktop) */
@media (min-width:901px){
    #primary-nav li{position:relative}
    #primary-nav li.has-dropdown:hover>.dropdown{display:block}
    #primary-nav .dropdown li.has-dropdown:hover>.dropdown-sub{display:block}
}
/* MOBILE OFF-CANVAS — final overrides */
@media (max-width: 900px){
    /* The panel itself */
    .nav-links{
        position: fixed;
        top: var(--nav-h, 72px);
        right: 0; left: auto;
        width: 82vw; max-width: 320px;
        max-height: calc(100vh - var(--nav-h, 72px));
        overflow: auto;

        /* IMPORTANT: keep it visible (not display:none) and off-screen by default */
        display: flex !important;
        flex-direction: column;
        gap: .25rem;

        background: #fff;
        border-left: 1px solid #eaeaea;
        box-shadow: 0 20px 40px rgba(0,0,0,.18);
        padding: .75rem .75rem 1rem;

        z-index: 5001;                  /* above .nav-overlay (3999) */
        transform: translateX(100%);    /* hidden off the right */
        transition: transform .25s ease;
    }

    /* When JS adds .open, force it ON screen */
    .nav-links.open{
        transform: translateX(0) !important;
    }
}


/* === Carets: CLOSED ↑  /  OPEN ↓  (final overrides) === */
#primary-nav .dropdown-icon{
    display:inline-block;
    font-size:.8rem;
    line-height:1;
    transition:transform .2s ease;
}

/* CLOSED (default) — point UP */
#primary-nav > li.has-dropdown > a .dropdown-icon,
#primary-nav .dropdown li.has-dropdown > a .dropdown-icon{
    transform: rotate(180deg) !important;   /* ▲ */
}

/* OPEN — when its LI is opened by JS (.dd-open) */
#primary-nav li.dd-open > a .dropdown-icon{
    transform: rotate(0deg) !important;     /* ▼ */
}

/* Desktop: hover behaves like open */
@media (min-width:901px){
    #primary-nav li.has-dropdown:hover > a .dropdown-icon,
    #primary-nav .dropdown li.has-dropdown:hover > a .dropdown-icon{
        transform: rotate(0deg) !important;   /* ▼ */
    }
}

/* Make sure no left/right rotations sneak in from old rules */
#primary-nav .dropdown li.has-dropdown > a .dropdown-icon{
    /* left/right rotations disabled by the !important rules above */
}

/* CLOSED (default): ▲ */
#primary-nav > li.has-dropdown > a .dropdown-icon,
#primary-nav .dropdown li.has-dropdown > a .dropdown-icon{
    transform: rotate(180deg) !important;   /* ▲ */
}

/* OPEN: ▼ — higher specificity than the .dropdown closed rule */
#primary-nav > li.dd-open > a .dropdown-icon,
#primary-nav .dropdown li.dd-open > a .dropdown-icon{
    transform: rotate(0deg) !important;     /* ▼ */
}

/* ===== HERO HEADER ===== */
.hero--products-carousel{
    padding: clamp(18px, 3vw, 32px) 0 0;
    background: radial-gradient(1200px 500px at 10% 0%, rgba(0,0,0,.15), transparent 60%),
    linear-gradient(135deg,#7b2b6b,#e45f6b);
    color:#fff;
}
.hero--products-carousel .hero-title{
    text-align:center;
    letter-spacing:.06em;
    font-weight:800;
    font-size: clamp(1.6rem, 3.6vw + .6rem, 3rem);
    margin: 0 0 .5rem;
}
.hero--products-carousel .hero-title span{ opacity:.95 }

/* ===== COVERFLOW ===== */
.coverflow{
    --card-w: clamp(180px, 22vw, 300px);   /* SAME width for all cards */
    --card-h: clamp(240px, 30vw, 420px);   /* SAME height for all cards */
    --gap: calc(var(--card-w) * .55);      /* spacing/overlap step */
    --persp: 1200px;                        /* perspective strength */
    overflow: visible;
    padding: 12px 0 34px;
}
.coverflow .stage{
    position: relative;
    height: var(--card-h);
    perspective: var(--persp);
    transform-style: preserve-3d;
}

/* ===== COVERFLOW (scoped) ===== */
.coverflow {
  --card-w: clamp(180px, 22vw, 300px);
  --card-h: clamp(240px, 30vw, 420px);
  --gap: calc(var(--card-w) * .55);
  --persp: 1200px;
  overflow: visible;
  padding: 12px 0 34px;
}
.coverflow .stage {
  position: relative;
  height: var(--card-h);
  perspective: var(--persp);
  transform-style: preserve-3d;
}

/* ⬇️ everything below was previously `.card …` */
.coverflow .card{
  position: absolute; top: 0; left: 50%;
  width: var(--card-w); height: var(--card-h);
  transform: translateX(-50%);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(0,0,0,.25);
  transition: transform .65s cubic-bezier(.22,.61,.36,1), box-shadow .3s, opacity .3s;
  will-change: transform;
}
.coverflow .card img{
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(10px, 1.6vw, 16px);
}
.coverflow .card.is-center{ box-shadow:0 26px 50px rgba(0,0,0,.32); }
.coverflow .card.is-hidden{ opacity:0; pointer-events:none; }
.coverflow .card:hover,
.coverflow .card:focus{
  transform: none !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.25) !important;
  filter: none !important;
  z-index: auto !important;
}


/* --- Kill horizontal scroll caused by the hero/carousel --- */
html, body {
    max-width: 100%;
    overflow-x: hidden;        /* safety net */
}

/* Make sure the banner never exceeds the page width */
.hero--products,                 /* your hero section */
.hero--products .carousel,       /* wrapper you used for the cards */
.hero--products .carousel-viewport {
    width: 100%;                   /* never use 100vw here */
    overflow: hidden;              /* clip shadows / 3D edges */
}

/* If you used a pseudo-element/gradient band, also clip it */
.hero--products::before,
.hero--products::after {
    left: 0; right: 0;             /* avoid extending beyond the page */
}

/* Do not pause the animation on hover */
.hero--products:hover .carousel-track {
    animation-play-state: running !important;
}

/* Neutralize any card hover transforms/shadows/filters */
.hero--products .carousel-card:hover,
.hero--products .carousel-card:focus {
    transform: none !important;
    box-shadow: inherit !important;
    filter: none !important;
    z-index: auto !important;
}



.coverflow .card:hover,
.coverflow .card:focus {
    transform: none !important;
    box-shadow: 0 18px 36px rgba(0,0,0,.25) !important;
    filter: none !important;
    z-index: auto !important;
}


.coverflow .card { pointer-events: none; }  /* optional */

/* CTA under the hero */
.cta-center{ text-align:center; padding: 1.25rem 0 .75rem; }
.cta-center .btn{ display:inline-block; }

/* Contact page */
.contact-hero{
    background: linear-gradient(135deg,#7b2b6b,#e45f6b);
    color:#fff; padding: 3rem 0 2rem; text-align:center;
}
.contact-hero h1{ font-size: clamp(1.6rem, 3.2vw + .6rem, 2.4rem); margin-bottom:.4rem }

.contact-form-wrap{ background:#fff; padding:2rem 0 3rem }
.contact-form{
    background:#fafafa; border:1px solid #eaeaea; border-radius:12px;
    padding:1.25rem; max-width: 800px; margin:0 auto;
}
.contact-form .hp{ display:none !important }

.form-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap:1rem;
}
.form-field--full{ grid-column: 1 / -1; }

.form-field label{
    display:block; font-weight:600; margin-bottom:.35rem;
}
.form-field input, .form-field textarea{
    width:100%; border:1px solid #dcdcdc; border-radius:8px;
    padding:.65rem .75rem; background:#fff; font:inherit;
}
.form-field input:focus, .form-field textarea:focus{
    outline:none; border-color:#0070f3; box-shadow:0 0 0 3px rgba(0,112,243,.12);
}

.form-actions{ margin-top:.25rem; display:flex; align-items:center; gap:.75rem }
.form-note{ margin:0; color:#333 }

/* outline style for second button */
.btn.btn-outline{
    background:transparent; color:#0070f3; border:1px solid #0070f3;
}
.btn.btn-outline:hover{ background:#e8f2ff }

/* Stack on mobile */
@media (max-width:720px){
    .form-grid{ grid-template-columns: 1fr; }
}

/* ===== Analog world clocks — fully scoped ===== */
.world-times{background:#fff;padding:2rem 0 2.25rem;border-top:1px solid #eaeaea;border-bottom:1px solid #eaeaea}
.world-times h2{ text-align:center; font-size:clamp(1.25rem,2.5vw,1.75rem); color:#333; margin-bottom:1rem }

/* grid */
.world-times .clock-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* auto-fit avoids empty tracks */
    gap:1.2rem;
    align-items:stretch;
}

/* card */
.world-times .clock-card{
    background:#fafafa;border:1px solid #eaeaea;border-radius:10px;
    padding:1rem .9rem 1.1rem;text-align:center;
    display:flex;flex-direction:column;align-items:center;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.world-times .clock-card h3{margin:0 0 .6rem;font-size:1rem;color:#333;
    font-weight:600;}

/* dial */
.world-times .analog-clock{ width:100%; max-width:200px; aspect-ratio:1/1; margin:0 auto .5rem }
.world-times .dial{
    position:relative; width:100%; height:100%; border-radius:50%;
    background: radial-gradient(circle at 50% 50%, #fff, #f3f3f3 60%, #eee 100%);
    border:2px solid #e0e0e0;
    box-shadow: inset 0 0 0 3px #fff, 0 12px 28px rgba(0,0,0,.08);
    overflow:hidden;
}

/* ticks */
.world-times .tick{ position:absolute; inset:0 }
.world-times .tick span{
    position:absolute; left:50%; top:6%;
    width:3px; height:10%; background:#333; border-radius:2px; transform:translateX(-50%);
}

/* hands (scoped so nothing else can override) */
.world-times .hand{
    position:absolute; left:50%; top:50%;
    transform-origin:50% 85%; transform:translate(-50%, -85%) rotate(0);
    border-radius:2px; will-change:transform;
}
.world-times .hand.hour   { width:4px; height:30%; background:#111 }
.world-times .hand.minute { width:3px; height:38%; background:#222 }
.world-times .hand.second { width:2px; height:42%; background:#e23b3b }

.world-times .cap{
    position:absolute; left:50%; top:50%;
    width:10px; height:10px; border-radius:50%; background:#111;
    transform:translate(-50%,-50%); box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.2)
}

.world-times .clock-date{ margin-top:.25rem; font-size:.92rem; color:#666 }

@media (prefers-reduced-motion:reduce){ .world-times .hand{ transition:none !important } }

/* Phone-only reordering of office cards */
@media (max-width: 720px){
    .contacts .grid-contact{
        display: flex !important;
        flex-direction: column;
    }


    .contacts .grid-contact .contact-card{ order: 5; }


    .contacts .grid-contact .contact-card:nth-child(2){ order: 1; }
    .contacts .grid-contact .contact-card:nth-child(3){ order: 2; }
    .contacts .grid-contact .contact-card:nth-child(4){ order: 3; }
    .contacts .grid-contact .contact-card:nth-child(1){ order: 4; }
}

/* Sticky footer baseline */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }

/* Make page content grow; any page section can act as main */
main, .contact-form-wrap, .page-main { flex: 1 0 auto; }

/* Optional: remove forced extra gap above footer */
footer { margin-top: 0; }


/* ===== Brochures (scoped) ===== */
.brochure-strip{
    background:#fff;
    padding: 2.25rem 0 1.75rem;
    border-top: 1px solid #eaeaea;
}
.brochure-strip__title{
    text-align:center;
    color:#333;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    margin: 0 0 1rem;
}

/* grid: 2 cards on desktop, 1 on mobile */
.brochure-strip .brochure-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
}
@media (max-width: 780px){
    .brochure-strip .brochure-grid{ grid-template-columns: 1fr; }
}

/* card */
.brochure-strip .brochure-card{
    background:#fafafa;
    border:1px solid #eaeaea;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    overflow:hidden;
}

/* body: text left, actions right (stack on mobile) */
.brochure-strip .brochure-card__body{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding: 1rem .9rem;
}
@media (max-width: 700px){
    .brochure-strip .brochure-card__body{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* text */
.brochure-strip .brochure-card__title{
    margin:0 0 .25rem;
    color:#222;
    font-size:1.05rem;
    font-weight:700;
}
.brochure-strip .brochure-card__meta{
    margin:0;
    color:#666;
    font-size:.95rem;
}

/* actions */
.brochure-strip .brochure-card__actions{
    margin-left:auto;              /* push buttons to the right on wide screens */
    display:flex;
    gap:.6rem;
    flex-wrap:wrap;                /* wrap if there isn’t enough width */
}
@media (max-width: 700px){
    .brochure-strip .brochure-card__actions{ margin-left:0; margin-top:.5rem; }
}

/* buttons (re-use your .btn styles if you already have them) */
.brochure-strip .btn{
    padding:.6rem 1rem;
    font-size:.95rem;
    border-radius:6px;
    line-height:1.1;
    white-space:nowrap;
}
.brochure-strip .btn-outline{
    background:#fff;
    color:#0b5fff;
    border:1px solid #0b5fff;
}
.brochure-strip .btn-outline:hover{ background:#eaf1ff; }
.brochure-strip .btn:focus-visible{
    outline:3px solid rgba(11,95,255,.35);
    outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
    .brochure-strip .btn{ transition:none !important; }
}