/* ============================================================
   ALTAHANY DESIGN SYSTEM V21
   Single authoritative style layer for altahany.com.

   Replaces: altahany-growth-v19.css + altahany-magic-v20.css
   Loads after: altahany-consolidated-v17.css (public)
                altahany-admin-consolidated-v17.css (admin)

   Structure of this file:
     1. Tokens      — ONE palette. All legacy token names alias to it.
     2. Typography  — luxury Arabic/Latin pairing.
     3. Fixes       — corrections that belong to the system, not patches.
     4. V19 body    — carried over verbatim (minus its own :root and the
                      content-visibility rule that hid the home final CTA).
     5. V20 body    — carried over verbatim (minus its own :root).
     6. Overrides   — final authority; keep new design decisions HERE only.
   ============================================================ */

/* ── 1. TOKENS — single source of truth ───────────────────── */
:root{
  /* Core palette */
  --ath-ink:        #2a1c12;
  --ath-ink-soft:   #6b5a4a;
  --ath-gold:       #b98f3e;   /* decorative: borders, rules, icons   */
  --ath-gold-deep:  #7a5312;   /* text + CTA gold, AA on white        */
  --ath-gold-soft:  #e7d3ac;
  --ath-cream:      #fbf4e9;
  --ath-ivory:      #fffcf6;
  --ath-line:       #eadcc6;
  --ath-white:      #ffffff;
  --ath-green:      #128c53;
  --ath-danger:     #a72d2d;
  --ath-success:    #087944;

  --ath-radius:     18px;
  --ath-radius-sm:  12px;
  --ath-shadow:     0 16px 44px rgba(51,34,18,.09);
  --ath-shadow-sm:  0 8px 24px rgba(74,47,17,.06);

  /* Arial across the whole product, per the owner's instruction: site,
     quotations and invoices all read from these two tokens. */
  --ath-font-body:    Arial, 'Helvetica Neue', Tahoma, sans-serif;
  --ath-font-display: Arial, 'Helvetica Neue', Tahoma, sans-serif;
  --font:             var(--ath-font-body);
  --font-serif:       var(--ath-font-display);

  /* ---- Legacy aliases -------------------------------------
     Older layers declare these names with divergent values
     (five different golds, four inks). Re-pointing them here
     means ~10k lines of existing CSS render from ONE palette
     instead of fighting each other. Do not add new aliases;
     use the core tokens above. */
  --ath-muted:      var(--ath-ink-soft);
  --ath-text:       var(--ath-ink);
  --ath-brown:      var(--ath-ink);
  --ath-brown2:     #1c120a;
  --ath-gold-dark:  var(--ath-gold-deep);
  --ath-gold2:      var(--ath-gold);
  --ath-soft:       var(--ath-cream);
  --ath-card:       var(--ath-ivory);
  --ath-border:     var(--ath-line);
  --ath-heart:      var(--ath-danger);
  --ath-acc-line:   var(--ath-line);
  --ath-v57-border: var(--ath-line);
  --ath-ui-text:    var(--ath-ink);
  --ath-ui-border:  var(--ath-line);
  --ath-ui-gold-dark: var(--ath-gold-deep);
  --ath-lu-gold-deep: var(--ath-gold-deep);
  --aqr-line:       var(--ath-line);
  --aqr-gold-deep:  var(--ath-gold-deep);

  --gold:           var(--ath-gold);
  --gold-dk:        var(--ath-gold-deep);
  --gold-lt:        var(--ath-gold-soft);
  --gold-xl:        var(--ath-cream);
  --champagne:      var(--ath-gold-soft);
  --border:         var(--ath-line);
  --dark:           var(--ath-ink);
  --mid:            #5a4536;
  --muted:          var(--ath-ink-soft);
  --ivory:          var(--ath-ivory);
  --white:          var(--ath-white);
  --red:            var(--ath-danger);
  --green:          var(--ath-success);
  --shadow:         var(--ath-shadow-sm);
  --shadow-md:      var(--ath-shadow);

  --v20-bg:         var(--ath-ivory);
  --v20-surface:    var(--ath-white);
  --v20-ink:        var(--ath-ink);
  --v20-muted:      var(--ath-ink-soft);
  --v20-gold:       var(--ath-gold-deep);
  --v20-gold-2:     var(--ath-gold);
  --v20-line:       var(--ath-line);
  --v20-success:    var(--ath-success);
  --v20-danger:     var(--ath-danger);
  --v20-shadow:     var(--ath-shadow);
  --v20-radius:     var(--ath-radius);

  --ath-v16-gold:    var(--ath-gold-deep);
  --ath-v16-line:    var(--ath-line);
  --ath-v16-surface: var(--ath-white);
  --ath-v16-radius:  var(--ath-radius);
  --ath-v16-shadow:  var(--ath-shadow);
}

/* ── 2. TYPOGRAPHY ────────────────────────────────────────── */
/* One family, Arial, everywhere. Hierarchy comes from weight, size and
   letter-spacing rather than from a second typeface. */
html, body,
button, input, select, textarea,
.btn, p, li, dd, label, small,
.ath-rich-text{
  font-family: var(--ath-font-body) !important;
}

h1, h2, h3,
:where(h1, h2, h3),
.ath-home-hero-copy h1,
.ath-section-head h1,
.ath-section-head h2{
  font-family: var(--ath-font-display) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ath-ink);
}

.section-kicker{
  font-family: var(--ath-font-body);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ath-gold-deep);
}

p, li, dd, label, small, .ath-rich-text{
  font-family: var(--ath-font-body);
}

/* ── 3. FIXES ─────────────────────────────────────────────── */

/* 3a. Secondary button was white text on a white fill — invisible
       everywhere it appeared (hero "explore our work", geo pages,
       gallery). Give it an explicit readable colour. */
.btn-outline,
a.btn-outline,
button.btn-outline{
  color: var(--ath-gold-deep) !important;
  background: var(--ath-white) !important;
  border: 1px solid var(--ath-gold) !important;
}
.btn-outline:hover,
a.btn-outline:hover{
  color: var(--ath-white) !important;
  background: var(--ath-gold-deep) !important;
  border-color: var(--ath-gold-deep) !important;
}

/* 3b. The home sections below the fold ran a load-time reveal
       animation with fill-mode:both. Paired with the old
       content-visibility rule they never played, so the section
       stayed at opacity:0 — the homepage final call-to-action was
       invisible to every visitor. Reveal only what is above the
       fold; below-fold content starts visible. */
.ath-home-company-strip > .container,
.ath-home-quick-services > .container,
.ath-home-design-gallery > .container,
.ath-home-final-cta > .container{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 3c. Header: the mobile menu button was showing on desktop, and the
       nav was 94px tall inside a 72px header, pushing the cart out
       of the bar. */
@media (min-width: 981px){
  .pub-mobile-menu,
  #pub-menu-btn,
  .pub-mobile-lang,
  .ath-mobile-cart{ display: none !important; }

  .pub-header .container{
    width: min(1500px, calc(100% - 36px)) !important;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .ath-public-brand{ flex: 0 0 auto; }
  .pub-nav{
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end;
    gap: 1px;
    height: auto;
    overflow: visible;
  }
  .pub-nav > a{
    padding: 9px 9px !important;
    font-size: .92rem;
    line-height: 1.2;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .ath-public-auth{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: 4px;
    flex: 0 0 auto;
  }
  .ath-public-auth-link{
    padding: 9px 11px !important;
    font-size: .88rem;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
  }
  /* Flag + code only; the word "English"/"العربية" cost 110px of bar. */
  .ath-public-language-switch{
    padding: 8px 10px !important;
    min-height: 42px;
    gap: 6px;
    flex: 0 0 auto;
  }
  .ath-public-language-switch .ath-public-language-label{ display: none !important; }
  .ath-public-language-switch .ath-public-language-code{ display: inline !important; font-weight: 800; }
  .ath-header-cart{
    position: static !important;
    margin-inline-start: 4px;
    min-height: 42px;
    flex: 0 0 auto;
  }
  .ath-header-cart-label{ display: none; }
}

/* 3d. V20 reserved 74px of bottom padding on mobile for a bottom
       action bar that was never rendered, leaving dead space under
       every page. The bar now exists (see 6d) and owns that space. */

/* ── 4. V19 BODY (carried over) ───────────────────────────── */
html{scroll-behavior:smooth;overflow-x:hidden}body{color:var(--ath-ink);overflow-x:hidden;background:#fff}img{max-width:100%;height:auto}.container{width:min(1180px,calc(100% - 32px));margin-inline:auto}
.pub-header{position:sticky!important;top:0;z-index:1000;background:rgba(255,255,255,.97)!important;color:var(--ath-ink)!important;border-bottom:1px solid var(--ath-line);box-shadow:0 5px 20px rgba(60,40,20,.07);backdrop-filter:blur(10px)}
.pub-header a,.pub-header button,.pub-nav a{color:var(--ath-ink)!important;text-shadow:none!important}.pub-nav a:hover,.pub-nav a.active{color:var(--ath-gold-dark)!important}.pub-nav .ath-nav-quote,.pub-nav .ath-public-auth-link.is-primary{color:#fff!important;background:var(--ath-gold-dark)!important;border-color:var(--ath-gold-dark)!important}
.ath-public-brand{display:flex!important;align-items:center;flex:0 0 auto;min-width:118px}.ath-public-brand img{display:block!important;width:auto!important;height:54px!important;max-width:176px!important;object-fit:contain!important;filter:none!important;opacity:1!important}.ath-footer-logo img,.sidebar-brand img{display:block!important;width:auto!important;max-width:180px!important;max-height:64px!important;object-fit:contain!important;opacity:1!important;filter:none!important}
.btn,.ath-geo-actions a{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-weight:800;text-decoration:none;padding:10px 17px}.btn-whatsapp{background:var(--ath-green)!important;border:1px solid var(--ath-green)!important;color:#fff!important}.btn-call{background:#fff!important;border:1px solid var(--ath-gold-dark)!important;color:var(--ath-gold-dark)!important}
.ath-home-hero{background:linear-gradient(135deg,#fffaf2 0%,#fff 56%,#f6ead8 100%);color:var(--ath-ink)}.ath-home-hero h1,.ath-home-hero p,.ath-home-hero span{color:inherit}.ath-home-hero-actions{display:flex;flex-wrap:wrap;gap:10px}.ath-home-hero-media{background:linear-gradient(145deg,#f7ead5,#fff);border:1px solid var(--ath-line);border-radius:24px;overflow:hidden}.ath-branded-empty{min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--ath-muted);text-align:center}.ath-branded-empty img{width:min(220px,65%);max-height:110px;object-fit:contain}
.ath-home-season,.ath-geo-panel{padding-block:clamp(44px,7vw,84px)}.ath-home-season{background:var(--ath-cream);border-block:1px solid var(--ath-line)}.ath-section-head{max-width:780px;margin-bottom:26px}.ath-section-head h1,.ath-section-head h2{color:var(--ath-ink);line-height:1.25;margin-block:8px 12px}.ath-section-head p{color:var(--ath-muted);line-height:1.8}.ath-season-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.ath-season-links a{display:flex;align-items:center;gap:12px;min-height:76px;padding:14px;border-radius:16px;border:1px solid var(--ath-line);background:#fff;color:var(--ath-ink);text-decoration:none;box-shadow:0 8px 24px rgba(74,47,17,.06)}.ath-season-links a:hover{border-color:var(--ath-gold);transform:translateY(-2px)}.ath-season-links img{width:42px;height:42px;object-fit:contain;flex:none}
.ath-geo-page,.ath-geo-index{color:var(--ath-ink)}.ath-geo-hero{padding:34px 0 clamp(48px,8vw,90px);background:radial-gradient(circle at 15% 20%,#f2dfbd 0,transparent 34%),linear-gradient(135deg,#fffaf1,#fff);border-bottom:1px solid var(--ath-line)}.ath-geo-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:center}.ath-geo-hero h1{font-size:clamp(2rem,5vw,4rem);line-height:1.15;color:var(--ath-ink);margin:14px 0}.ath-geo-hero p{font-size:clamp(1rem,2vw,1.16rem);line-height:1.9;color:var(--ath-muted);max-width:760px}.ath-geo-brand-mark{width:240px;height:150px;object-fit:contain;padding:20px;border-radius:24px;background:rgba(255,255,255,.75);border:1px solid var(--ath-line)}.ath-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:.92rem;margin-bottom:26px}.ath-breadcrumb a{color:var(--ath-gold-dark);font-weight:700}.ath-geo-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ath-geo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.ath-geo-grid>a{display:flex;align-items:center;gap:13px;padding:18px;min-height:92px;background:#fff;border:1px solid var(--ath-line);border-radius:16px;color:var(--ath-ink);text-decoration:none;box-shadow:0 8px 24px rgba(74,47,17,.05)}.ath-geo-grid>a:hover{border-color:var(--ath-gold);box-shadow:0 12px 30px rgba(74,47,17,.1)}.ath-geo-grid img{width:46px;height:46px;object-fit:contain}.ath-geo-grid b,.ath-geo-grid small{display:block}.ath-geo-grid small{margin-top:5px;color:var(--ath-muted)}.ath-geo-all-services{margin-top:30px;border:1px solid var(--ath-line);border-radius:16px;background:var(--ath-cream);padding:0 18px 18px}.ath-geo-all-services summary{cursor:pointer;padding:18px 4px;font-weight:900;color:var(--ath-gold-dark)}.ath-geo-chip-grid{display:flex;flex-wrap:wrap;gap:9px}.ath-geo-chip-grid a{display:inline-flex;align-items:center;min-height:42px;padding:8px 13px;border-radius:999px;background:#fff;border:1px solid var(--ath-line);color:var(--ath-ink);text-decoration:none}.ath-geo-chip-grid a:hover{border-color:var(--ath-gold);color:var(--ath-gold-dark)}
.ath-geo-index{width:min(1180px,calc(100% - 32px));margin-inline:auto;padding-block:clamp(40px,7vw,80px)}.ath-geo-index>h2{margin-top:32px;color:var(--ath-ink)}.ath-geo-seo-copy{padding:18px;border-inline-start:4px solid var(--ath-gold);background:var(--ath-cream);border-radius:12px;color:var(--ath-muted);line-height:1.8}
.ath-geo-service{width:min(1180px,calc(100% - 32px));margin-inline:auto;padding-block:clamp(34px,6vw,72px);color:var(--ath-ink)}.ath-geo-service>.ath-section-head{max-width:900px;padding:clamp(22px,4vw,42px);border:1px solid var(--ath-line);border-radius:22px;background:linear-gradient(135deg,var(--ath-cream),#fff)}.ath-geo-service>.ath-section-head h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.2;color:var(--ath-ink)}.ath-v19-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;color:var(--ath-muted)}.ath-v19-breadcrumb a{color:var(--ath-gold-dark)}.ath-image-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.ath-geo-whatsapp{background:var(--ath-green)!important;border-color:var(--ath-green)!important;color:#fff!important}.ath-geo-service-summary,.ath-v19-booking-steps,.ath-geo-other-cities,.ath-account-section{margin-top:28px;padding:clamp(18px,3vw,30px);border:1px solid var(--ath-line);border-radius:18px;background:#fff}.ath-geo-service-summary p{color:var(--ath-muted);line-height:1.85}.ath-v19-booking-steps>div{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.ath-v19-booking-steps article{display:grid;gap:7px;padding:18px;border-radius:15px;background:var(--ath-cream)}.ath-v19-booking-steps article b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ath-gold-dark);color:#fff}.ath-v19-booking-steps article span{color:var(--ath-muted)}.ath-geo-other-cities summary{cursor:pointer;font-weight:900;color:var(--ath-gold-dark);margin-bottom:14px}.ath-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.ath-related-card{overflow:hidden;border:1px solid var(--ath-line);border-radius:15px;background:#fff;color:var(--ath-ink);text-decoration:none}.ath-related-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ath-cream)}.ath-related-card span{display:block;padding:12px;font-weight:700}.ath-v19-logo-fallback{object-fit:contain!important;padding:18px}.ath-v19-empty-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px;padding:30px;text-align:center;border:1px dashed var(--ath-gold);border-radius:18px;background:var(--ath-cream)}.ath-v19-empty-brand img{max-width:180px;max-height:80px;object-fit:contain}
.ath-geo-booking-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.ath-geo-booking-steps>*{padding:18px;border:1px solid var(--ath-line);border-radius:16px;background:var(--ath-cream)}.ath-geo-empty,.ath-geo-brand-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:240px;padding:30px;background:var(--ath-cream);border:1px dashed var(--ath-gold);border-radius:18px;text-align:center}.ath-geo-empty img,.ath-geo-brand-empty img,.ath-geo-image-fallback{max-width:180px;max-height:100px;object-fit:contain!important;padding:12px;background:#fff}
.pub-footer,.public-footer{background:#251b14!important;color:#fff!important}.pub-footer a,.pub-footer p,.pub-footer span,.pub-footer h2,.pub-footer h3,.public-footer a,.public-footer p,.public-footer span{color:#fff!important}.pub-footer a:hover,.public-footer a:hover{color:#f1cf92!important}
body[data-admin-mode]{background:#f7f5f2;color:#241c16}.admin-sidebar{background:#fff!important;color:#241c16!important;border-inline-end:1px solid #e7ded2}.sidebar-brand{background:#fff!important}.sidebar-link,.ath-admin-nav-group-toggle,.ath-admin-nav-search label{color:#2a211b!important}.sidebar-link.active{background:#f3e7d2!important;color:#6f4813!important}.admin-main,.admin-content{min-width:0}.admin-content table,.table-responsive{max-width:100%;overflow-x:auto}body[data-admin-mode] input,body[data-admin-mode] select,body[data-admin-mode] textarea{font-size:16px;max-width:100%}
@media (max-width:980px){.ath-season-links{grid-template-columns:repeat(2,minmax(0,1fr))}.ath-geo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ath-geo-hero-inner{grid-template-columns:1fr}.ath-geo-brand-mark{width:190px;height:105px}.pub-header .container{width:min(100% - 20px,1180px)}.pub-nav{background:#fff!important;color:var(--ath-ink)!important}.pub-nav a{min-height:44px;display:flex!important;align-items:center}.admin-sidebar{width:min(88vw,330px)!important}.admin-main{width:100%!important}.admin-header{position:sticky;top:0;z-index:90}.sidebar-brand img{max-height:54px!important}}
@media (max-width:640px){.container,.ath-geo-index,.ath-geo-service{width:min(100% - 24px,1180px)}.ath-public-brand img{height:44px!important;max-width:136px!important}.ath-home-hero{padding-top:26px}.ath-home-hero-actions .btn,.ath-geo-actions .btn,.ath-geo-actions a,.ath-image-actions .btn{flex:1 1 calc(50% - 8px);padding-inline:10px}.ath-season-links,.ath-geo-grid,.ath-geo-booking-steps,.ath-v19-booking-steps>div,.ath-related-grid{grid-template-columns:1fr}.ath-season-links a{min-height:66px}.ath-geo-hero{padding-top:22px}.ath-geo-hero h1,.ath-geo-service>.ath-section-head h1{font-size:2.15rem}.ath-geo-brand-mark{justify-self:center}.ath-geo-panel{padding-block:42px}.ath-geo-chip-grid{gap:7px}.ath-geo-chip-grid a{font-size:.9rem}.ath-quick-contact-bar{padding-bottom:max(8px,env(safe-area-inset-bottom))}.ath-quick-contact-bar a{min-height:48px}body[data-admin-mode] .card,body[data-admin-mode] .panel{border-radius:12px;padding:14px}body[data-admin-mode] table{min-width:680px}body[data-admin-mode] .btn{min-height:44px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ── 5. V20 BODY (carried over) ─────────────────── */
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}body{background:var(--v20-bg);color:var(--v20-ink)}body :where(p,li,dd,label,small){color:inherit}a,button,input,select,textarea,[role=button]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button,a,.btn,input,select,textarea{font:inherit}.btn,button,input,select,textarea{min-height:46px}.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(197,154,82,.42)!important;outline-offset:3px!important}
.pub-header{min-height:72px!important}.pub-header .flex-between{gap:18px}.pub-nav{align-items:center}.pub-nav>a,.ath-public-auth-link,.ath-public-language-switch{font-weight:750;white-space:nowrap}.ath-nav-quote{box-shadow:0 8px 22px rgba(118,80,25,.2)}
.ath-home-hero-copy h1{font-size:clamp(2.35rem,6vw,5.4rem);max-width:13ch;letter-spacing:-.035em}.ath-home-hero-copy p{font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.85;max-width:60ch}.ath-home-hero-grid{gap:clamp(28px,5vw,72px)}
.ath-smart-service-card,.ath-design-album-card,.ath-home-design-card{border:1px solid var(--v20-line)!important;border-radius:var(--v20-radius)!important;background:var(--v20-surface)!important;box-shadow:0 8px 28px rgba(51,34,18,.06)!important;overflow:hidden}.ath-smart-service-card:hover,.ath-design-album-card:hover,.ath-home-design-card:hover{box-shadow:var(--v20-shadow)!important;transform:translateY(-3px)}
.ath-smart-service-media img,.ath-design-album-image img,.ath-home-design-card img,.ath-photo-card img,.ath-related-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#f4ecdf}.ath-image-fallback,.ath-v19-logo-fallback{object-fit:contain!important;padding:clamp(18px,5vw,42px)!important;background:#fffaf0!important}
.ath-rich-text{font-size:1.04rem;line-height:1.9;color:var(--v20-muted)}.ath-rich-text :where(a,.ath-shortcode-action){color:var(--v20-gold);font-weight:800}.ath-shortcode-actions{display:flex;flex-wrap:wrap;gap:10px;margin-block:16px}.ath-shortcode-action{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border:1px solid var(--v20-gold);border-radius:12px;text-decoration:none}.ath-shortcode-action.is-primary{background:var(--v20-gold);color:#fff}
/* Cart: one predictable layer on desktop and touch devices. */
.ath-cart-backdrop{position:fixed!important;inset:0!important;z-index:1190!important;background:rgba(24,17,12,.52)!important;backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}.ath-cart-backdrop.is-open{opacity:1}.ath-cart-drawer{position:fixed!important;z-index:1200!important;inset-block:0!important;inset-inline-end:0!important;width:min(430px,94vw)!important;height:100dvh!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;background:#fff!important;color:var(--v20-ink)!important;box-shadow:-24px 0 70px rgba(28,19,12,.22)!important;transform:translate3d(105%,0,0)!important;visibility:hidden;transition:transform .24s ease,visibility 0s linear .24s}.ath-cart-drawer.is-open{transform:translate3d(0,0,0)!important;visibility:visible;transition-delay:0s}.ath-cart-drawer-head,.ath-cart-drawer-foot{padding:16px 18px!important;background:#fff!important;border-color:var(--v20-line)!important}.ath-cart-drawer-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid}.ath-cart-drawer-head strong{font-size:1.08rem;color:var(--v20-ink)!important}.ath-cart-drawer-head button{width:46px;min-height:46px;border:0;border-radius:50%;background:#f5eee4;color:var(--v20-ink);font-size:1.5rem}.ath-cart-drawer-body{overflow:auto!important;overscroll-behavior:contain;padding:14px!important}.ath-cart-mini-item{display:grid!important;grid-template-columns:66px minmax(0,1fr) 46px;gap:12px;align-items:center;padding:12px!important;margin-bottom:10px;border:1px solid var(--v20-line)!important;border-radius:14px!important;background:#fff!important}.ath-cart-mini-thumb img{width:64px!important;height:58px!important;object-fit:cover;border-radius:10px;background:#f5eee4}.ath-cart-mini-copy{min-width:0}.ath-cart-mini-copy strong{display:block;color:var(--v20-ink)!important;overflow-wrap:anywhere}.ath-cart-mini-item form button{width:44px;min-height:44px;border:0;border-radius:50%;background:#fff0ed;color:var(--v20-danger);font-size:1.35rem}.ath-cart-drawer-foot{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid;padding-bottom:max(16px,env(safe-area-inset-bottom))!important}.ath-cart-drawer-foot .btn{width:100%}.ath-cart-empty{display:grid;place-items:center;min-height:220px;padding:24px;text-align:center;color:var(--v20-muted)!important}.ath-cart-open{overflow:hidden}.ath-header-cart-badge,.ath-mobile-cart b,[data-cart-count-output]{font-variant-numeric:tabular-nums}.ath-header-cart.is-active .ath-header-cart-badge,.ath-mobile-cart b{display:inline-grid!important;place-items:center;min-width:24px;height:24px;padding-inline:6px;border-radius:999px;background:var(--v20-danger)!important;color:#fff!important;font-size:.78rem}.ath-cart-toast-v14{position:fixed;z-index:1400;inset-inline:16px;bottom:max(88px,calc(env(safe-area-inset-bottom) + 78px));margin-inline:auto;width:max-content;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:999px;background:#211914;color:#fff;box-shadow:var(--v20-shadow);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.ath-cart-toast-v14.is-open{opacity:1;transform:none}form[data-cart-busy="1"] button,[aria-busy="true"]{cursor:wait;opacity:.7}.ath-cart-row{border:1px solid var(--v20-line)!important;border-radius:var(--v20-radius)!important;background:#fff!important;box-shadow:0 8px 25px rgba(51,34,18,.05)}.ath-cart-inline-edit{display:grid;grid-template-columns:110px 130px minmax(180px,1fr) auto;gap:10px;align-items:end}.ath-cart-inline-edit label{display:grid;gap:5px;font-weight:700}.ath-cart-inline-edit input{width:100%;border:1px solid var(--v20-line);border-radius:10px;padding:8px 10px;color:var(--v20-ink);background:#fff}
/* Admin: compact desktop density, full-width mobile controls, no hidden overflow. */
body[data-admin-mode]{background:#f5f2ed!important;color:var(--v20-ink)!important}.admin-shell,.admin-main,.admin-content{min-width:0!important}.admin-header{background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--v20-line)!important;backdrop-filter:blur(12px)}.admin-content{padding:clamp(12px,2vw,26px)!important}.admin-content :where(.card,.panel,.stat-card,.table-card){border-color:var(--v20-line)!important;border-radius:16px!important;box-shadow:0 7px 24px rgba(50,34,18,.05)!important}.admin-content :where(h1,h2,h3,h4),.admin-header{color:var(--v20-ink)!important}.admin-content :where(p,label,small,.text-muted){color:var(--v20-muted)!important}.admin-content :where(input,select,textarea){color:var(--v20-ink)!important;background:#fff!important;border-color:#cfc1ae!important}.admin-content table{background:#fff;color:var(--v20-ink)}.admin-content th{background:#f3eadc!important;color:#392b20!important}.admin-content td{color:#382e27!important;border-color:#ece2d4!important}.sidebar-brand{min-height:84px}.sidebar-link{min-height:46px;border-radius:10px;margin:2px 8px}.ath-admin-mobile-actions{padding-bottom:max(7px,env(safe-area-inset-bottom))!important}.ath-admin-mobile-actions a{min-height:54px;touch-action:manipulation}
/* Public document view and browser printing. */
.ath-doc-card{color:var(--v20-ink)!important}.ath-doc-card :where(p,td,dd){color:inherit}.ath-doc-actions{padding-bottom:max(10px,env(safe-area-inset-bottom))!important}.ath-doc-table{table-layout:fixed}.ath-doc-table td{overflow-wrap:anywhere}.ath-doc-number,.ath-doc-total dd{font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:980px){.pub-header{min-height:64px!important}.pub-nav{max-height:calc(100dvh - 70px);overflow:auto;overscroll-behavior:contain;padding-bottom:max(18px,env(safe-area-inset-bottom))!important}.pub-nav>a,.ath-public-auth-link,.ath-public-language-switch{min-height:48px!important;padding:11px 14px!important}.admin-header{position:sticky!important;top:0;z-index:80}.admin-sidebar{height:100dvh!important;overflow:auto!important;overscroll-behavior:contain}.admin-content :where(.table-responsive,.responsive-table,.data-table-wrap){display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.admin-content table{min-width:720px}}
@media(max-width:700px){body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}.ath-home-hero-copy h1{font-size:clamp(2.25rem,12vw,3.55rem)}.ath-home-hero-actions{display:grid!important;grid-template-columns:1fr 1fr}.ath-home-hero-actions .btn{width:100%!important}.ath-smart-service-card:hover,.ath-design-album-card:hover,.ath-home-design-card:hover{transform:none}.ath-cart-drawer{width:100vw!important}.ath-cart-drawer-foot{position:sticky;bottom:0}.ath-cart-page .ath-cart-row{display:grid!important;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:12px!important}.ath-cart-page .ath-cart-remove{grid-column:1/-1}.ath-cart-inline-edit{grid-column:1/-1;grid-template-columns:1fr 1fr}.ath-cart-inline-edit label:nth-of-type(3),.ath-cart-inline-edit .btn{grid-column:1/-1}.admin-content{padding:12px!important}.admin-content :where(.grid,.stats-grid,.form-grid){grid-template-columns:1fr!important}.admin-content :where(.btn,button[type=submit],input,select,textarea){min-height:48px;font-size:16px}.ath-admin-mobile-actions{z-index:110!important}.ath-doc-head,.ath-doc-parties,.ath-doc-summary{gap:10px!important}.ath-doc-meta{grid-template-columns:1fr 1fr!important}}
@media(max-width:420px){.ath-home-hero-actions{grid-template-columns:1fr}.ath-cart-inline-edit{grid-template-columns:1fr}.ath-cart-inline-edit>*{grid-column:1!important}.ath-cart-drawer-foot{grid-template-columns:1fr}.ath-doc-meta{grid-template-columns:1fr!important}}
@media print{.pub-header,.pub-footer,.ath-contact-bar,.ath-doc-actions,.ath-skip-link{display:none!important}body{padding:0!important;background:#fff!important}.ath-doc-page{padding:0!important;background:#fff!important}.ath-doc-card{border:0!important;border-radius:0!important;box-shadow:none!important}.ath-doc-table{display:table!important}.ath-doc-mobile-items{display:none!important}.ath-doc-trust,.ath-doc-summary,.ath-doc-party,.ath-doc-item-card{break-inside:avoid;page-break-inside:avoid}.ath-doc-table thead{display:table-header-group}.ath-doc-table tr{break-inside:avoid;page-break-inside:avoid}}
@media(hover:hover) and (pointer:fine){.btn,a,button{transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ALTAHANY_ADMIN_NO_H_SCROLL_V21 — the document (invoice/quotation) form and
   the catalog list hold tables 850-1050px wide. Each already sits in an
   overflow-x:auto wrapper, but a grid/flex child defaults to min-width:auto,
   so the wide table still pushed its column and the WHOLE PAGE scrolled
   sideways — the reported "page is not centred, I drag left and right while
   making an invoice". Letting every container in the chain shrink confines
   the scroll to the table itself. min-width:0 cannot change a layout that
   already fits, so this is safe where nothing overflows. */
.admin-shell,.admin-main,.admin-content,
.admin-content .card,.admin-content .card-body,
.admin-content .panel,.admin-content form,
.admin-content .grid,.admin-content .form-grid,
.ath-document-form-page,.ath-catalog-list-page{min-width:0!important}

.admin-content .table-responsive,
.admin-content .alt-admin-table-wrap,
.admin-content .table-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}

/* Keep the page itself from ever scrolling sideways in the panel. */
body[data-admin-mode]{overflow-x:hidden}

@media(max-width:760px){
  /* A 950px table on a 390px phone is unusable; let it size to its content
     and scroll inside its own wrapper instead of forcing a fixed width. */
  .ath-document-form-page table,
  .ath-catalog-list-page table{min-width:640px!important}
  .admin-content .card-body{padding:.5rem!important}
}

/* ALTAHANY_OFFERS_ADMIN_V21 — the offers screens. Deliberately plain: the
   dangerous action is visually separated and never sits beside a routine one. */
.ath-offers-admin{max-width:1180px;margin-inline:auto}
.ath-offers-admin section{margin-bottom:22px;padding:clamp(14px,2.4vw,24px);border:1px solid #e7d9c5;border-radius:16px;background:#fff}
.ath-offers-admin h2{margin:0 0 6px;font-size:1.05rem;color:#2a1c12}
.ath-offers-admin h2 small{color:#695e55;font-weight:400;font-size:.82rem}
.ath-offers-admin p{color:#695e55;line-height:1.8;margin:0 0 12px}
.ath-offer-note{font-size:.86rem;background:#fbf4e9;border:1px solid #eadcc6;border-radius:10px;padding:10px 12px;margin-top:10px}

.ath-offer-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.ath-offer-stats>div{padding:14px;border:1px solid #eadcc6;border-radius:12px;background:#fffdf9;text-align:center}
.ath-offer-stats b{display:block;font-size:1.6rem;color:#7a5312}
.ath-offer-stats span{font-size:.85rem;color:#695e55}

.ath-offer-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ath-offer-form label,.ath-offer-step label{display:grid;gap:6px;min-width:0}
.ath-offer-form label>span,.ath-offer-step label>span{font-weight:700;font-size:.88rem;color:#2a1c12}
.ath-offer-form input,.ath-offer-form textarea,.ath-offer-step input,.ath-offer-step select{
  width:100%;min-height:46px;padding:9px 12px;border:1px solid #e7d9c5;border-radius:10px;background:#fff;color:#211914;font:inherit}
.ath-offer-form textarea{min-height:180px;resize:vertical;font-family:Arial,sans-serif}
.ath-offer-form small{color:#695e55;font-size:.8rem}
.ath-offer-wide{grid-column:1/-1}
.ath-offer-form button{grid-column:1/-1}

.ath-admin-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border:0;border-radius:10px;background:linear-gradient(135deg,#b98f3e,#7a5312);color:#fff;font-weight:700;cursor:pointer;text-decoration:none}
.ath-admin-btn.is-ghost{background:#fff;color:#7a5312;border:1px solid #b98f3e}
.ath-admin-btn.is-danger{background:#a72d2d;color:#fff}
.ath-admin-btn:hover{filter:brightness(1.05)}

.ath-offer-status{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.ath-offer-status>b{padding:8px 14px;border-radius:999px;background:#fbf4e9;color:#7a5312}
.ath-offer-status[data-status=sending]>b{background:#e8f0fb;color:#1c4f9c}
.ath-offer-status[data-status=completed]>b{background:#e8f5ee;color:#0a5c36}
.ath-offer-status[data-status=paused]>b{background:#fdecec;color:#8a2323}
.ath-offer-status dl,.ath-offer-row dl{display:flex;flex-wrap:wrap;gap:16px;margin:0}
.ath-offer-status dt,.ath-offer-row dt{font-size:.76rem;color:#695e55}
.ath-offer-status dd,.ath-offer-row dd{margin:0;font-weight:700;color:#2a1c12}

.ath-offer-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start}
.ath-offer-step.is-danger{border-color:#e7bcbc;background:#fffafa}
.ath-offer-step.is-danger h2{color:#8a2323}

.ath-offer-preview-frame{border:1px solid #eadcc6;border-radius:12px;padding:16px;background:#fffdf9;max-height:420px;overflow:auto}

.ath-offer-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) auto;gap:14px;align-items:center;padding:14px;border:1px solid #eadcc6;border-radius:12px;margin-bottom:10px;background:#fffdf9}
.ath-offer-row h3{margin:2px 0;font-size:1rem}
.ath-offer-number{font-size:.75rem;color:#7a5312;font-weight:700}
.ath-offer-recipient{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid #f0e7d8;font-size:.88rem}
.ath-offer-recipient b{padding:3px 10px;border-radius:999px;background:#fbf4e9;color:#7a5312;font-size:.78rem}
.ath-offer-recipient b[data-status=sent]{background:#e8f5ee;color:#0a5c36}
.ath-offer-recipient b[data-status=failed]{background:#fdecec;color:#8a2323}
.ath-offer-recipient small{color:#695e55}
.ath-admin-empty{padding:26px;text-align:center;color:#695e55;border:1px dashed #e7d3ac;border-radius:12px;background:#fbf4e9}
.ath-admin-success{padding:12px 16px;border-radius:10px;background:#e8f5ee;border:1px solid #087944;color:#0a5c36;margin-bottom:14px}
.ath-admin-error{padding:12px 16px;border-radius:10px;background:#fdecec;border:1px solid #a72d2d;color:#8a2323;margin-bottom:14px}

@media(max-width:760px){
  .ath-offer-form{grid-template-columns:1fr}
  .ath-offer-row{grid-template-columns:1fr;text-align:start}
  .ath-offer-recipient{grid-template-columns:1fr 1fr;gap:6px}
}

/* ALTAHANY_ADMIN_CARDS_V21 — data tables become cards on phones.
   The old behaviour forced a 720-1050px table inside a horizontal scroller,
   so making an invoice meant dragging sideways to reach the fields. Below the
   breakpoint each row becomes a stacked card with its column name beside each
   value, and nothing scrolls sideways at all. */
@media(max-width:860px){
  .admin-content table.ath-cards-table,
  .admin-content table.ath-cards-table tbody,
  .admin-content table.ath-cards-table tr,
  .admin-content table.ath-cards-table td{display:block;width:auto!important;min-width:0!important}

  .admin-content table.ath-cards-table{border:0!important;background:transparent!important}
  .admin-content table.ath-cards-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  .admin-content table.ath-cards-table tr{
    margin-bottom:12px;padding:12px 14px;border:1px solid #e7d9c5;border-radius:14px;
    background:#fff;box-shadow:0 6px 18px rgba(50,34,18,.05)}

  .admin-content table.ath-cards-table td{
    display:grid;grid-template-columns:minmax(88px,38%) 1fr;gap:10px;align-items:start;
    padding:8px 0!important;border:0!important;border-bottom:1px solid #f3ece0!important;
    text-align:start!important;white-space:normal!important}
  .admin-content table.ath-cards-table td:last-child{border-bottom:0!important}

  .admin-content table.ath-cards-table td::before{
    content:attr(data-label);font-size:.76rem;font-weight:700;color:#7a5312;line-height:1.5}
  .admin-content table.ath-cards-table td[data-label=""]::before{content:none}

  /* Action cells read as a row of buttons, not a labelled field. */
  .admin-content table.ath-cards-table td:has(.btn),
  .admin-content table.ath-cards-table td:has(button),
  .admin-content table.ath-cards-table td:has(form){grid-template-columns:1fr}
  .admin-content table.ath-cards-table td:has(.btn)::before,
  .admin-content table.ath-cards-table td:has(button)::before,
  .admin-content table.ath-cards-table td:has(form)::before{display:none}
  .admin-content table.ath-cards-table td .btn,
  .admin-content table.ath-cards-table td button{width:100%;margin-top:4px}

  .admin-content table.ath-cards-table img{max-width:100%;height:auto;border-radius:8px}

  /* The wrapper no longer needs to scroll once the table is a card list. */
  .admin-content .table-responsive:has(.ath-cards-table),
  .admin-content .alt-admin-table-wrap:has(.ath-cards-table),
  .admin-content .table-wrap:has(.ath-cards-table){overflow-x:visible!important}
}

/* ── 6. OVERRIDES — final authority ───────────────────────── */

/* 6a. Surfaces and rhythm. Warmer ivory ground, one card treatment. */
body{ background: var(--ath-ivory); color: var(--ath-ink); }

.ath-home-hero{
  background: linear-gradient(135deg, var(--ath-cream) 0%, var(--ath-white) 58%, #f7ecdb 100%);
}

/* 6b. Hero: two clear actions, generous but not cavernous.
       The display face is a naskh serif — it needs more leading than the
       old Arial stack, and a lower ceiling, or the ascenders of one line
       collide with the descenders of the next. */
.ath-home-hero{ padding-block: clamp(28px, 4vw, 56px); }
.ath-home-hero-grid{
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ath-home-hero-copy{
  max-width: none !important;
  text-align: start;
  overflow: visible !important;
}
.ath-home-hero-copy h1{
  color: var(--ath-ink);
  font-size: clamp(2.1rem, 3.6vw, 3.5rem) !important;
  line-height: 1.5 !important;
  max-width: 16ch !important;
  margin-bottom: .5em;
  text-align: start;
  overflow-wrap: break-word;
}
.ath-home-hero-copy p,
.ath-home-hero-subtitle-v1066{
  text-align: start !important;
  max-width: 52ch !important;
  overflow: visible !important;
}
.ath-home-hero-actions{ justify-content: flex-start; }
.ath-home-hero-actions{ gap: 12px; margin-top: 26px; }
.ath-home-hero-actions .btn{ padding-inline: 22px; }

.ath-home-trust{
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  width: 100%;
  grid-template-columns: none !important;
}
.ath-home-trust span{
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--ath-line);
  border-radius: 999px;
  background: var(--ath-white);
  color: var(--ath-ink-soft);
  font-size: .88rem;
  font-weight: 500;
}

/* 6c. Decorative gold rule under section headings — the floral/
       formal cue asked for, drawn in CSS so it costs nothing. */
.ath-section-head > h2::after,
.ath-home-final-cta h2::after,
.ath-home-company-strip h2::after{
  content: "";
  display: block;
  width: 74px;
  height: 2px;
  margin-block-start: 14px;
  background: linear-gradient(90deg, var(--ath-gold), transparent);
  border-radius: 2px;
}
[dir="rtl"] .ath-section-head > h2::after,
[dir="rtl"] .ath-home-final-cta h2::after,
[dir="rtl"] .ath-home-company-strip h2::after{
  background: linear-gradient(270deg, var(--ath-gold), transparent);
}
.ath-home-final-cta h2::after,
.ath-home-company-strip h2::after{ margin-inline: auto; }

/* 6d. Mobile bottom action bar. V20 already reserves the space. */
.ath-bottom-nav{ display: none; }

@media (max-width: 980px){
  .ath-bottom-nav{
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--ath-line);
    box-shadow: 0 -6px 24px rgba(60,40,20,.09);
    backdrop-filter: blur(10px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* An older rule paints any link pointing at /quote as a filled primary
     button; inside this bar that read as a broken tile. The bar carries its
     own emphasis instead. */
  .ath-bottom-nav a{
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 6px 2px;
    color: var(--ath-ink-soft);
    font-size: .68rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.15;
    text-align: center;
  }
  .ath-bottom-nav a svg{ width: 21px; height: 21px; fill: currentColor; }
  .ath-bottom-nav a{ color: var(--ath-ink-soft) !important; }
  .ath-bottom-nav a.is-active{ color: var(--ath-gold-deep) !important; }
  .ath-bottom-nav a.is-wa{ color: var(--ath-green) !important; }
  .ath-bottom-nav a.is-quote{ color: var(--ath-gold-deep) !important; }
  .ath-bottom-nav a.is-quote svg{ fill: var(--ath-gold-deep); }
  .ath-bottom-nav .ath-bn-badge{
    position: absolute;
    transform: translate(14px, -13px);
    min-width: 17px; height: 17px;
    display: none;
    place-items: center;
    padding-inline: 4px;
    border-radius: 999px;
    background: var(--ath-danger);
    color: #fff;
    font-size: .62rem;
  }
  .ath-bottom-nav .ath-bn-badge.is-on{ display: grid; }

  /* The left floating column duplicated call/WhatsApp/cart, which the
     bottom bar now covers. Keep it off mobile so nothing overlaps. */
  .ath-contact-bar{ display: none !important; }

  /* The bar and the space it needs share one breakpoint. V20 reserved the
     space only below 700px while the bar appears below 980px, so between
     those widths the bar sat on top of the last row of content. The
     safe-area inset is added on top for notched phones. */
  body{ padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (min-width: 981px){
  .ath-bottom-nav{ display: none !important; }
  body{ padding-bottom: 0 !important; }
}

/* 6e. Cards — one shared treatment. */
.ath-service-card,
.ath-smart-service-card,
.ath-design-album-card,
.ath-home-design-card,
.ath-related-card{
  border: 1px solid var(--ath-line) !important;
  border-radius: var(--ath-radius) !important;
  background: var(--ath-white) !important;
  box-shadow: var(--ath-shadow-sm) !important;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
@media (hover: hover) and (pointer: fine){
  .ath-service-card:hover,
  .ath-smart-service-card:hover,
  .ath-design-album-card:hover,
  .ath-home-design-card:hover,
  .ath-related-card:hover{
    border-color: var(--ath-gold-soft) !important;
    box-shadow: var(--ath-shadow) !important;
    transform: translateY(-3px);
  }
}

/* 6f. Primary action — one gold, everywhere. */
.btn-primary,
.pub-nav .ath-nav-quote,
.pub-nav .ath-public-auth-link.is-primary{
  background: linear-gradient(135deg, var(--ath-gold-deep), #a3762a) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(122,83,18,.22);
}
.btn-primary:hover{ box-shadow: 0 14px 32px rgba(122,83,18,.3); }

/* 6g. Footer contrast on the unified ink. */
.pub-footer,
.public-footer{ background: var(--ath-ink) !important; }

/* 6h. Empty and error states read as guidance, not dead ends. */
.ath-empty-state{
  display: grid;
  place-items: center;
  gap: 14px;
  padding: clamp(28px, 6vw, 56px);
  text-align: center;
  border: 1px dashed var(--ath-gold-soft);
  border-radius: var(--ath-radius);
  background: var(--ath-cream);
}
.ath-empty-state p{ color: var(--ath-ink-soft); margin: 0; max-width: 46ch; }

/* 6j. Homepage FAQ. */
.ath-home-faq{
  padding-block: clamp(42px, 6vw, 78px);
  background: var(--ath-cream);
  border-block: 1px solid var(--ath-line);
}
.ath-home-faq .ath-section-head{ margin-inline: auto; text-align: center; }
.ath-home-faq .ath-section-head h2::after{ margin-inline: auto; }

.ath-faq-list{
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin-inline: auto;
}
.ath-faq-item{
  border: 1px solid var(--ath-line);
  border-radius: var(--ath-radius-sm);
  background: var(--ath-white);
  box-shadow: var(--ath-shadow-sm);
  overflow: hidden;
}
.ath-faq-item summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 700;
  color: var(--ath-ink);
  list-style: none;
}
.ath-faq-item summary::-webkit-details-marker{ display: none; }
.ath-faq-item summary::after{
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ath-cream);
  color: var(--ath-gold-deep);
  font-weight: 700;
  line-height: 1;
}
.ath-faq-item[open] summary::after{ content: "−"; }
.ath-faq-item[open] summary{ color: var(--ath-gold-deep); }
.ath-faq-item p{
  margin: 0;
  padding: 0 18px 18px;
  color: var(--ath-ink-soft);
  line-height: 1.9;
}
.ath-faq-more{
  margin: 22px 0 0;
  text-align: center;
  color: var(--ath-ink-soft);
}
.ath-faq-more a{
  color: var(--ath-gold-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 6i. Respect reduced motion across everything added here. */
@media (prefers-reduced-motion: reduce){
  .ath-service-card,
  .ath-smart-service-card,
  .ath-design-album-card,
  .ath-home-design-card,
  .ath-related-card{ transition: none; }
}

/* 6k. Quote service picker — grouped, searchable, selected-first.
       Replaces a flat list of 25 checkboxes on the quote form. */
.ath-sp-hint{
  margin: 0 0 10px;
  color: var(--ath-ink-soft);
  font-size: .9rem;
}
.ath-service-picker{
  border: 1px solid var(--ath-line);
  border-radius: var(--ath-radius);
  background: var(--ath-white);
  padding: 14px;
}
.ath-sp-search{ margin-bottom: 12px; }

.ath-sp-selected{
  margin-bottom: 12px;
  padding: 12px;
  border-radius: var(--ath-radius-sm);
  background: var(--ath-cream);
  border: 1px solid var(--ath-gold-soft);
}
.ath-sp-selected strong{
  display: block;
  margin-bottom: 8px;
  color: var(--ath-gold-deep);
  font-size: .92rem;
}
.ath-sp-chips{ display: flex; flex-wrap: wrap; gap: 7px; }
.ath-sp-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid var(--ath-gold-soft);
  border-radius: 999px;
  background: var(--ath-white);
  color: var(--ath-ink);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
}
.ath-sp-chip::after{ content: "×"; color: var(--ath-gold-deep); font-weight: 700; }
.ath-sp-chip:hover{ border-color: var(--ath-gold); background: var(--ath-cream); }

.ath-sp-groups{ display: grid; gap: 8px; }
.ath-sp-group{
  border: 1px solid var(--ath-line);
  border-radius: var(--ath-radius-sm);
  background: var(--ath-ivory);
  overflow: hidden;
}
.ath-sp-group.has-selection{ border-color: var(--ath-gold-soft); }
.ath-sp-group > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  color: var(--ath-ink);
  list-style: none;
}
.ath-sp-group > summary::-webkit-details-marker{ display: none; }
.ath-sp-group > summary::after{
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ath-cream);
  color: var(--ath-gold-deep);
  font-weight: 700;
  line-height: 1;
}
.ath-sp-group[open] > summary::after{ content: "−"; }
.ath-sp-group-count:not(:empty){
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  margin-inline-start: auto;
  margin-inline-end: 6px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--ath-gold-deep);
  color: #fff;
  font-size: .74rem;
}
.ath-sp-items{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 7px;
  padding: 4px 12px 14px;
}
.ath-sp-item{
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 8px 11px;
  border: 1px solid var(--ath-line);
  border-radius: var(--ath-radius-sm);
  background: var(--ath-white);
  font-size: .89rem;
  cursor: pointer;
}
.ath-sp-item:has(input:checked){
  border-color: var(--ath-gold);
  background: var(--ath-cream);
  font-weight: 700;
}
.ath-sp-item input{ flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; accent-color: var(--ath-gold-deep); }

.ath-sp-empty{
  margin: 4px 0 12px;
  padding: 12px;
  border-radius: var(--ath-radius-sm);
  background: var(--ath-cream);
  color: var(--ath-ink-soft);
  font-size: .9rem;
}
.ath-sp-toggle{
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 1px dashed var(--ath-gold-soft);
  border-radius: var(--ath-radius-sm);
  background: transparent;
  color: var(--ath-gold-deep);
  font-weight: 700;
  cursor: pointer;
}
.ath-sp-toggle:hover{ background: var(--ath-cream); }

@media (max-width: 480px){
  .ath-sp-items{ grid-template-columns: 1fr; }
}

/* 6l. Empty states read as a next step, not a dead end. */
.empty-state,
.ath-empty-state{
  display: grid;
  place-items: center;
  gap: 12px;
  padding: clamp(28px, 6vw, 56px);
  text-align: center;
  border: 1px dashed var(--ath-gold-soft);
  border-radius: var(--ath-radius);
  background: var(--ath-cream);
}
.empty-state h2{ margin: 0; font-size: clamp(1.2rem, 3vw, 1.6rem); }
.empty-state p{ margin: 0; max-width: 46ch; color: var(--ath-ink-soft); }
.ath-empty-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}
.ath-empty-hint{
  margin: 6px 0 0 !important;
  max-width: 52ch;
  color: var(--ath-ink-soft) !important;
  font-size: .88rem;
}

/* ── 7. CART ENTRY POINTS — one predictable system ────────────
   Three separate rules used to fight over these controls: the side rail
   hid its own cart button, the presence of the rail in the DOM hid the
   mobile header cart, and the mobile language switch was hard-hidden.
   All three are removed at source in v17; this section defines the
   resulting behaviour explicitly so no browser default shows through. */

/* Desktop: the side rail carries Call, WhatsApp and Cart together. */
@media (min-width: 981px){
  .ath-contact-bar{
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    inset-inline-start: 16px;
    bottom: 18px;
    top: auto;
    width: auto;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--ath-line);
    box-shadow: var(--ath-shadow);
    backdrop-filter: blur(10px);
  }
  .ath-contact-bar .ath-cbar{
    position: relative;
    display: grid !important;
    place-items: center;
    width: 50px;
    height: 50px;
    min-height: 50px;
    border-radius: 50%;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .ath-contact-bar .ath-cbar b{
    position: absolute;
    inset-block-end: -3px;
    inset-inline-end: -3px;
    font-size: 0;
  }
  .ath-contact-bar .ath-cbar svg{ width: 23px; height: 23px; }
  .ath-cbar-call{ background: var(--ath-gold-deep); color: #fff; }
  .ath-cbar-wa{ background: var(--ath-green); color: #fff; }
  .ath-cbar-cart{
    display: grid !important;
    background: var(--ath-ink);
    color: #fff;
  }
  .ath-contact-bar .ath-cbar:hover{ transform: translateY(-2px); box-shadow: var(--ath-shadow); }
  /* The count rides the cart button as a badge, not as inline text. */
  .ath-cbar-cart [data-cart-count-output]{
    position: absolute;
    inset-block-start: -2px;
    inset-inline-end: -2px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--ath-danger);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
  }
}

/* Mobile: the bottom bar is the single floating system — the side rail
   would be a second one on top of it. The header keeps a cart icon so
   there is still a familiar affordance at the top of the page. */
@media (max-width: 980px){
  .ath-mobile-cart{
    display: grid !important;
    place-items: center;
    position: relative;
  }
  .pub-mobile-lang{ display: inline-flex !important; align-items: center; }
}

/* Deliberate states on every cart control, so the browser's own grey
   active/tap highlight never appears. */
.ath-header-cart,
.ath-mobile-cart,
.ath-cbar-cart,
.ath-bottom-nav a{
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.ath-header-cart:active,
.ath-mobile-cart:active,
.ath-cbar-cart:active{ transform: scale(.96); }
.ath-header-cart:focus-visible,
.ath-mobile-cart:focus-visible,
.ath-cbar-cart:focus-visible{
  outline: 3px solid var(--ath-gold) !important;
  outline-offset: 3px;
}
/* "is-active" only means the cart has items; keep it in the brand gold
   rather than letting a grey UA highlight read as a broken state. */
.ath-header-cart.is-active{
  background: linear-gradient(135deg, var(--ath-gold), var(--ath-gold-deep)) !important;
  border-color: var(--ath-gold-deep) !important;
  color: #fff !important;
  transform: none !important;
}
.ath-header-cart.is-active svg{ stroke: #fff; fill: none; }
.ath-header-cart svg{ stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ── 8. FOOTER — one component ────────────────────────────────
   v19 forces `color:#fff !important` on every element inside .pub-footer,
   while a later rule gave the newsletter block a white card background.
   The heading and copy were white-on-white and simply not there. The
   newsletter now belongs to the dark footer instead of fighting it. */
.pub-footer{
  background: var(--ath-ink) !important;
  color: #fff;
  padding-block: clamp(36px, 5vw, 64px) 0;
}
.ath-footer-clean-wrap{ display: grid; gap: clamp(28px, 4vw, 44px); }

/* Newsletter */
.ath-footer-newsletter{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(22px, 3vw, 34px) !important;
  border: 1px solid rgba(233,211,172,.28) !important;
  border-radius: var(--ath-radius) !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.ath-footer-newsletter .section-kicker{
  color: var(--ath-gold-soft) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.ath-footer-newsletter h3{
  margin: 8px 0 6px;
  color: #fff !important;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
}
.ath-footer-newsletter p{
  margin: 0;
  color: rgba(255,255,255,.72) !important;
  line-height: 1.8;
  font-size: .93rem;
}
.ath-footer-newsletter-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ath-footer-newsletter-form input{
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid rgba(233,211,172,.35);
  border-radius: var(--ath-radius-sm);
  background: rgba(255,255,255,.96);
  color: var(--ath-ink) !important;
  font-size: .95rem;
}
.ath-footer-newsletter-form input::placeholder{ color: #8a7a68; }
.ath-footer-newsletter-form button{
  grid-column: 1 / -1;
  min-height: 48px;
  border: 0;
  border-radius: var(--ath-radius-sm);
  background: linear-gradient(135deg, var(--ath-gold), var(--ath-gold-deep));
  color: #fff !important;
  font-weight: 700;
  cursor: pointer;
}

/* Brand + links + contact */
.ath-footer-main{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
  text-align: start;
}
.ath-footer-brand p{ color: rgba(255,255,255,.72) !important; line-height: 1.8; font-size: .92rem; }
.ath-footer-logo{ margin-bottom: 12px; }
.ath-footer-logo img{ background: rgba(255,255,255,.95); padding: 8px 12px; border-radius: 10px; }

.ath-footer-social{ display: flex; gap: 9px; margin-top: 14px; }
.ath-footer-social a{ width: 34px; height: 34px; display: grid; place-items: center; }
.ath-footer-social svg{ width: 34px; height: 34px; border-radius: 9px; }

.ath-footer-chips{ display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.ath-footer-chips a{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 13px;
  border: 1px solid rgba(233,211,172,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.9) !important;
  font-size: .84rem;
  text-decoration: none;
}
.ath-footer-chips a:hover{ border-color: var(--ath-gold); color: #fff !important; }

.ath-footer-contact-strip{ display: grid; gap: 9px; }
.ath-footer-contact-strip strong{ color: var(--ath-gold-soft) !important; font-size: .95rem; }
.ath-footer-contact-strip a{
  color: rgba(255,255,255,.88) !important;
  text-decoration: none;
  font-size: .92rem;
  word-break: break-word;
}
.ath-footer-contact-strip a:hover{ color: var(--ath-gold-soft) !important; }

.ath-footer-bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(233,211,172,.16);
  color: rgba(255,255,255,.6) !important;
  font-size: .84rem;
}
.ath-footer-bottom a{ color: var(--ath-gold-soft) !important; }

@media (max-width: 900px){
  .ath-footer-newsletter,
  .ath-footer-main{ grid-template-columns: 1fr; }
  .ath-footer-bottom{ justify-content: center; text-align: center; }
}
@media (max-width: 480px){
  .ath-footer-newsletter-form{ grid-template-columns: 1fr; }
}

/* 8a. The contact strip was picking up chip/button backgrounds from legacy
       rules, so the email and domain rendered as gold pills that broke
       mid-word. They are links, not buttons. */
.ath-footer-contact-strip{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.ath-footer-contact-strip a,
.ath-footer-email,
.ath-footer-domain,
.ath-phone-ltr{
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.88) !important;
  font-weight: 400 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: nowrap;
}
.ath-footer-email{ text-transform: none; }
.ath-footer-domain{ letter-spacing: .02em; font-size: .86rem; }
.ath-phone-ltr{ font-variant-numeric: tabular-nums; }
@media (max-width: 380px){
  .ath-footer-contact-strip a{ white-space: normal; }
}

/* 8b. The newsletter card was reserving height it did not need. */
.ath-footer-newsletter{ min-height: 0 !important; }
.ath-footer-newsletter-text{ margin: 0 !important; }

/* 8c. Social marks sized to the footer, not to the page. */
.ath-footer-social a{ width: 32px !important; height: 32px !important; }
.ath-footer-social svg{ width: 32px !important; height: 32px !important; border-radius: 8px; }

/* ── 9. MOTION TOKENS ─────────────────────────────────────────
   One set of durations and curves. Everything that moves reads from
   these, so timing stays coherent instead of every component guessing. */
:root{
  --ath-ease:      cubic-bezier(.22,.61,.36,1);
  --ath-ease-out:  cubic-bezier(.16,1,.3,1);
  --ath-t-fast:    160ms;
  --ath-t-base:    260ms;
  --ath-t-slow:    420ms;
}

/* Scroll reveal: opacity and transform only — never layout properties. */
html.ath-motion [data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--ath-t-slow) var(--ath-ease-out),
              transform var(--ath-t-slow) var(--ath-ease-out);
  will-change: opacity, transform;
}
html.ath-motion [data-reveal].is-revealed,
html.ath-motion [data-reveal].is-in{ opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce){
  html.ath-motion [data-reveal]{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── 10. CAROUSEL ─────────────────────────────────────────────
   Native scroll-snap carries the scrolling, so it is smooth on touch
   with no scroll handler in the way. JS only drives arrows and dots. */
.ath-carousel{ position: relative; }

.ath-carousel-track{
  display: grid !important;
  /* The element also carries .ath-home-design-grid, whose column template
     would otherwise wrap the cards into rows and leave nothing to scroll. */
  grid-template-columns: none !important;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--ath-carousel-gap, 18px)) / 3);
  gap: var(--ath-carousel-gap, 18px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding-block: 6px 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ath-carousel-track::-webkit-scrollbar{ display: none; }
.ath-carousel-track > *{ scroll-snap-align: start; min-width: 0; }
.ath-carousel-track:focus-visible{
  outline: 3px solid var(--ath-gold);
  outline-offset: 4px;
  border-radius: var(--ath-radius);
}

.ath-carousel-nav{
  position: absolute;
  /* Centred on the track, not on the whole carousel: the dots row sits
     below the track and would otherwise drag the arrows off centre. */
  inset-block: 0 var(--ath-carousel-dots-h, 60px);
  margin-block: auto;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ath-line);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: var(--ath-ink);
  box-shadow: var(--ath-shadow-sm);
  cursor: pointer;
  transition: transform var(--ath-t-fast) var(--ath-ease),
              opacity var(--ath-t-fast) var(--ath-ease),
              background-color var(--ath-t-fast) var(--ath-ease);
}
.ath-carousel-nav:hover{ background: var(--ath-cream); transform: scale(1.06); }
.ath-carousel-nav:disabled{ opacity: 0; pointer-events: none; }
.ath-carousel-prev{ inset-inline-start: -10px; }
.ath-carousel-next{ inset-inline-end: -10px; }
.ath-carousel-nav svg{ width: 18px; height: 18px; fill: currentColor; }
/* The arrows are a desktop affordance; touch users swipe. */
@media (max-width: 760px){ .ath-carousel-nav{ display: none; } }

.ath-carousel-dots{
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}
.ath-carousel-dot{
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ath-gold-soft);
  cursor: pointer;
  transition: width var(--ath-t-base) var(--ath-ease), background-color var(--ath-t-base) var(--ath-ease);
}
.ath-carousel-dot.is-active{ width: 22px; background: var(--ath-gold-deep); }
/* Dots are decorative here; the track itself is keyboard operable. */
.ath-carousel-dots{ min-height: 7px; }

@media (max-width: 1024px){
  .ath-carousel-track{ grid-auto-columns: calc((100% - var(--ath-carousel-gap, 18px)) / 2); }
}
@media (max-width: 560px){
  .ath-carousel-track{ grid-auto-columns: 78%; --ath-carousel-gap: 12px; }
}

/* ── 11. LUXURY DETAIL — drawn, not downloaded ────────────────
   The brief asked for crystal, spotlight and floral cues. These are CSS
   gradients and pseudo-elements so they cost no requests and no bytes,
   and they sit behind the photography rather than competing with it. */

/* Spotlight pool behind the hero, like a stage wash. */
.ath-home-hero{ position: relative; overflow: clip; }
.ath-home-hero::before{
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: 50%;
  width: min(900px, 90vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 40%,
              rgba(233,211,172,.42) 0%,
              rgba(233,211,172,.16) 38%,
              transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.ath-home-hero > *{ position: relative; z-index: 1; }

/* A fine gold hairline above dark sections — the "crystal edge" cue. */
.pub-footer{ position: relative; }
.pub-footer::before{
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ath-gold) 20%, var(--ath-gold-soft) 50%, var(--ath-gold) 80%, transparent);
  opacity: .55;
}

/* Photography carries the luxury: let the image breathe on hover and keep
   the frame still, so the grid never reflows. */
.ath-home-design-card,
.ath-design-album-card,
.ath-related-card{ overflow: hidden; }
.ath-home-design-card img,
.ath-design-album-card img,
.ath-related-card img{
  transition: transform var(--ath-t-slow) var(--ath-ease-out);
}
@media (hover: hover) and (pointer: fine){
  .ath-home-design-card:hover img,
  .ath-design-album-card:hover img,
  .ath-related-card:hover img{ transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce){
  .ath-home-design-card img,
  .ath-design-album-card img,
  .ath-related-card img{ transition: none; }
  .ath-home-design-card:hover img{ transform: none; }
}

/* Buttons: a short, purposeful press rather than a bouncy one. */
.btn{ transition: transform var(--ath-t-fast) var(--ath-ease),
                  box-shadow var(--ath-t-base) var(--ath-ease),
                  background-color var(--ath-t-base) var(--ath-ease),
                  color var(--ath-t-base) var(--ath-ease); }
.btn:active{ transform: translateY(1px); }

/* 11a. The three-step strip: keep the labels on one line at phone widths so
        the three cards stay the same height. */
@media (max-width: 560px){
  .ath-home-flow{ gap: 8px; }
  .ath-home-flow > a{ padding: 10px 6px; }
  .ath-home-flow > a strong{ font-size: .78rem; line-height: 1.25; text-wrap: balance; }
  .ath-home-flow > a > span{ width: 26px; height: 26px; font-size: .7rem; }
}

/* ── 12. CART DRAWER: THE OPEN STATE MUST WIN ─────────────────
   v17 carries `html[dir="rtl"] #ath-cart-drawer { transform:
   translate3d(-105%,0,0) !important }`. Its specificity (0,1,1,1) beats
   every open rule — `#ath-cart-drawer.is-open` is (0,1,1,0) and
   `.ath-cart-drawer.is-open` is (0,0,2,0) — so on an Arabic page the
   drawer stayed parked off-screen even while "open": the backdrop
   appeared and the page scroll locked, but no panel was visible and the
   close button sat outside the viewport. The page simply froze.

   Fixing it needs specificity, not source order, so the open state is
   restated at (0,1,2,1) for both directions. Do not lower these
   selectors; they exist to out-rank the rule above. */
html[dir="rtl"] #ath-cart-drawer.is-open,
html[dir="ltr"] #ath-cart-drawer.is-open,
html[dir="rtl"] #ath-cart-drawer[aria-hidden="false"],
html[dir="ltr"] #ath-cart-drawer[aria-hidden="false"]{
  transform: translate3d(0, 0, 0) !important;
  visibility: visible !important;
}
html[dir="rtl"] .ath-cart-drawer.is-open,
html[dir="ltr"] .ath-cart-drawer.is-open{
  transform: translate3d(0, 0, 0) !important;
  visibility: visible !important;
}

/* The backdrop must never outlive the panel: if it is left interactive
   while the drawer is closed it swallows every tap on the page. */
.ath-cart-backdrop:not(.is-open){ pointer-events: none !important; visibility: hidden !important; }

/* 12a. Side-rail cart badge: present when there is something to show,
        out of the way when the cart is empty. */
.ath-cbar-cart.is-empty [data-cart-count-output]{ display: none !important; }
.ath-cbar-cart.is-active [data-cart-count-output]{ display: grid !important; }

/* ── 13. CART PAGE ROW — editable without fighting for space ──
   The row was a 92px image column beside everything else, which left the
   quantity / guests / note fields about 178px wide and the photo too small
   to judge. On phones the photo now leads at full width and the controls
   get the whole row. */
.ath-cart-row{ padding: 14px !important; }
.ath-cart-thumb img,
.ath-cart-thumb-empty{
  width: 100%;
  border-radius: var(--ath-radius-sm);
  background: var(--ath-cream);
}

.ath-cart-inline-edit label{ min-width: 0; }
.ath-cart-inline-edit input{ width: 100%; min-height: 46px; }

@media (max-width: 760px){
  .ath-cart-page .ath-cart-row,
  .ath-cart-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* v17 fixes the wrapper at 150px, so widening only the image did nothing. */
  .ath-cart-thumb{
    grid-row: 1;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }
  .ath-cart-thumb img{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  .ath-cart-inline-edit{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* Note spans the full width; the update button is a clear full-width action. */
  .ath-cart-inline-edit label:nth-of-type(3),
  .ath-cart-inline-edit .btn,
  .ath-cart-inline-edit button{ grid-column: 1 / -1 !important; }
  .ath-cart-remove,
  .ath-cart-row form:last-of-type button{ width: 100%; }
}

/* The photo is the thing being bought — let it be opened full size. */
.ath-cart-thumb{ position: relative; }
.ath-cart-thumb [data-zoom],
.ath-cart-thumb a{ display: block; }
.ath-zoomable{ cursor: zoom-in; }
.ath-zoom-hint{
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: 8px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(42,28,18,.62);
  color: #fff;
  font-size: .9rem;
  pointer-events: none;
}

/* Lightbox for any zoomable image. */
.ath-lightbox{
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(24,17,12,.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ath-t-base) var(--ath-ease), visibility 0s linear var(--ath-t-base);
}
.ath-lightbox.is-open{ opacity: 1; visibility: visible; transition-delay: 0s; }
.ath-lightbox img{
  max-width: min(1100px, 96vw);
  max-height: 88vh;
  width: auto; height: auto;
  border-radius: var(--ath-radius);
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
}
.ath-lightbox-close{
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--ath-ink);
  font-size: 1.5rem;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce){
  .ath-lightbox{ transition: none; }
}

/* ── 14. CHOICE SET — one framed tile per option ──────────────
   Quick options were rendered as bare inline controls, so a customer could
   not tell what was selectable or what was already chosen. Each option is
   now its own card with a visible selected state. Reusable anywhere a
   short either/or question appears. */
.ath-choice-set{
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}
.ath-choice-set > legend{
  padding: 0;
  margin-bottom: 10px;
  color: var(--ath-ink);
  font-weight: 700;
  font-size: .95rem;
}
.ath-choice-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.ath-choice{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--ath-line);
  border-radius: var(--ath-radius-sm);
  background: var(--ath-white);
  color: var(--ath-ink);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--ath-t-fast) var(--ath-ease),
              background-color var(--ath-t-fast) var(--ath-ease),
              box-shadow var(--ath-t-fast) var(--ath-ease);
}
.ath-choice input{
  flex: 0 0 auto;
  width: 18px; height: 18px;
  min-height: 0;
  accent-color: var(--ath-gold-deep);
}
.ath-choice:hover{ border-color: var(--ath-gold-soft); background: var(--ath-cream); }
.ath-choice:has(input:checked){
  border-color: var(--ath-gold);
  background: var(--ath-cream);
  box-shadow: 0 0 0 1px var(--ath-gold) inset;
  font-weight: 700;
}
.ath-choice:has(input:focus-visible){ outline: 3px solid var(--ath-gold); outline-offset: 2px; }

/* ── 15. FEEDBACK FORM ────────────────────────────────────── */
.ath-feedback-section{
  padding-block: clamp(40px, 6vw, 76px);
  background: var(--ath-cream);
  border-block: 1px solid var(--ath-line);
}
.ath-feedback-card{
  max-width: 860px;
  margin-inline: auto;
  padding: clamp(20px, 4vw, 38px);
  border: 1px solid var(--ath-line);
  border-radius: var(--ath-radius);
  background: var(--ath-white);
  box-shadow: var(--ath-shadow-sm);
}
.ath-feedback-card .ath-section-head{ text-align: center; margin-bottom: 22px; }
.ath-feedback-card .ath-section-head h2::after{ margin-inline: auto; }

.ath-feedback-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ath-field{ display: grid; gap: 6px; min-width: 0; }
.ath-field > span{ font-weight: 700; font-size: .9rem; color: var(--ath-ink); }
.ath-field input,
.ath-field textarea{
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid var(--ath-line);
  border-radius: var(--ath-radius-sm);
  background: var(--ath-white);
  color: var(--ath-ink);
}
.ath-field textarea{ min-height: 110px; resize: vertical; }
.ath-field input:focus,
.ath-field textarea:focus{ border-color: var(--ath-gold); outline: none; box-shadow: 0 0 0 3px rgba(185,143,62,.18); }
.ath-field-wide{ grid-column: 1 / -1; }

.ath-feedback-hint{ margin: 12px 0 16px; color: var(--ath-ink-soft); font-size: .88rem; }
.ath-feedback-form > .btn{ width: 100%; }

.ath-feedback-note{
  margin-bottom: 16px;
  padding: 13px 16px;
  border-radius: var(--ath-radius-sm);
  font-weight: 500;
}
.ath-feedback-note.is-success{ background: #e8f5ee; border: 1px solid var(--ath-success); color: #0a5c36; }
.ath-feedback-note.is-error{ background: #fdecec; border: 1px solid var(--ath-danger); color: #8a2323; }

@media (max-width: 620px){
  .ath-feedback-grid{ grid-template-columns: 1fr; }
}

/* ══ 16. REFINEMENT PASS ═══════════════════════════════════════
   The pieces were right but the page did not feel composed: spacing came
   from a dozen different scales, every surface used the same flat card,
   and hover states moved more than they should. This pass gives the site
   one spacing rhythm, one elevation ladder, and restrained motion.
   Displacement stays under 2px so it reads as feedback, not movement. */

:root{
  /* One spacing scale. Sections and cards read from it instead of each
     inventing a clamp. */
  --ath-s-1: 6px;
  --ath-s-2: 10px;
  --ath-s-3: 16px;
  --ath-s-4: 24px;
  --ath-s-5: 36px;
  --ath-s-6: clamp(44px, 6vw, 84px);   /* section rhythm */

  /* Elevation ladder — three steps, not fifteen ad-hoc shadows. */
  --ath-e-1: 0 1px 2px rgba(51,34,18,.05);
  --ath-e-2: 0 8px 24px rgba(51,34,18,.07);
  --ath-e-3: 0 22px 56px rgba(51,34,18,.11);
}

/* Section rhythm: one value, so the page breathes evenly instead of
   jumping between 42px and 78px gaps. */
main > section{ padding-block: var(--ath-s-6); }
main > section + section{ padding-block-start: var(--ath-s-6); }

/* Headings sit closer to the copy they own. */
.ath-section-head{ margin-bottom: var(--ath-s-4); }
.ath-section-head h1,
.ath-section-head h2{ margin-block: var(--ath-s-1) var(--ath-s-2); }
.ath-section-head p{ margin: 0; max-width: 62ch; }

/* One surface treatment. Depth comes from the ladder, never from a border
   plus a shadow plus a gradient all at once. */
.ath-home-design-card,
.ath-design-album-card,
.ath-related-card,
.ath-service-card,
.ath-smart-service-card,
.ath-faq-item,
.ath-sp-group,
.ath-feedback-card{
  box-shadow: var(--ath-e-1) !important;
  border-color: var(--ath-line) !important;
}
@media (hover: hover) and (pointer: fine){
  .ath-home-design-card:hover,
  .ath-design-album-card:hover,
  .ath-related-card:hover,
  .ath-service-card:hover,
  .ath-smart-service-card:hover{
    box-shadow: var(--ath-e-2) !important;
    transform: translateY(-2px);          /* feedback, not motion */
  }
}

/* Glass, used sparingly and only where something sits over content. */
.pub-header{
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(234,220,198,.9);
  box-shadow: none;
}
.pub-header.ath-is-scrolled{
  background: rgba(255,255,255,.95) !important;
  box-shadow: var(--ath-e-2);
}

/* A quieter hairline instead of a heavy rule under headings. */
.ath-section-head > h2::after,
.ath-home-final-cta h2::after,
.ath-home-company-strip h2::after{
  width: 56px;
  height: 1px;
  margin-block-start: var(--ath-s-3);
  background: linear-gradient(90deg, var(--ath-gold), rgba(185,143,62,0));
}

/* Buttons: same height everywhere, weight carried by colour not by size. */
.btn{ min-height: 48px; padding-inline: var(--ath-s-4); border-radius: 999px !important; font-weight: 700; }
.btn-lg{ min-height: 54px; padding-inline: var(--ath-s-5); }
.btn-primary{ box-shadow: 0 6px 18px rgba(122,83,18,.18); }
.btn-primary:hover{ box-shadow: 0 10px 26px rgba(122,83,18,.26); transform: translateY(-1px); }
.btn-outline:hover{ transform: translateY(-1px); }

/* Kickers read as eyebrow text, not as another badge. */
.section-kicker{
  display: inline-block;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: none;
}

/* Images settle in rather than popping. */
img{ background-color: var(--ath-cream); }
.ath-home-design-card img,
.ath-design-album-card img{ border-radius: 0; }

/* Focus is visible and on-brand everywhere, once. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--ath-gold-deep) !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce){
  .ath-home-design-card:hover,
  .ath-design-album-card:hover,
  .ath-related-card:hover,
  .btn-primary:hover,
  .btn-outline:hover{ transform: none !important; }
}

/* 15a. Subscription result, shown at the form rather than only at the top of
        the page — the person is standing in the footer when they submit. */
.ath-newsletter-result{
  margin-bottom: 12px;
  padding: 12px 15px;
  border-radius: var(--ath-radius-sm);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.7;
}
.ath-newsletter-result.is-success{ background: rgba(8,121,68,.16); border: 1px solid var(--ath-success); color: #d7f5e6; }
.ath-newsletter-result.is-info{ background: rgba(255,255,255,.08); border: 1px solid var(--ath-gold-soft); color: #f6e9cf; }
.alert-info{ background: var(--ath-cream); border: 1px solid var(--ath-gold-soft); color: var(--ath-ink); padding: 12px 16px; border-radius: var(--ath-radius-sm); }

/* ── 17. HOME: ONE RHYTHM ─────────────────────────────────────
   The homepage used to run three "pick a service" sections back to
   back — a season block with no styling at all (964px of stacked
   links), a glass intro, and a chips block trailed by a <select>
   listing the very same services. They are now one section. What is
   left here is the rhythm: every home section breathes the same
   amount, and on a phone the hero's call to action sits above the
   fold instead of below it. */

.ath-home-services{
  padding: clamp(38px, 6vw, 68px) 0;
  background: linear-gradient(180deg, var(--ath-white), var(--ath-cream));
}
.ath-home-services .ath-section-head{ margin-bottom: 20px; }

/* The "all services" chip closes the row rather than sitting under it
   as yet another line of page. */
.ath-home-service-chips .ath-chip-all{
  background: var(--ath-gold-deep);
  border-color: var(--ath-gold-deep);
  color: var(--ath-white);
  font-weight: 800;
}
.ath-home-service-chips .ath-chip-all:hover{
  background: var(--ath-ink);
  border-color: var(--ath-ink);
  color: var(--ath-white);
}

/* Occasions are a secondary lane: real internal links, but quieter than
   the service chips above them so the eye still has one clear path. */
.ath-home-occasions{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.ath-home-occasions a{
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--ath-line);
  border-radius: 999px;
  background: var(--ath-white);
  color: var(--ath-ink-soft);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.ath-home-occasions a:hover,
.ath-home-occasions a:focus-visible{
  color: var(--ath-gold-deep);
  border-color: var(--ath-gold);
  background: var(--ath-ivory);
}

/* ── 17b. Mobile: one vertical rhythm, and a hero that fits ──── */
@media (max-width: 760px){
  /* Every home section gets the same breathing room. Before this they
     ranged from 22px to 72px and the page read as unrelated slabs. */
  .ath-home-services,
  .ath-home-design-gallery,
  .ath-home-faq,
  .ath-home-final-cta{
    padding-block: 34px !important;
  }

  .ath-section-head{ margin-bottom: 16px; }
  .ath-section-head p{ margin-bottom: 0; }

  /* Hero: the headline, one call to action and the first image should
     land inside the first screen. It was 940px on a 844px phone, so the
     primary button opened below the fold on every visit. */
  .ath-home-hero{ padding: 18px 0 22px !important; }
  .ath-home-hero-copy h1{
    font-size: clamp(1.5rem, 7vw, 1.95rem);
    line-height: 1.3;
    margin-bottom: 8px;
  }
  .ath-home-hero-subtitle-v1066{
    font-size: .95rem;
    line-height: 1.6;
    margin-bottom: 14px;
  }
  .ath-home-hero-actions{ gap: 10px; margin-bottom: 12px; }
  .ath-home-trust{
    gap: 6px 14px;
    font-size: .78rem;
    margin-top: 10px;
  }

  .ath-home-occasions{ gap: 7px; }
  .ath-home-occasions a{
    min-height: 44px;
    padding: 10px 14px;
    font-size: .86rem;
  }

  /* The gallery CTA pair stacked into two full-width buttons plus their
     margins; side by side they cost one row instead of two. */
  .ath-home-gallery-more,
  .ath-final-cta-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .ath-home-gallery-more > .btn,
  .ath-final-cta-actions > .btn{ flex: 1 1 46%; }

  .ath-faq-list{ margin-top: 4px; }
  .ath-faq-more{ margin-top: 14px; font-size: .9rem; }
}

/* ── 17c. Small phones: stop the one-per-row collapse ──────────
   A rule at max-width:390px dropped the service chips to a single
   column. Seven chips then stood 390px tall — taller than the entire
   section head above them — on exactly the width an iPhone reports.
   These are short pills; two fit comfortably. */
@media (max-width: 760px){
  .ath-home-service-chips{
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .ath-home-service-chips a{
    flex: 0 1 auto;
    min-height: 42px !important;
    padding: 8px 14px;
    font-size: .88rem;
    white-space: nowrap;
  }

  /* Two calls to action on one row: the hero fits a phone screen only
     if its buttons stop taking a full line each. */
  .ath-home-hero-actions{
    display: flex;
    flex-wrap: wrap;
  }
  .ath-home-hero-actions > .btn{ flex: 1 1 46%; min-width: 0; }

  .ath-home-hero-grid{ gap: 16px !important; }
  .ath-home-hero-media{ margin-top: 0 !important; }

  .ath-section-head .section-kicker{ margin-bottom: 6px; }
  .ath-section-head h2{ margin-bottom: 8px; }
  .ath-home-services .ath-section-head{ margin-bottom: 14px; }
  .ath-home-service-chips{ margin-top: 14px !important; }
  .ath-home-occasions{ margin-top: 14px; }
}

@media (max-width: 390px){
  /* Overrides the legacy single-column rule at its own breakpoint. */
  .ath-home-service-chips{ grid-template-columns: none !important; }
}

/* ── 17d. Hero on a phone: one screen ─────────────────────────
   The hero action row was a grid, so the two buttons stacked and the
   trust marks stacked under them — 201px of a 844px screen spent
   before the first photograph. Side by side they cost 86px. */
@media (max-width: 760px){
  .ath-home-hero-actions{
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  .ath-home-hero-actions > .btn{
    flex: 1 1 46%;
    min-width: 0;
    margin: 0 !important;
  }

  .ath-home-trust{
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px 12px !important;
    margin-top: 8px !important;
  }
  .ath-home-trust > span{
    flex: 0 1 auto;
    white-space: nowrap;
    font-size: .76rem;
  }

  .ath-home-hero .section-kicker{ margin-bottom: 6px !important; }
  .ath-home-hero-subtitle-v1066{ margin-bottom: 14px !important; }

  /* A square hero on a portrait phone pushes everything below it off
     screen. Landscape shows the same design and returns 80px. */
  .ath-home-hero-media{ aspect-ratio: 4 / 3 !important; }
}

/* ── 18. SERVICES CATALOGUE AS FOLDING PANELS ─────────────────
   The category cover styling below used to live in a @push('styles')
   block inside services.blade.php. The layout renders @stack('head')
   and @stack('scripts') but never 'styles', so none of it ever
   reached a browser. It lives here now, where it works. */

.ath-category-cover-link{
  display: block;
  margin: 14px 0 20px;
  overflow: hidden;
  border-radius: var(--ath-radius);
  border: 1px solid rgba(185,137,59,.28);
  background: var(--ath-cream);
  box-shadow: var(--ath-shadow);
}
.ath-category-cover-image{
  display: block;
  width: 100%;
  height: clamp(200px, 30vw, 380px);
  object-fit: cover;
  transition: transform .35s ease;
}
.ath-category-cover-link:hover .ath-category-cover-image{ transform: scale(1.015); }

/* The panels themselves. */
details.ath-public-category-section{
  border: 1px solid var(--ath-line);
  border-radius: var(--ath-radius);
  background: var(--ath-white);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
details.ath-public-category-section[open]{
  border-color: var(--ath-gold-soft);
  box-shadow: var(--ath-shadow-sm);
}

summary.ath-public-category-head{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  min-height: 60px;
  background: linear-gradient(180deg, var(--ath-white), var(--ath-ivory));
}
summary.ath-public-category-head::-webkit-details-marker{ display: none; }
summary.ath-public-category-head::marker{ content: ''; }
summary.ath-public-category-head:hover{ background: var(--ath-cream); }
summary.ath-public-category-head > div{ flex: 1 1 auto; min-width: 0; }
summary.ath-public-category-head h2{
  margin: 2px 0 0;
  font-size: clamp(1.02rem, 3.4vw, 1.22rem);
  line-height: 1.35;
}
summary.ath-public-category-head .section-kicker{
  font-size: .72rem;
  letter-spacing: .12em;
}
.ath-category-count{
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ath-ink-soft);
  white-space: nowrap;
}

/* A chevron that turns, so the panel says which way it is going. */
.ath-category-chevron{
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--ath-line);
  background: var(--ath-white);
  transition: transform .25s ease, background .2s ease, border-color .2s ease;
}
.ath-category-chevron::before{
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ath-gold-deep);
  border-bottom: 2px solid var(--ath-gold-deep);
  transform: rotate(45deg) translate(-1px, -1px);
}
details[open] > summary .ath-category-chevron{
  transform: rotate(180deg);
  background: var(--ath-gold-deep);
  border-color: var(--ath-gold-deep);
}
details[open] > summary .ath-category-chevron::before{
  border-right-color: var(--ath-white);
  border-bottom-color: var(--ath-white);
}

details.ath-public-category-section > *:not(summary){
  padding-inline: 18px;
}
details.ath-public-category-section > .ath-service-grid{ padding-bottom: 18px; }

/* The category nav is the page's table of contents; keep it in reach. */
.ath-public-category-nav{
  position: sticky;
  top: 64px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 0;
  margin-bottom: 14px;
  background: linear-gradient(180deg, var(--ath-ivory) 70%, transparent);
}

@media (max-width: 760px){
  .ath-public-category-nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-inline: 2px;
  }
  .ath-public-category-nav a{ flex: 0 0 auto; scroll-snap-align: start; }

  summary.ath-public-category-head{ padding: 14px 14px; }
  details.ath-public-category-section > *:not(summary){ padding-inline: 14px; }
  .ath-category-cover-image{ height: 180px; }
  .ath-category-cover-link{ margin: 10px 0 14px; border-radius: 14px; }

  /* Service cards two-up: one per row turned a catalogue into a corridor. */
  .ath-service-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* ── 19. GALLERY DENSITY + REACHABLE TAP TARGETS ──────────────
   Twenty-seven albums in a single column made /gallery 12,666px on a
   phone. Two-up shows the same albums in half the scrolling, and an
   album cover reads perfectly well at 180px wide. */
@media (max-width: 760px){
  .ath-album-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .ath-album-grid > *{ min-width: 0; }

  .ath-gallery-hero{ padding-block: 20px !important; }

  /* Page heroes: an h1 that stood 243px tall pushed the page's actual
     content off the first screen on every landing page. */
  .ath-page-hero{ padding-block: 20px 16px !important; }
  .ath-page-hero h1{
    font-size: clamp(1.42rem, 6.4vw, 1.9rem) !important;
    line-height: 1.32;
    margin-bottom: 8px;
  }
  .ath-page-hero p{ font-size: .93rem; line-height: 1.6; }
}

/* ── 19b. Tap targets ─────────────────────────────────────────
   These were 25px and 12px tall on a phone: real links that a thumb
   cannot reliably hit. The WCAG floor is 44px, and it costs nothing
   here because the padding sits inside space the layout already had. */
@media (pointer: coarse), (max-width: 900px){
  .ath-footer-email,
  .ath-footer-domain,
  .ath-phone-ltr,
  .ath-breadcrumbs__link,
  .pub-mobile-lang,
  .ath-public-footer a{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 10px;
  }
  .pub-mobile-lang{
    min-width: 44px;
    justify-content: center;
  }
  .ath-breadcrumbs__link{ padding-inline: 2px; }

  /* Footer links sat on one line each; with a 44px box they need to wrap
     as a list rather than collide. */
  .ath-public-footer a{ padding-inline: 0; }
}

/* ── 19c. Tap targets, second pass ────────────────────────────
   The footer rules lost to more specific selectors in v17
   (.ath-footer-contact .ath-footer-email beats .ath-footer-email).
   Matched at the same depth they are declared at. */
@media (pointer: coarse), (max-width: 900px){
  .ath-footer-main .ath-footer-contact a,
  .ath-footer-main .ath-footer-contact .ath-footer-email,
  .ath-footer-main .ath-footer-contact .ath-footer-domain,
  .ath-footer-main .ath-footer-contact .ath-phone-ltr,
  .ath-public-footer .ath-footer-bottom a,
  .ath-emirates-grid > a{
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
    padding-block: 10px !important;
  }

  /* Emirate links were inline at 17px tall and butted against each other;
     as chips they are both reachable and readable as a set. */
  .ath-emirates-grid{
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .ath-emirates-grid > a{
    padding-inline: 13px !important;
    border: 1px solid var(--ath-line);
    border-radius: 999px;
    background: var(--ath-white);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
  }

  /* A FAQ row you open with your thumb needs a thumb-sized row. */
  .ath-faq-item > summary,
  details > summary{
    min-height: 46px;
    display: flex;
    align-items: center;
  }
}

/* ── 20. FOOTER ON A PHONE ────────────────────────────────────
   1,665px — two full screens of footer under every page. Twelve link
   chips stacked one per row, a newsletter block with desktop spacing,
   and a three-line bottom bar. Same content, arranged for the width
   it is actually being read at. */
@media (max-width: 760px){
  .ath-public-footer .container{ padding-block: 22px 14px; }

  .ath-footer-newsletter{
    padding: 16px 14px !important;
    gap: 12px !important;
  }
  .ath-footer-newsletter-text h2,
  .ath-footer-newsletter-text h3{
    font-size: 1.08rem;
    line-height: 1.35;
    margin-bottom: 6px;
  }
  .ath-footer-newsletter-text p{ font-size: .88rem; line-height: 1.55; margin: 0; }
  .ath-footer-newsletter-form{ gap: 8px !important; }

  .ath-footer-main{ gap: 18px !important; }

  /* Twelve chips two-up: half the rows, same 44px targets. */
  .ath-footer-chips{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 10px !important;
  }
  .ath-footer-chips > a{
    justify-content: flex-start;
    padding-block: 9px !important;
    min-height: 42px;
    font-size: .86rem;
  }

  .ath-footer-brand{ gap: 8px !important; }
  .ath-footer-brand p{ font-size: .86rem; line-height: 1.6; margin: 0; }

  .ath-footer-contact{ gap: 0 !important; }

  .ath-footer-bottom{
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 12px;
    padding-top: 12px !important;
    font-size: .78rem;
    text-align: center;
  }
  .ath-footer-bottom > *{ margin: 0 !important; }
}

/* ── 20b. The last two small targets ──────────────────────────
   A 12px-tall credit link and a 16px inline "contact us" — both real
   links a thumb cannot land on. */
@media (pointer: coarse), (max-width: 900px){
  .ath-footer-bottom a,
  .ath-faq-more a,
  .ath-text-link{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 8px;
  }
}

/* ── 20c. The actual footer bug ───────────────────────────────
   .ath-footer-main and the newsletter kept a fixed 250px / 228px grid
   column from the desktop layout. On a 390px phone every footer block
   was crammed into 250px with 140px of the screen left empty beside it
   — which is why the footer read as a jumble however its links were
   spaced. The column should simply be the width available. */
@media (max-width: 760px){
  .ath-public-footer .ath-footer-main,
  .ath-public-footer .ath-footer-newsletter,
  .ath-public-footer .ath-footer-newsletter-text,
  .ath-public-footer .ath-footer-newsletter-form,
  .ath-public-footer .ath-footer-brand,
  .ath-public-footer .ath-footer-contact{
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ath-public-footer .ath-footer-chips{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* The subscribe field and its button deserve the full width too. */
  .ath-public-footer .ath-footer-newsletter-form input[type="email"],
  .ath-public-footer .ath-footer-newsletter-form .btn,
  .ath-public-footer .ath-footer-newsletter-form button{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── 20d. Nested padding was eating 40% of the screen ─────────
   footer 366 → wrap 330 → main 282 → chips 234, on a 390px phone.
   Four nested levels each added 16px of inline padding AND a
   max-width: calc(100% - 16px). The footer was not "messy" — it was
   being rendered into 234px of a 390px screen. Padding belongs on the
   outer wrapper only. */
@media (max-width: 760px){
  footer.pub-footer{ padding-inline: 14px !important; }

  footer.pub-footer .ath-footer-clean-wrap,
  footer.pub-footer .ath-footer-main,
  footer.pub-footer .ath-footer-chips,
  footer.pub-footer .ath-footer-brand,
  footer.pub-footer .ath-footer-contact,
  footer.pub-footer .ath-footer-bottom{
    padding-inline: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }

  /* The newsletter is a card, so it keeps its own inner padding —
     just not the inherited stack of it. */
  footer.pub-footer .ath-footer-newsletter{
    max-width: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 14px !important;
  }
  footer.pub-footer .ath-footer-newsletter-text,
  footer.pub-footer .ath-footer-newsletter-form{
    padding-inline: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  footer.pub-footer .ath-footer-main,
  footer.pub-footer .ath-footer-newsletter,
  footer.pub-footer .ath-footer-brand,
  footer.pub-footer .ath-footer-contact{
    grid-template-columns: minmax(0, 1fr) !important;
  }
  footer.pub-footer .ath-footer-chips{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── 21. STOP THE PADDING FROM COMPOUNDING ────────────────────
   The quote form — the page that produces the bookings — was laid out
   in 306px of a 390px phone. The contact form got 278px. Nothing was
   wrong with either form: a section margin (9px), a container margin
   (10px), a container padding (16px) and a card padding (20px) stack
   up on each side before any content is drawn. On a phone the whole
   budget for that is about 14px, once. */
@media (max-width: 760px){
  .container,
  .container-sm,
  .container-lg{
    margin-inline: 0 !important;
    padding-inline: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cards keep their own inset — they are a visual frame — but at a
     phone-appropriate size, and without inheriting the container's. */
  .ath-quote-shell,
  .ath-feedback-card,
  .ath-contact-hero-frame,
  .ath-about-hero-frame,
  .ath-premium-cta-frame,
  .ath-location-trust__card,
  .ath-gallery-shell,
  .ath-image-detail-shell{
    padding-inline: 14px !important;
    margin-inline: 0 !important;
    max-width: 100% !important;
  }

  /* A card sitting directly inside a container does not need both. */
  .container > .ath-quote-shell,
  .container > .ath-feedback-card,
  .container-sm > .ath-quote-shell{
    margin-inline: -2px !important;
  }

  /* Sections carried their own inline margin on top of everything else. */
  main > section,
  .ath-section,
  .ath-feedback-section{
    margin-inline: 0 !important;
  }
}

/* ── 22. VERTICAL RHYTHM ON A PHONE ───────────────────────────
   .ath-section carried 48px of padding top and bottom plus a 12px
   margin — 120px of empty band between every two blocks, tuned for a
   1440px screen and never revisited for a 390px one. */
@media (max-width: 760px){
  .ath-section,
  .ath-page-hero,
  main > section{
    padding-block: 26px !important;
    margin-block: 0 !important;
  }
  .ath-page-hero,
  .ath-page-hero-compact{ padding-block: 18px 14px !important; }

  /* The breadcrumb strip was a section in its own right. */
  main > .container:has(> .ath-breadcrumbs),
  .ath-breadcrumbs{ padding-block: 2px !important; }

  /* A category headline set at 31px turned each folded panel into
     three lines of chrome. It is a row label, not a page title. */
  summary.ath-public-category-head h2,
  details.ath-public-category-section > summary h2{
    font-size: 1.08rem !important;
    line-height: 1.32 !important;
    margin: 2px 0 0 !important;
  }
  summary.ath-public-category-head{
    padding: 12px 14px !important;
    min-height: 56px;
    gap: 10px;
  }
  summary.ath-public-category-head > div{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  summary.ath-public-category-head .section-kicker{
    font-size: .68rem !important;
    line-height: 1.2;
    margin: 0 !important;
  }
  /* The gold rule under the heading belongs to a page title, not a row. */
  summary.ath-public-category-head h2::after{ display: none !important; }

  .ath-services-toolbar{ padding: 12px 14px !important; gap: 10px !important; }
  .ath-services-catalog-hero-actions{ gap: 8px !important; }
}

/* ── 22b. Page hero actions share a row ───────────────────────
   Two full-width stacked buttons cost 120px on every landing page.
   Side by side they cost 52px and read as a pair of choices. */
@media (max-width: 760px){
  .ath-services-catalog-hero-actions,
  .ath-page-hero-actions,
  .ath-contact-hero-actions,
  .ath-about-hero-actions{
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .ath-services-catalog-hero-actions > .btn,
  .ath-page-hero-actions > .btn,
  .ath-contact-hero-actions > .btn,
  .ath-about-hero-actions > .btn{
    flex: 1 1 46%;
    min-width: 0;
    margin: 0 !important;
  }
}

/* ── 23. SERVICE CARD AT PHONE WIDTH ──────────────────────────
   Two-up halves the scrolling, but a 165px card cannot carry a
   paragraph, two full-width buttons and a floating photo badge — the
   buttons ran outside the card border and the description wrapped one
   word per line. At this width the card's job is: what it is, how many
   designs, and one way in. */
@media (max-width: 760px){
  .ath-service-card{
    padding: 10px !important;
    overflow: hidden;
  }
  .ath-service-card *{ min-width: 0; max-width: 100%; }

  /* The description reads fine on the service page it links to. */
  .ath-service-card .ath-service-card-desc,
  .ath-service-card > p,
  .ath-service-card .ath-service-price{
    display: none !important;
  }

  .ath-service-card h3,
  .ath-service-card .ath-service-card-title{
    font-size: .92rem !important;
    line-height: 1.35 !important;
    margin: 8px 0 4px !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* One way in. "Service details" is the same destination one tap later. */
  .ath-service-card .btn + .btn,
  .ath-service-card .ath-service-card-actions .btn:not(:first-child){
    display: none !important;
  }
  .ath-service-card .btn{
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 8px !important;
    font-size: .84rem !important;
    white-space: normal;
    line-height: 1.25;
  }

  /* The photo count badge was absolutely positioned over the button. */
  .ath-service-card .ath-service-photos-badge,
  .ath-service-card [class*="photos"]{
    position: static !important;
    display: inline-flex;
    margin: 6px 0 0 !important;
    font-size: .72rem !important;
    padding: 4px 9px !important;
    transform: none !important;
  }

  .ath-service-card img{
    width: 100% !important;
    height: 110px !important;
    object-fit: cover;
  }

  /* Category header: kicker, title, count on one clean line each. */
  summary.ath-public-category-head{
    display: grid !important;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "kicker count chevron" "title count chevron";
    align-items: center;
    row-gap: 0;
  }
  summary.ath-public-category-head > div{
    grid-area: 1 / 1 / 3 / 2;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  summary.ath-public-category-head .ath-category-count{ grid-area: count; }
  summary.ath-public-category-head .ath-category-chevron{ grid-area: chevron; }
}

/* ── 23b. Service card, with the real class names ─────────────
   The previous pass guessed at selectors that do not exist in this
   partial. These are the ones it actually renders. */
@media (max-width: 760px){
  /* The 125-character blurb wrapped one word per line in a 145px column.
     It reads properly on the service page this card links to. */
  .ath-smart-service-copy > p,
  .ath-smart-service-custom-note{ display: none !important; }

  .ath-smart-service-heading{
    display: block !important;
    margin-bottom: 6px;
  }
  .ath-smart-service-heading h3{
    font-size: .92rem !important;
    line-height: 1.35 !important;
    margin: 0 0 3px !important;
  }
  .ath-smart-service-heading h3 a{ overflow-wrap: anywhere; }
  .ath-service-price{
    font-size: .76rem !important;
    font-weight: 700;
    color: var(--ath-ink-soft) !important;
  }

  /* Two count pills side by side; the second was landing on the button. */
  .ath-smart-service-meta{
    display: flex !important;
    flex-wrap: wrap;
    gap: 5px !important;
    position: static !important;
    margin: 0 0 8px !important;
  }
  .ath-smart-service-meta > span{
    position: static !important;
    transform: none !important;
    inset: auto !important;
    font-size: .7rem !important;
    padding: 3px 8px !important;
    white-space: nowrap;
  }

  /* One way in per card. "Service details" is the same place, one tap on. */
  .ath-smart-service-actions{
    display: block !important;
    margin: 0 !important;
  }
  .ath-smart-service-actions .btn{
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 8px !important;
    font-size: .82rem !important;
    white-space: normal;
    line-height: 1.25;
    margin: 0 !important;
  }
  .ath-smart-service-actions .btn.btn-outline{ display: none !important; }

  .ath-smart-service-media img{ height: 108px !important; object-fit: cover; }
  .ath-smart-service-badge{
    font-size: .68rem !important;
    padding: 3px 8px !important;
  }
  .ath-smart-service-copy{ padding: 9px !important; }
}

/* ── 23c. The header was centred, not misplaced ───────────────
   The grid areas were right all along; an inherited text-align:center
   was floating "01" into the middle of its column. */
@media (max-width: 760px){
  summary.ath-public-category-head,
  summary.ath-public-category-head > div,
  summary.ath-public-category-head .section-kicker,
  summary.ath-public-category-head h2,
  summary.ath-public-category-head .ath-category-count{
    text-align: start !important;
  }
  summary.ath-public-category-head > div{ align-items: flex-start; }
  summary.ath-public-category-head .ath-category-count{ text-align: end !important; }

  .ath-smart-service-actions .btn{ margin-inline: 0 !important; }
  .ath-smart-service-meta{ gap: 5px 6px !important; }
}

/* ── 24. ERROR PAGE ───────────────────────────────────────────
   The 404 now uses the site's own layout, so it needs the site's own
   manners: a card, room to breathe, and links a thumb can hit. */
.ath-error-page{ padding-block: clamp(34px, 7vw, 88px); }
.ath-error-card{
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(22px, 5vw, 40px);
  text-align: center;
  background: var(--ath-white);
  border: 1px solid var(--ath-line);
  border-radius: var(--ath-radius);
  box-shadow: var(--ath-shadow);
}
.ath-error-code{
  display: block;
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ath-gold-deep);
  line-height: 1;
}
.ath-error-card h1{
  font-size: clamp(1.24rem, 4.6vw, 1.7rem);
  margin: 12px 0 10px;
}
.ath-error-card > p{
  color: var(--ath-ink-soft);
  line-height: 1.75;
  margin: 0 auto 22px;
  max-width: 44ch;
}
.ath-error-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
}
.ath-error-actions > .btn{ flex: 1 1 44%; min-width: 150px; }
.ath-error-links{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  justify-content: center;
  padding-top: 18px;
  border-top: 1px solid var(--ath-line);
}
.ath-error-links a{
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--ath-line);
  border-radius: 999px;
  background: var(--ath-white);
  color: var(--ath-ink-soft);
  font-size: .87rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.ath-error-links a:hover,
.ath-error-links a:focus-visible{
  color: var(--ath-gold-deep);
  border-color: var(--ath-gold);
  background: var(--ath-ivory);
}

/* ── 25. THE LAST TAP TARGETS ─────────────────────────────────
   Two breadcrumb components were missed by the earlier pass because
   they use their own class names; the service card's title link sat a
   hair under the 36px floor. */
@media (pointer: coarse), (max-width: 900px){
  .ath-v19-breadcrumb a,
  .ath-gallery-breadcrumb a,
  .ath-gallery-breadcrumb > span{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 8px;
  }
  .ath-smart-service-heading h3 a{
    display: block;
    min-height: 38px;
  }
}


/* ── 26. RTL ARROWS, FOCUS FRAMES, MEDIA MOTION ───────────────
   Three separate complaints with one root each:
   the carousel chevrons were authored for LTR and never mirrored,
   keyboard/tap focus had no visible frame, and moving between
   photos changed the image with no transition at all. */

/* 26a. Arrows. In Arabic, "previous" points right and "next" points
   left. The glyph itself has to flip, not just the button position. */
[dir="rtl"] .ath-carousel-prev svg,
[dir="rtl"] .ath-carousel-next svg,
[dir="rtl"] .ath-album-arrow svg,
[dir="rtl"] .ath-design-arrow svg{
  transform: scaleX(-1);
}
[dir="rtl"] .ath-simple-slider-nav.ath-prev,
[dir="rtl"] .ath-design-prev,
[dir="rtl"] .ath-album-prev{ transform: scaleX(-1); }
[dir="rtl"] .ath-simple-slider-nav.ath-next,
[dir="rtl"] .ath-design-next,
[dir="rtl"] .ath-album-next{ transform: scaleX(-1); }

/* the slider nav buttons are absolutely positioned; swap the sides too */
[dir="rtl"] .ath-simple-slider-nav.ath-prev{ left: auto; right: 12px; }
[dir="rtl"] .ath-simple-slider-nav.ath-next{ right: auto; left: 12px; }

/* 26b. A visible frame on whatever the user is on, and bigger labels
   on the controls that carry the booking actions. */
:where(a, button, summary, [role="button"], input, select, textarea):focus-visible{
  outline: 3px solid #c8a24a;
  outline-offset: 3px;
  border-radius: 10px;
}
.ath-photo-open:focus-visible,
.ath-latest-media:focus-visible,
.ath-album-cover:focus-visible{
  outline: 3px solid #c8a24a;
  outline-offset: 4px;
}
.btn{ font-size: clamp(0.98rem, 0.95rem + 0.3vw, 1.08rem); font-weight: 600; }
.btn-lg{ font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); }
.ath-icon-button{ font-size: 1.15rem; }
@media (pointer: coarse), (max-width: 900px){
  .btn{ min-height: 48px; padding-inline: 20px; }
}

/* hover/active read as a frame as well, so the choice is obvious
   before it is made, not only after focus lands */
.ath-photo-card:hover .ath-photo-open,
.ath-latest-card:hover .ath-latest-media,
.ath-home-design-card:hover img{
  box-shadow: 0 0 0 3px rgba(200,162,74,.85);
  border-radius: 12px;
}

/* 26c. Motion between photos and videos: short, and skipped entirely
   for anyone who asked their system to reduce motion. */
.ath-photo-card,
.ath-latest-card,
.ath-home-design-card{
  transition: transform .22s ease, box-shadow .22s ease;
}
.ath-photo-card:hover,
.ath-latest-card:hover{ transform: translateY(-3px); }

.ath-photo-grid img,
.ath-latest-grid img{
  transition: transform .35s ease, opacity .25s ease;
}
.ath-photo-open:hover img,
.ath-latest-media:hover img{ transform: scale(1.04); }

.ath-simple-slider img,
.ath-simple-slider video{
  animation: ath-media-in .28s ease both;
}
@keyframes ath-media-in{
  from{ opacity: 0; transform: scale(.985); }
  to  { opacity: 1; transform: none; }
}

.ath-carousel-track{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  .ath-photo-card,
  .ath-latest-card,
  .ath-home-design-card,
  .ath-photo-grid img,
  .ath-latest-grid img{ transition: none; }
  .ath-photo-card:hover,
  .ath-latest-card:hover{ transform: none; }
  .ath-photo-open:hover img,
  .ath-latest-media:hover img{ transform: none; }
  .ath-simple-slider img,
  .ath-simple-slider video{ animation: none; }
  .ath-carousel-track{ scroll-behavior: auto; }
}

/* ── 27. THE LATEST-WORK GRID ─────────────────────────────────
   New home section: one card per recent piece, with its caption and
   both booking actions reachable without opening the album. */
.ath-home-latest{ padding-block: clamp(2.5rem, 5vw, 4rem); }
.ath-latest-grid{
  display: grid;
  gap: clamp(.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.ath-latest-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(200,162,74,.18);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ath-latest-media{
  display: block;
  aspect-ratio: 4 / 3;
  background: #17120e;
  position: relative;
  overflow: hidden;
}
.ath-latest-media img,
.ath-latest-media video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ath-latest-badge{
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px;
  background: rgba(0,0,0,.65); color: #fff;
  padding: 3px 9px; border-radius: 999px; font-size: .8rem;
}
.ath-latest-body{ padding: .85rem .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.ath-latest-body h3{ font-size: 1.02rem; line-height: 1.45; margin: 0; }
.ath-latest-body p{ font-size: .9rem; line-height: 1.7; margin: 0; opacity: .85; }
.ath-latest-actions{ display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.ath-latest-actions .btn{ flex: 1 1 auto; text-align: center; }

/* ── 29. WHAT-HAPPENS-NEXT PANEL ──────────────────────────────
   The quote form asked for a phone number and a date with nothing
   said about what follows, which is the point where people stop. */
.ath-quote-help{
  margin: 1.5rem 0 .5rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid rgba(200,162,74,.35);
  border-radius: 14px;
  background: rgba(200,162,74,.06);
}
.ath-quote-help h3{
  margin: 0 0 .7rem;
  font-size: 1.05rem;
}
.ath-quote-help ol{
  margin: 0 0 .9rem;
  padding-inline-start: 1.3rem;
  line-height: 1.95;
  font-size: .94rem;
}
.ath-quote-help li{ margin-bottom: .35rem; }
.ath-quote-help-note{
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: .93rem;
  line-height: 1.8;
}
.ath-quote-help-note .btn{ flex: 0 0 auto; }
@media (max-width: 560px){
  .ath-quote-help-note .btn{ flex: 1 1 auto; text-align: center; }
}

/* ── 30. PAGINATION CENTRING ──────────────────────────────────
   The page numbers inherited the page's right alignment, so they
   sat against the edge instead of under the middle of the grid. */
.ath-album-pagination,
.ath-gallery-pagination,
.pagination,
nav[aria-label="Pagination Navigation"]{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-inline: auto;
  padding-block: 1.25rem;
}
.ath-album-pagination > *,
.ath-gallery-pagination > *{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* ── 31. STAGE MOTION ─────────────────────────────────────────
   The site read as a flat catalogue. These are the effects a
   wedding-lighting company actually sells — a spotlight sweep, a
   low haze, a slow shimmer — applied to the hero and section
   heads only, never behind body copy where they would fight it.

   Everything here is compositor-only (transform/opacity), runs on
   a handful of elements, and is switched off entirely for anyone
   who asked their system to reduce motion. */

/* 31a. Spotlight sweep across a dark stage. One pass, slow, then
   it rests — a loop at this size reads as a broken banner. */
.ath-spot-stage{ position: relative; overflow: hidden; isolation: isolate; }
.ath-spot-stage::before{
  content: "";
  position: absolute;
  inset: -40% -20%;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(38% 60% at 30% 0%,
      rgba(255, 236, 190, .34) 0%,
      rgba(255, 226, 160, .16) 38%,
      rgba(255, 220, 150, 0) 72%);
  transform: translateX(-28%) rotate(-8deg);
  animation: ath-spot-sweep 9s cubic-bezier(.42, 0, .3, 1) .4s both;
  mix-blend-mode: screen;
}
@keyframes ath-spot-sweep{
  0%   { transform: translateX(-34%) rotate(-10deg); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: .9; }
  100% { transform: translateX(30%) rotate(6deg); opacity: .55; }
}

/* 31b. Haze drifting off the floor. Two offset layers so the edge
   never resolves into a visible band. */
.ath-haze{ position: relative; overflow: hidden; }
.ath-haze::after{
  content: "";
  position: absolute;
  inset-inline: -10%;
  inset-block-end: -18%;
  block-size: 46%;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(60% 100% at 22% 100%, rgba(255,255,255,.13), rgba(255,255,255,0) 70%),
    radial-gradient(55% 100% at 74% 100%, rgba(255,240,214,.11), rgba(255,240,214,0) 72%);
  filter: blur(6px);
  animation: ath-haze-drift 16s ease-in-out infinite alternate;
}
@keyframes ath-haze-drift{
  from { transform: translate3d(-3%, 4%, 0) scale(1);    opacity: .75; }
  to   { transform: translate3d(4%, -2%, 0) scale(1.08); opacity: 1; }
}

/* 31c. Cards lift and tilt toward the pointer. The tilt angles are
   deliberately small — past about 6deg a photograph starts to look
   distorted rather than dimensional. */
.ath-tilt{
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
  will-change: transform;
}
.ath-tilt.is-tilting{
  transform:
    perspective(900px)
    rotateX(calc(var(--ath-ty, 0) * -5deg))
    rotateY(calc(var(--ath-tx, 0) * 5deg))
    translate3d(0, -4px, 0);
  box-shadow: 0 18px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(200,162,74,.35);
}
.ath-tilt > *{ transform: translateZ(0); }

/* 31d. Gold shimmer that crosses a heading once as it arrives. */
.ath-shimmer{
  background-image: linear-gradient(100deg,
    currentColor 0%, currentColor 38%,
    #f0d9a4 48%, #fff3d6 52%, #f0d9a4 56%,
    currentColor 66%, currentColor 100%);
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
}
.ath-shimmer.is-lit{
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ath-shimmer-pass 2.1s ease-out .1s both;
}
@keyframes ath-shimmer-pass{
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* 31e. Sections rise as they enter, staggered by position so a grid
   resolves row by row rather than all at once. */
html.ath-motion [data-ath-rise]{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--ath-delay, 0ms);
}
html.ath-motion [data-ath-rise].is-in{ opacity: 1; transform: none; }

/* 31f. Submitting state. A quote form that goes quiet after a tap
   gets tapped again; this makes the wait legible and blocks the
   second submission. */
.ath-submitting{ position: relative; pointer-events: none; }
.ath-submit-veil{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  background: rgba(20,13,4,.82);
  backdrop-filter: blur(4px);
  opacity: 0;
  animation: ath-veil-in .25s ease forwards;
}
.ath-submit-card{
  text-align: center;
  color: #f4ead9;
  padding: 30px 34px;
  max-width: 340px;
  background: #241703;
  border: 1px solid rgba(200,162,74,.45);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
.ath-submit-ring{
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 3px solid rgba(200,162,74,.28);
  border-block-start-color: #C9A96E;
  animation: ath-ring-spin .9s linear infinite;
}
.ath-submit-card strong{ display: block; font-size: 1.05rem; margin-bottom: .4rem; }
.ath-submit-card span{ font-size: .9rem; opacity: .82; line-height: 1.8; }
@keyframes ath-veil-in{ to{ opacity: 1; } }
@keyframes ath-ring-spin{ to{ transform: rotate(360deg); } }

/* 31g. Buttons acknowledge the press before the page responds. */
.btn{ transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease; }
.btn:active{ transform: translateY(1px) scale(.985); }

@media (prefers-reduced-motion: reduce){
  .ath-spot-stage::before,
  .ath-haze::after{ animation: none; opacity: .5; transform: none; }
  .ath-tilt, .ath-tilt.is-tilting{ transform: none; transition: none; }
  .ath-shimmer.is-lit{ animation: none; -webkit-text-fill-color: currentColor; color: inherit; }
  html.ath-motion [data-ath-rise]{ opacity: 1; transform: none; transition: none; }
  .ath-submit-ring{ animation-duration: 2.4s; }
  .btn:active{ transform: none; }
}

/* ── 32. QUOTE PAGE ───────────────────────────────────────────
   The request page was a plain band of text over a form. It now
   frames the title, shows where the customer is in the process,
   and keeps the two instant routes and the pages that answer the
   common hesitations within reach. */
.ath-quote-hero{
  padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(180deg, #2a1a06 0%, #3a250c 100%);
  color: #f4ead9;
}
.ath-quote-frame{
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid rgba(200,162,74,.42);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  text-align: center;
  position: relative;
  z-index: 2;
}
.ath-quote-kicker{
  display: inline-block;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #C9A96E;
  margin-bottom: .55rem;
}
.ath-quote-frame h1{
  margin: 0 0 .6rem;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
  line-height: 1.35;
  color: #fff;
}
.ath-quote-frame > p{
  margin: 0 auto 1.4rem;
  max-width: 46ch;
  font-size: .97rem;
  line-height: 1.9;
  color: rgba(244,234,217,.86);
}

/* the three steps, with the current one carrying the weight */
.ath-quote-steps{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .35rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.ath-quote-steps li{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  font-size: .88rem;
  border: 1px solid rgba(200,162,74,.3);
  color: rgba(244,234,217,.7);
  min-height: 44px;
}
.ath-quote-steps li span{
  inline-size: 24px; block-size: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(200,162,74,.22);
  color: #C9A96E;
  font-size: .8rem; font-weight: 700;
}
.ath-quote-steps li.is-done{ color: rgba(244,234,217,.85); }
.ath-quote-steps li.is-done span{ background: #C9A96E; color: #2a1a06; }
.ath-quote-steps li.is-current{
  background: rgba(200,162,74,.16);
  border-color: #C9A96E;
  color: #fff;
  font-weight: 600;
}
.ath-quote-steps li.is-current span{ background: #C9A96E; color: #2a1a06; }

.ath-quote-instant{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.ath-quote-instant .btn{ min-width: 168px; }

.ath-quote-shortcuts{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  border-block-start: 1px solid rgba(200,162,74,.22);
  padding-block-start: 1.05rem;
}
.ath-quote-shortcuts a{
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(200,162,74,.28);
  color: rgba(244,234,217,.9);
  text-decoration: none;
  font-size: .86rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ath-quote-shortcuts a:hover,
.ath-quote-shortcuts a:focus-visible{
  background: rgba(200,162,74,.18);
  border-color: #C9A96E;
  color: #fff;
}

@media (max-width: 560px){
  .ath-quote-instant .btn{ flex: 1 1 100%; }
  .ath-quote-steps li{ font-size: .82rem; padding: .45rem .7rem; }
}

/* ── 33. QUOTE FRAME CONTRAST ─────────────────────────────────
   The frame sits on a dark ground, but a site-wide h1 rule paints
   headings dark brown and clips their background to the text. On
   this panel that rendered the title almost invisible. */
.ath-quote-hero .ath-quote-frame h1,
.ath-quote-hero .ath-quote-frame h1 *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  font-family: inherit;
  font-style: normal;
}
.ath-quote-hero .ath-quote-frame > p{
  color: rgba(244,234,217,.88) !important;
}
.ath-quote-hero .ath-quote-kicker{ color: #C9A96E !important; }
.ath-quote-hero .ath-quote-shortcuts a{ color: rgba(244,234,217,.92) !important; }

/* ── 34. PHOTO TO DESIGN ──────────────────────────────────────
   The new link out of a gallery photo into its design page. It
   sits with the cart and share controls, so it inherits their
   size and only needs its own affordance. */
.ath-photo-detail{
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1;
}
.ath-photo-detail:hover,
.ath-photo-detail:focus-visible{
  background: rgba(200,162,74,.2);
  border-color: #C9A96E;
}

/* ── 35. SIMILAR DESIGN CARDS ─────────────────────────────────
   The related rail showed a bare design number under each photo,
   which told the customer nothing about what they were looking at.
   The title now leads and the number reads as a reference. */
.ath-design-card{ position: relative; display: block; }
.ath-design-card-title{
  display: block;
  padding: .55rem .7rem .15rem;
  font-size: .88rem;
  line-height: 1.55;
  font-weight: 600;
}
.ath-design-card > strong{
  display: block;
  padding: 0 .7rem .6rem;
  font-size: .78rem;
  font-weight: 500;
  opacity: .62;
}

/* ── 36. BOOKING WIZARD ───────────────────────────────────────
   The three-question block shipped with no styling at all: the
   options were bare <button> text with no border, no background
   and no padding, so they ran together as one sentence and read
   as prose rather than as choices. */
.ath-booking-wizard{
  margin: 0 0 1.75rem;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border: 1px solid rgba(200,162,74,.32);
  border-radius: 16px;
  background: rgba(200,162,74,.05);
}
.ath-wizard-heading{ text-align: center; margin-bottom: 1.35rem; }
.ath-wizard-heading > span{
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .05em;
  padding: .25rem .8rem;
  border-radius: 999px;
  background: rgba(200,162,74,.18);
  color: #8a6a24;
  margin-bottom: .5rem;
}
.ath-wizard-heading h2{
  margin: 0 0 .4rem;
  font-size: clamp(1.1rem, 1rem + .7vw, 1.4rem);
  line-height: 1.5;
}
.ath-wizard-heading p{
  margin: 0 auto;
  max-width: 46ch;
  font-size: .9rem;
  line-height: 1.85;
  opacity: .8;
}

.ath-wizard-step{ margin-bottom: 1.15rem; }
.ath-wizard-step:last-of-type{ margin-bottom: .5rem; }

/* the question line: a numbered badge, then the question */
.ath-wizard-step > strong{
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .65rem;
  font-size: .97rem;
  font-weight: 600;
}
.ath-wizard-step > strong > b{
  flex: 0 0 auto;
  inline-size: 26px; block-size: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #C9A96E;
  color: #2a1a06;
  font-size: .82rem;
  font-weight: 700;
}

/* the answers: real, separate, tappable cards */
.ath-wizard-options{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .55rem;
}
.ath-wizard-options button{
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: .7rem .85rem;
  border: 1.5px solid rgba(200,162,74,.4);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: .92rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease,
              transform .12s ease, box-shadow .18s ease;
}
.ath-wizard-options button:hover{
  border-color: #C9A96E;
  background: rgba(200,162,74,.09);
}
.ath-wizard-options button:active{ transform: translateY(1px); }
.ath-wizard-options button:focus-visible{
  outline: 3px solid #C9A96E;
  outline-offset: 2px;
}
/* the picked answer has to be unmistakable at a glance */
.ath-wizard-options button.is-selected,
.ath-wizard-options button[aria-pressed="true"],
.ath-wizard-options button.is-active{
  border-color: #C9A96E;
  background: #C9A96E;
  color: #2a1a06;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(200,162,74,.32);
}

.ath-wizard-result{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-top: 1.1rem;
  padding: .95rem 1.1rem;
  border: 1px solid rgba(200,162,74,.45);
  border-radius: 12px;
  background: rgba(200,162,74,.12);
}
.ath-wizard-result > div{ flex: 1 1 240px; }
.ath-wizard-result strong{ display: block; margin-bottom: .25rem; font-size: .97rem; }
.ath-wizard-result p{ margin: 0; font-size: .89rem; line-height: 1.8; opacity: .85; }
.ath-wizard-result button{
  flex: 0 0 auto;
  min-height: 46px;
  padding: .6rem 1.3rem;
  border: 0;
  border-radius: 10px;
  background: #6b3d0c;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ath-wizard-result button:hover{ background: #855012; }

@media (max-width: 480px){
  .ath-wizard-options{ grid-template-columns: 1fr 1fr; }
  .ath-wizard-result button{ flex: 1 1 100%; }
}

/* ── 37. WIZARD SELECTION ─────────────────────────────────────
   Selected state needs to out-rank the v17 base rule for these
   buttons, hence the doubled class on the container. */
.ath-booking-wizard .ath-wizard-options button.is-selected,
.ath-booking-wizard .ath-wizard-options button[aria-pressed="true"],
.ath-booking-wizard .ath-wizard-options button.is-active{
  border-color: #C9A96E !important;
  background: #C9A96E !important;
  color: #2a1a06 !important;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(200,162,74,.32);
}
.ath-booking-wizard .ath-wizard-options button.is-selected::before{
  content: "✓";
  margin-inline-end: .4rem;
  font-weight: 700;
}

/* ── 38. GUIDE ARTICLE ────────────────────────────────────────
   The guides ran full-bleed with no measure, no separation between
   sections and both languages stacked end to end. This gives them a
   reading column, a contents list and headings you can navigate by. */
.ath-guide-article{
  max-width: 760px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}
.ath-guide-article > .ath-section-head{ text-align: center; margin-bottom: 1.5rem; }
.ath-guide-article > .ath-section-head h1{
  margin: .3rem 0 .55rem;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem);
  line-height: 1.45;
}
.ath-guide-article > .ath-section-head p{
  margin: 0 auto;
  max-width: 44ch;
  font-size: .92rem;
  line-height: 1.9;
  opacity: .78;
}

.ath-guide-hero-img{
  display: block;
  margin: 0 auto 1.75rem;
  border-radius: 16px;
  overflow: hidden;
  max-height: 420px;
}
.ath-guide-hero-img img{
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

/* contents: the article's own map */
.ath-guide-toc{
  margin: 0 0 1.9rem;
  padding: 1.05rem 1.25rem;
  border: 1px solid rgba(200,162,74,.32);
  border-radius: 14px;
  background: rgba(200,162,74,.06);
}
.ath-guide-toc > strong{
  display: block;
  margin-bottom: .55rem;
  font-size: .95rem;
}
.ath-guide-toc ol{
  margin: 0;
  padding-inline-start: 1.25rem;
  columns: 2;
  column-gap: 1.5rem;
  font-size: .9rem;
  line-height: 2;
}
.ath-guide-toc li{ break-inside: avoid; }
.ath-guide-toc a{
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid transparent;
}
.ath-guide-toc a:hover,
.ath-guide-toc a:focus-visible{ border-block-end-color: #C9A96E; }
@media (max-width: 560px){ .ath-guide-toc ol{ columns: 1; } }

/* the body: one comfortable column, sections clearly divided */
.ath-guide-copy{ font-size: 1.02rem; }
.ath-guide-copy h2{
  margin: 2.1rem 0 .75rem;
  padding-block-end: .5rem;
  border-block-end: 1px solid rgba(200,162,74,.3);
  font-size: clamp(1.12rem, 1rem + .55vw, 1.35rem);
  line-height: 1.55;
  scroll-margin-block-start: 90px;
}
.ath-guide-copy h2:first-child{ margin-block-start: .5rem; }
.ath-guide-copy p{
  margin: 0 0 1.05rem;
  line-height: 2.05;
  text-align: start;
}
.ath-guide-copy p[lang="en"]{ line-height: 1.85; }

/* the second language, folded away rather than doubling the page */
.ath-guide-alt{
  margin-block-start: 2.25rem;
  border-block-start: 1px solid rgba(200,162,74,.28);
  padding-block-start: 1.1rem;
}
.ath-guide-alt > summary{
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1.05rem;
  border: 1px solid rgba(200,162,74,.4);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
}
.ath-guide-alt > summary::-webkit-details-marker{ display: none; }
.ath-guide-alt > summary::after{ content: "▾"; font-size: .8rem; }
.ath-guide-alt[open] > summary::after{ content: "▴"; }
.ath-guide-alt > summary:hover{ background: rgba(200,162,74,.1); }

.ath-content-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-block: 1.9rem 1.2rem;
}
.ath-content-tags span{
  padding: .3rem .8rem;
  border-radius: 999px;
  background: rgba(200,162,74,.13);
  font-size: .82rem;
}
.ath-guide-article .ath-image-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}
@media (max-width: 520px){
  .ath-guide-article .ath-image-actions .btn{ flex: 1 1 100%; text-align: center; }
}

/* ── 39. HEADER AND LOGO ──────────────────────────────────────
   The header was a flat white bar with the logo floating in it.
   It now behaves like the rest of the site: a moving-head beam
   travels the lower edge, the mark carries its own soft key light,
   and the bar condenses once the page scrolls so the content gets
   the room instead. */

.pub-header{
  transition: height .28s ease, background-color .28s ease,
              box-shadow .28s ease, backdrop-filter .28s ease;
  backdrop-filter: saturate(150%) blur(8px);
  position: sticky;
  z-index: 60;
}

/* the beam. One thin gold pass along the bottom rule — the same
   gesture a moving head makes across a stage, at a size that reads
   as trim rather than as decoration. */
.pub-header::after{
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(200,162,74,0) 0%,
    rgba(200,162,74,0) 34%,
    rgba(255,231,178,.95) 46%,
    rgba(255,246,222,1) 50%,
    rgba(255,231,178,.95) 54%,
    rgba(200,162,74,0) 66%,
    rgba(200,162,74,0) 100%);
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
  animation: ath-head-beam 5.5s cubic-bezier(.5,0,.35,1) .6s 2 both;
}
@keyframes ath-head-beam{
  0%   { background-position: 130% 0; opacity: 0; }
  12%  { opacity: .95; }
  88%  { opacity: .95; }
  100% { background-position: -30% 0; opacity: 0; }
}

/* the mark, lit rather than pasted on */
.pub-header .ath-header-logo,
.pub-header .pub-logo,
.pub-header a > img{
  position: relative;
  transition: filter .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.6));
}
.pub-header a:hover > img,
.pub-header .pub-logo:hover img{
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 3px 10px rgba(200,162,74,.45));
}

/* condensed state: set by the header script once the page moves */
.pub-header.is-condensed{
  background: rgba(255,255,255,.97);
  box-shadow: 0 6px 24px rgba(45,27,15,.12);
}
.pub-header.is-condensed a > img,
.pub-header.is-condensed .pub-logo img{
  transform: scale(.9);
  transform-origin: center;
}

/* nav items read as one row with the mark, not as separate furniture */
.pub-header nav a{
  position: relative;
  transition: color .2s ease;
}
.pub-header nav a::after{
  content: "";
  position: absolute;
  inset-inline: .55rem;
  inset-block-end: .35rem;
  block-size: 2px;
  border-radius: 2px;
  background: #C9A96E;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.pub-header nav a:hover::after,
.pub-header nav a:focus-visible::after,
.pub-header nav a[aria-current]::after{ transform: scaleX(1); }

@media (prefers-reduced-motion: reduce){
  .pub-header::after{ animation: none; opacity: 0; }
  .pub-header, .pub-header a > img, .pub-header nav a::after{ transition: none; }
  .pub-header a:hover > img{ transform: none; }
}

/* ── 40. ACCOUNT PAGES ────────────────────────────────────────
   Login, register, profile, dashboard and password recovery all
   used a set of ath-account-* classes that had no stylesheet at
   all — the markup was sound but rendered as unstyled browser
   defaults. This gives the whole account area one card system. */
.ath-account-page{
  max-width: 860px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1rem, 4vw, 1.5rem);
}
.ath-account-card{
  padding: clamp(1.35rem, 4vw, 2.1rem);
  border: 1px solid rgba(200,162,74,.3);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(45,27,15,.07);
}
.ath-account-card.is-wide{ max-width: 100%; }

.ath-account-heading{ text-align: center; margin-bottom: 1.6rem; }
.ath-account-kicker{
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .05em;
  padding: .25rem .85rem;
  border-radius: 999px;
  background: rgba(200,162,74,.16);
  color: #8a6a24;
  margin-bottom: .55rem;
}
.ath-account-heading h1{
  margin: 0 0 .5rem;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem);
  line-height: 1.45;
}
.ath-account-heading p{
  margin: 0 auto;
  max-width: 48ch;
  font-size: .93rem;
  line-height: 1.9;
  opacity: .8;
}

/* two columns that collapse cleanly, never a cramped half-field */
.ath-account-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .9rem 1rem;
  margin-bottom: .9rem;
}

/* the label wraps its field, so the label itself is the layout box */
.ath-account-form label{
  display: block;
  font-size: .9rem;
}
.ath-account-form label > span{
  display: block;
  margin-bottom: .35rem;
  font-weight: 600;
}
.ath-account-form input,
.ath-account-form select,
.ath-account-form textarea{
  inline-size: 100%;
  min-height: 48px;
  padding: .65rem .85rem;
  border: 1.5px solid rgba(200,162,74,.38);
  border-radius: 11px;
  background: #fffdf9;
  font: inherit;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ath-account-form textarea{ min-height: 110px; resize: vertical; }
.ath-account-form input:hover,
.ath-account-form select:hover,
.ath-account-form textarea:hover{ border-color: rgba(200,162,74,.6); }
.ath-account-form input:focus,
.ath-account-form select:focus,
.ath-account-form textarea:focus{
  outline: none;
  border-color: #C9A96E;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200,162,74,.22);
}
.ath-account-form input[readonly]{ background: #f6f1e8; opacity: .85; }
.ath-field-error{
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  color: #b42318;
}

.ath-account-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(200,162,74,.22);
}
.ath-account-primary,
.ath-account-form button[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .7rem 1.6rem;
  border: 0;
  border-radius: 11px;
  background: #6b3d0c;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .12s ease;
}
.ath-account-primary:hover,
.ath-account-form button[type="submit"]:hover{ background: #855012; }
.ath-account-primary:active,
.ath-account-form button[type="submit"]:active{ transform: translateY(1px); }
.ath-account-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .7rem 1.4rem;
  border: 1.5px solid rgba(200,162,74,.45);
  border-radius: 11px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease;
}
.ath-account-secondary:hover{ background: rgba(200,162,74,.1); border-color: #C9A96E; }

.ath-account-alert{
  margin-bottom: 1.2rem;
  padding: .85rem 1.05rem;
  border-radius: 11px;
  font-size: .92rem;
  line-height: 1.8;
}
.ath-account-alert.is-success{ background: #eaf7ee; border: 1px solid #b9e2c6; color: #1c6b34; }
.ath-account-alert.is-error{ background: #fdeceb; border: 1px solid #f3c2be; color: #a1271e; }
.ath-account-alert ul{ margin: 0; padding-inline-start: 1.15rem; }

/* dashboard summary tiles */
.ath-account-stats,
.ath-account-stats-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.ath-account-stat{
  padding: 1rem 1.1rem;
  border: 1px solid rgba(200,162,74,.28);
  border-radius: 14px;
  background: rgba(200,162,74,.06);
  text-align: center;
}
.ath-account-stat strong{
  display: block;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #6b3d0c;
}
.ath-account-stat span{ font-size: .85rem; opacity: .8; }

.ath-account-section{ margin-bottom: 1.9rem; }
.ath-account-section > h2{
  margin: 0 0 .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(200,162,74,.28);
  font-size: 1.1rem;
}
.ath-account-hero{ text-align: center; margin-bottom: 1.5rem; }
.ath-account-hub{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem;
}

@media (max-width: 560px){
  .ath-account-actions > *{ flex: 1 1 100%; }
  .ath-account-grid{ grid-template-columns: 1fr; }
}

/* ── 41. SIGN IN AND REGISTER ─────────────────────────────────
   The auth screens use their own ath-auth-modern__* names, and
   like the account pages they had no stylesheet — a customer
   creating an account met unstyled browser defaults at exactly
   the moment they are deciding whether to trust the business. */
.ath-auth-modern{
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 1.5rem);
}
.ath-auth-modern__card{
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border: 1px solid rgba(200,162,74,.3);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 38px rgba(45,27,15,.08);
}
.ath-auth-modern__head{ text-align: center; margin-bottom: 1.5rem; }
.ath-auth-modern__head h1{
  margin: 0 0 .5rem;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem);
  line-height: 1.45;
}
.ath-auth-modern__head p{
  margin: 0 auto;
  max-width: 42ch;
  font-size: .93rem;
  line-height: 1.9;
  opacity: .8;
}

.ath-auth-modern__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .9rem 1rem;
}
.ath-auth-modern__row{ margin-bottom: .9rem; }

.ath-auth-modern__form label{ display: block; font-size: .9rem; margin-bottom: .9rem; }
.ath-auth-modern__form label > span{ display: block; margin-bottom: .35rem; font-weight: 600; }
.ath-auth-modern__form input:not([type="checkbox"]):not([type="radio"]),
.ath-auth-modern__form select{
  inline-size: 100%;
  min-height: 48px;
  padding: .65rem .85rem;
  border: 1.5px solid rgba(200,162,74,.38);
  border-radius: 11px;
  background: #fffdf9;
  font: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ath-auth-modern__form input:focus,
.ath-auth-modern__form select:focus{
  outline: none;
  border-color: #C9A96E;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200,162,74,.22);
}

/* the remember/consent line: a real target, not a stray checkbox */
.ath-auth-modern__check{
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-bottom: 1rem;
  font-size: .89rem;
  line-height: 1.75;
}
.ath-auth-modern__check input[type="checkbox"]{
  inline-size: 20px; block-size: 20px;
  margin-block-start: .15rem;
  accent-color: #6b3d0c;
  flex: 0 0 auto;
}

.ath-auth-modern__form button[type="submit"]{
  inline-size: 100%;
  min-height: 50px;
  margin-top: .3rem;
  border: 0;
  border-radius: 11px;
  background: #6b3d0c;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .2s ease, transform .12s ease;
}
.ath-auth-modern__form button[type="submit"]:hover{ background: #855012; }
.ath-auth-modern__form button[type="submit"]:active{ transform: translateY(1px); }

.ath-auth-modern__divider{
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.35rem 0;
  font-size: .85rem;
  opacity: .7;
}
.ath-auth-modern__divider::before,
.ath-auth-modern__divider::after{
  content: "";
  flex: 1;
  block-size: 1px;
  background: rgba(200,162,74,.35);
}

.ath-auth-modern__foot{
  margin-top: 1.35rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(200,162,74,.22);
  text-align: center;
  font-size: .9rem;
  line-height: 2;
}
.ath-auth-modern__foot a{
  color: #6b3d0c;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(107,61,12,.35);
}
.ath-auth-modern__foot a:hover{ border-bottom-color: #6b3d0c; }

@media (max-width: 520px){
  .ath-auth-modern__grid{ grid-template-columns: 1fr; }
}

/* ── 42. TOUCH TARGETS SWEEP ──────────────────────────────────
   The service card titles are the primary way into each service on
   a phone, and they measured 38px — under the 44px a thumb needs.
   An earlier pass set min-height on this selector but not the
   padding that actually makes the box reach it. */
@media (pointer: coarse), (max-width: 900px){
  .ath-smart-service-heading h3 a,
  .ath-smart-service-heading h3{
    display: block;
    min-height: 44px;
    padding-block: 4px;
    line-height: 1.55;
  }

  /* the same shape appears on the other card lists */
  .ath-home-design-card > a,
  .ath-design-album-card > a,
  .ath-album-card a,
  .ath-latest-card h3 a{
    min-height: 44px;
    padding-block: 3px;
  }

  /* any remaining bare inline link inside a card body */
  .ath-smart-service-copy a,
  .ath-service-card a:not(.btn):not(.ath-icon-button){
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── 43. REMAINING TOUCH TARGETS ──────────────────────────────
   Two lists were still under the thumb minimum on a phone: the
   guide contents, whose links were bare text at 17px, and the
   gallery album chips at 40px. */
@media (pointer: coarse), (max-width: 900px){
  .ath-guide-toc ol{ line-height: 1.6; }
  .ath-guide-toc li{ margin-bottom: .2rem; }
  .ath-guide-toc a{
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 6px;
  }

  .ath-album-filter-scroll a,
  .ath-gallery-filter a,
  .ath-album-card a,
  .ath-album-strip a{
    min-height: 44px;
    padding-block: 4px;
  }
}

/* ── 44. SECTION HEAD LINKS ───────────────────────────────────
   The "view all" link beside a section title was bare text at
   18px — the last target on the site under the thumb minimum. */
.section-head > a,
.ath-section-head > a,
.ath-similar-designs .section-head a{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 40px;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(200,162,74,.35);
  font-size: .87rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.section-head > a:hover,
.ath-section-head > a:hover,
.section-head > a:focus-visible{
  background: rgba(200,162,74,.12);
  border-color: #C9A96E;
}
@media (pointer: coarse), (max-width: 900px){
  .section-head > a,
  .ath-section-head > a{ min-height: 44px; }
}

/* ── 45. PHOTO ACTION BUTTONS ─────────────────────────────────
   Cart, share and the new design link sit in a row under each
   photo at 36px. On a phone they are three small targets side by
   side, which is exactly where a mis-tap costs a booking. */
@media (pointer: coarse), (max-width: 900px){
  .ath-photo-actions .ath-icon-button,
  .ath-photo-actions button,
  .ath-photo-actions a{
    min-inline-size: 44px;
    min-block-size: 44px;
  }
  .ath-photo-actions{ gap: .35rem; }
}

/* ── 46. AUTH TOUCH TARGETS ───────────────────────────────────
   The consent checkbox and the switch-to-login link were the last
   two targets under the thumb minimum, and both sit on the path a
   new customer has to complete. The label carries the target so
   the whole sentence is tappable, not just the 22px box. */
.ath-auth-modern__check{
  min-block-size: 44px;
  align-items: center;
  cursor: pointer;
}
.ath-auth-modern__check input[type="checkbox"]{
  inline-size: 24px;
  block-size: 24px;
  margin-block-start: 0;
}
.ath-auth-modern__foot a{
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: .35rem;
}
/* the forgot-password link sat at 27px beside the remember box */
.ath-auth-modern__row a{
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: .35rem;
}
.ath-auth-modern__row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

/* ── 47. MOVING HEAD ──────────────────────────────────────────
   The lighting and sound pages sell exactly this effect, so the
   page shows it: two narrow beams that swing from a fixed pivot
   the way a moving head does, rather than sliding across. Kept to
   the hero band only — beams behind a photo grid would fight the
   photographs the customer came to judge. */
.ath-beam-stage{ position: relative; overflow: hidden; isolation: isolate; }
.ath-beam-stage > *{ position: relative; z-index: 2; }
.ath-beam-stage::before,
.ath-beam-stage::after{
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inline-size: 26%;
  block-size: 170%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  transform-origin: 50% 0%;
  background: linear-gradient(to bottom,
    rgba(255,238,200,.30) 0%,
    rgba(255,232,180,.16) 42%,
    rgba(255,226,160,0) 88%);
  filter: blur(9px);
}
.ath-beam-stage::before{
  inset-inline-start: 16%;
  animation: ath-beam-left 11s ease-in-out infinite alternate;
}
.ath-beam-stage::after{
  inset-inline-end: 16%;
  animation: ath-beam-right 13s ease-in-out infinite alternate;
}
@keyframes ath-beam-left{
  from { transform: rotate(-15deg); opacity: .55; }
  to   { transform: rotate(11deg);  opacity: .95; }
}
@keyframes ath-beam-right{
  from { transform: rotate(14deg);  opacity: .9; }
  to   { transform: rotate(-12deg); opacity: .55; }
}

@media (prefers-reduced-motion: reduce){
  .ath-beam-stage::before,
  .ath-beam-stage::after{ animation: none; opacity: .35; transform: none; }
}

/* ── 48. BUTTON CRYSTAL ───────────────────────────────────────
   Buttons get a crystal sheen and a gold gleam. Everything here is
   pure CSS on transform and opacity only — no scripts, no images,
   no layout work — so it costs nothing at runtime and adds about
   a kilobyte before compression. Effects run on hover, focus and
   press, never on a loop, so nothing animates while the visitor is
   simply reading. */

.btn,
.ath-account-primary,
.ath-wizard-result button,
.ath-auth-modern__form button[type="submit"]{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);   /* keep the sweep on its own layer */
}

/* the crystal band: a narrow highlight that crosses the face once */
.btn::before,
.ath-account-primary::before,
.ath-auth-modern__form button[type="submit"]::before{
  content: "";
  position: absolute;
  inset-block: -60%;
  inline-size: 45%;
  inset-inline-start: -60%;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.42) 45%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.42) 55%,
    rgba(255,255,255,0) 100%);
  transform: translateX(0) skewX(-18deg);
  opacity: 0;
  transition: none;
}
.btn:hover::before,
.btn:focus-visible::before,
.ath-account-primary:hover::before,
.ath-auth-modern__form button[type="submit"]:hover::before{
  opacity: 1;
  animation: ath-crystal-sweep .72s cubic-bezier(.35,0,.25,1) 1;
}
@keyframes ath-crystal-sweep{
  from { transform: translateX(0) skewX(-18deg); }
  to   { transform: translateX(360%) skewX(-18deg); }
}

/* the gleam: a soft gold halo that grows on approach */
.btn-primary,
.ath-account-primary,
.ath-auth-modern__form button[type="submit"]{
  transition: transform .14s ease, box-shadow .28s ease, background-color .22s ease;
}
.btn-primary:hover,
.ath-account-primary:hover,
.ath-auth-modern__form button[type="submit"]:hover{
  box-shadow: 0 8px 22px rgba(200,162,74,.42), 0 0 0 1px rgba(255,231,178,.5) inset;
  transform: translateY(-1px);
}
.btn-outline:hover{
  box-shadow: 0 6px 18px rgba(200,162,74,.24);
  transform: translateY(-1px);
}
.btn:active,
.ath-account-primary:active{ transform: translateY(1px) scale(.99); }

/* press ring: one quick pulse that confirms the tap on a phone,
   where there is no hover to acknowledge it */
.btn::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  box-shadow: 0 0 0 0 rgba(200,162,74,.55);
  opacity: 0;
}
.btn:active::after{ animation: ath-press-ring .45s ease-out 1; }
@keyframes ath-press-ring{
  from { opacity: .8; box-shadow: 0 0 0 0 rgba(200,162,74,.55); }
  to   { opacity: 0;  box-shadow: 0 0 0 14px rgba(200,162,74,0); }
}

/* the two booking buttons carry a slow breath so the eye finds them
   without anything moving fast enough to distract */
.ath-float-whatsapp,
.ath-float-call,
a[href^="tel:"].btn-primary,
a[href*="wa.me"].btn-primary{
  animation: ath-cta-breath 4.5s ease-in-out infinite;
}
@keyframes ath-cta-breath{
  0%, 100% { box-shadow: 0 4px 14px rgba(37,211,102,.28); }
  50%      { box-shadow: 0 6px 22px rgba(37,211,102,.5); }
}

/* the icon buttons on a photo get the same crystal, scaled down */
.ath-icon-button{
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, background-color .2s ease, border-color .2s ease;
}
.ath-icon-button:hover{ transform: translateY(-1px) scale(1.06); }
.ath-icon-button:active{ transform: scale(.95); }

@media (prefers-reduced-motion: reduce){
  .btn::before,
  .ath-account-primary::before,
  .ath-auth-modern__form button[type="submit"]::before{ display: none; }
  .btn:active::after{ animation: none; }
  .ath-float-whatsapp,
  .ath-float-call,
  a[href^="tel:"].btn-primary,
  a[href*="wa.me"].btn-primary{ animation: none; }
  .btn, .btn-primary, .ath-icon-button, .ath-account-primary{ transition: none; }
  .btn-primary:hover, .btn-outline:hover, .ath-icon-button:hover{ transform: none; }
}

/* ── 49. EFFECTS ON LIGHT SECTIONS ────────────────────────────
   The spotlight and haze were tuned for the dark bands. Now that
   every section carries them, they have to read on cream grounds
   too — where a screen blend does nothing and a white haze is
   invisible. On light backgrounds the same gestures use warm gold
   at low opacity with a multiply blend instead. */
.ath-spot-stage:not(.ath-home-hero):not(.ath-home-final-cta):not(.ath-quote-hero)::before{
  background:
    radial-gradient(40% 62% at 28% 0%,
      rgba(200,162,74,.20) 0%,
      rgba(200,162,74,.09) 40%,
      rgba(200,162,74,0) 74%);
  mix-blend-mode: multiply;
}
.ath-haze:not(.ath-home-design-gallery):not(.ath-home-latest)::after{
  background:
    radial-gradient(60% 100% at 22% 100%, rgba(200,162,74,.10), rgba(200,162,74,0) 70%),
    radial-gradient(55% 100% at 74% 100%, rgba(180,140,60,.08), rgba(180,140,60,0) 72%);
  mix-blend-mode: multiply;
}

/* the section wrappers need a stacking context or the effect layer
   paints over the content instead of behind it */
.ath-spot-stage,
.ath-haze{ position: relative; }
.ath-spot-stage > *,
.ath-haze > *{ position: relative; z-index: 2; }
.ath-spot-stage::before,
.ath-haze::after{ z-index: 1; }

/* the gleam has to keep its own colour on a light ground, or the
   heading turns pale mid-pass */
.ath-shimmer{ color: inherit; }
.ath-shimmer.is-lit{
  background-image: linear-gradient(100deg,
    currentColor 0%, currentColor 38%,
    #d9b46a 47%, #f0d9a4 50%, #d9b46a 53%,
    currentColor 64%, currentColor 100%);
}

/* tilt on a card that has its own border must not clip the shadow */
.ath-tilt{ backface-visibility: hidden; }

/* ── 50. SECTION RHYTHM ───────────────────────────────────────
   Sections carried 64–77px of padding top and bottom *and* a
   25.6px margin, so consecutive bands opened a ~154px gap. One
   scale for the whole site: the padding does the spacing and the
   margin is removed, so the page reads as a sequence rather than
   as blocks floating apart. */
:root{
  --ath-band: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --ath-band-tight: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
}

main > section,
main > .ath-section,
.ath-about-hero, .ath-about-proof, .ath-about-faq, .ath-about-story,
.ath-about-services, .ath-about-process, .ath-about-values, .ath-about-cta,
.ath-home-hero, .ath-home-services, .ath-home-design-gallery,
.ath-home-latest, .ath-home-faq, .ath-home-final-cta,
.ath-contact-hero, .ath-contact-body,
.ath-album-service-hero, .ath-similar-designs{
  padding-block: var(--ath-band);
  margin-block: 0;
}

/* two bands of the same tone next to each other only need one gap */
main > section + section{ padding-block-start: var(--ath-band-tight); }

/* the heading block inside a band */
.ath-section-head,
.section-head{
  margin-block-end: clamp(1.1rem, .8rem + 1vw, 1.9rem);
}

/* the last band should not leave a trench above the footer */
main > section:last-child{ padding-block-end: var(--ath-band); }

@media (max-width: 640px){
  :root{
    --ath-band: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    --ath-band-tight: clamp(1.15rem, .9rem + 1.2vw, 1.75rem);
  }
}

/* ── 51. IMAGE SIZING AND TYPE ────────────────────────────────
   Cards showed photographs at whatever ratio the file happened to
   be, so a grid came out as a ragged mosaic. Every card tile now
   holds the same 4:3 frame and crops to fill it; the photograph
   itself is untouched, only the window onto it is fixed. */
.ath-photo-card .ath-photo-open,
.ath-home-design-card > a,
.ath-design-album-card > a,
.ath-design-card,
.ath-album-image,
.ath-latest-media,
.ath-guide-card a,
.ath-service-card > a{
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #f2ece1;
}
.ath-photo-card .ath-photo-open img,
.ath-home-design-card > a img,
.ath-design-album-card > a img,
.ath-design-card img,
.ath-album-image img,
.ath-latest-media img,
.ath-latest-media video,
.ath-guide-card a img,
.ath-service-card > a img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
/* the card that also carries a caption must not stretch it */
.ath-design-card{ aspect-ratio: auto; }
.ath-design-card > img{ aspect-ratio: 4 / 3; object-fit: cover; }
/* vertical clips keep their own frame */
.ath-video-card{ aspect-ratio: 3 / 4; }

/* every grid keeps one column width so rows line up across sections */
.ath-photo-grid,
.ath-design-album-grid,
.ath-album-grid,
.ath-latest-grid,
.ath-service-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(.65rem, 1.6vw, 1.1rem);
  align-items: start;
}

/* ── headings, centred and on one scale ─────────────────────── */
.ath-section-head,
.section-head,
.ath-about-hero .container > *:not(.ath-about-grid),
.ath-page-hero{
  text-align: center;
}
.ath-section-head > *,
.section-head > *{ margin-inline: auto; }
.ath-section-head p,
.section-head p{ max-width: 52ch; }

h1{ font-size: clamp(1.55rem, 1.2rem + 1.7vw, 2.45rem); line-height: 1.35; }
h2{ font-size: clamp(1.2rem, 1.05rem + .9vw, 1.7rem);  line-height: 1.45; }
h3{ font-size: clamp(1rem, .95rem + .35vw, 1.18rem);   line-height: 1.55; }
h1, h2, h3{ letter-spacing: -.005em; text-wrap: balance; }

/* body copy: one comfortable measure and a readable Arabic leading */
p{ line-height: 1.95; }
.ath-section-head p,
.ath-about-hero p,
.ath-home-hero p{ line-height: 2; }

/* ── colour: one warm scale rather than several browns ───────── */
:root{
  --ath-gold:        #C9A96E;
  --ath-gold-deep:   #A8863F;
  --ath-ink:         #2A1C12;
  --ath-ink-soft:    #6B5B4B;
  --ath-cream:       #FFFDF9;
  --ath-line:        rgba(200,162,74,.28);
}
.section-kicker,
.ath-account-kicker,
.ath-quote-kicker,
.ath-wizard-heading > span{
  color: var(--ath-gold-deep);
  letter-spacing: .06em;
  font-weight: 600;
}
.ath-section-head p,
.section-head p,
.ath-guide-copy p{ color: var(--ath-ink-soft); }

/* ── 52. SITE MAP PAGE ────────────────────────────────────────
   One page listing everything the site holds, built from the
   database so it never falls behind what has been published. */
.ath-sitemap{ padding-block: var(--ath-band); }
.ath-sitemap-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
  align-items: start;
}
.ath-sitemap-block{
  padding: 1.15rem 1.25rem 1.3rem;
  border: 1px solid var(--ath-line, rgba(200,162,74,.28));
  border-radius: 14px;
  background: rgba(200,162,74,.045);
}
.ath-sitemap-block.is-wide{ grid-column: 1 / -1; }
.ath-sitemap-block h2{
  margin: 0 0 .7rem;
  padding-block-end: .5rem;
  border-block-end: 1px solid var(--ath-line, rgba(200,162,74,.28));
  font-size: 1.02rem;
}
.ath-sitemap-block ul{ margin: 0; padding: 0; list-style: none; }
.ath-sitemap-block.is-wide ul{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 0 1.2rem;
}
.ath-sitemap-block li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border-block-end: 1px dashed rgba(200,162,74,.2);
}
.ath-sitemap-block li:last-child{ border-block-end: 0; }
.ath-sitemap-block a{
  display: flex;
  align-items: center;
  flex: 1;
  min-block-size: 44px;
  padding-block: .3rem;
  color: inherit;
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.6;
}
.ath-sitemap-block a:hover,
.ath-sitemap-block a:focus-visible{ color: var(--ath-gold-deep, #A8863F); }
.ath-sitemap-block li > span{
  flex: 0 0 auto;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: rgba(200,162,74,.16);
  font-size: .76rem;
  color: var(--ath-gold-deep, #A8863F);
}
.ath-sitemap-foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-block-start: 1.8rem;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--ath-line, rgba(200,162,74,.28));
  font-size: .95rem;
}
@media (max-width: 520px){
  .ath-sitemap-foot .btn{ flex: 1 1 100%; text-align: center; }
}

/* ── 53. MOBILE SWIPE RAILS ───────────────────────────────────
   On a phone a grid of a dozen cards becomes a very long column
   the visitor has to scroll past. These sections turn into swipe
   rails instead: one row, snapping, thumb-driven. The photo grid
   itself stays a grid — people browsing photographs want to see
   many at once, and a rail would hide most of them.

   Snap is CSS-only and momentum comes from the platform, so this
   costs nothing at runtime and never fights the page scroll. */
@media (max-width: 760px){
  .ath-latest-grid,
  .ath-similar-designs .ath-design-card-grid,
  .ath-home-design-grid,
  .ath-account-stats,
  .ath-account-stats-row{
    display: flex;
    flex-wrap: nowrap;
    gap: .7rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* let the rail bleed to the screen edge so a card is visibly cut
       off — that is what tells a thumb there is more to the side */
    margin-inline: calc(var(--ath-gutter, 1rem) * -1);
    padding-inline: var(--ath-gutter, 1rem);
    padding-block-end: .35rem;
  }
  .ath-latest-grid::-webkit-scrollbar,
  .ath-similar-designs .ath-design-card-grid::-webkit-scrollbar,
  .ath-home-design-grid::-webkit-scrollbar,
  .ath-account-stats::-webkit-scrollbar{ display: none; }

  .ath-latest-grid > *,
  .ath-similar-designs .ath-design-card-grid > *,
  .ath-home-design-grid > *,
  .ath-account-stats > *,
  .ath-account-stats-row > *{
    flex: 0 0 78%;
    max-inline-size: 78%;
    scroll-snap-align: start;
  }
  .ath-account-stats > *,
  .ath-account-stats-row > *{ flex-basis: 46%; max-inline-size: 46%; }

  /* the photo grid stays a grid, two up */
  .ath-photo-grid,
  .ath-album-grid,
  .ath-design-album-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* very small phones: one photo across reads better than two crushed */
@media (max-width: 380px){
  .ath-photo-grid,
  .ath-album-grid,
  .ath-design-album-grid{ grid-template-columns: 1fr; }
  .ath-latest-grid > *,
  .ath-home-design-grid > *{ flex-basis: 86%; max-inline-size: 86%; }
}

/* tablets: three across, which is where the 4:3 tiles sit best */
@media (min-width: 761px) and (max-width: 1024px){
  .ath-photo-grid,
  .ath-album-grid,
  .ath-design-album-grid,
  .ath-latest-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── 54. SHIMMER SAFETY ───────────────────────────────────────
   The gleam paints the heading with a gradient and makes the text
   itself transparent while it passes. If that animation is ever
   paused — a backgrounded tab during load, an engine that skips
   it — a word can be left standing in gold, or worse, invisible.

   Two guards: the transparent fill only applies where the browser
   actually supports clipping a background to text, and the class
   is removed once the pass has played, so the resting state is
   ordinary text with no gradient involved. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .ath-shimmer.is-lit{
    -webkit-text-fill-color: currentColor;
    color: inherit;
    background-image: none;
    animation: none;
  }
}

.ath-shimmer.is-done{
  -webkit-text-fill-color: currentColor;
  color: inherit;
  background-image: none;
  animation: none;
}

/* ── 55. REVIEWS PAGE ─────────────────────────────────────────
   Two scores sit side by side — the Google rating and the on-site
   one — each linking to where it can be verified, next to a card
   that opens Google's own review box. Then the form, then what
   people have already written. */
.ath-reviews{ padding-block: var(--ath-band); }

.ath-review-scores{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: .9rem;
  margin-block-end: 2rem;
}
.ath-review-score{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: 1.2rem 1rem 1.3rem;
  border: 1px solid var(--ath-line, rgba(200,162,74,.28));
  border-radius: 16px;
  background: rgba(200,162,74,.05);
  text-decoration: none;
  color: inherit;
  text-align: center;
}
.ath-review-score.is-google{ transition: border-color .2s ease, background-color .2s ease; }
.ath-review-score.is-google:hover{ border-color: #C9A96E; background: rgba(200,162,74,.1); }
.ath-review-score-label{ font-size: .84rem; opacity: .8; }
.ath-review-score strong{
  font-size: 2.3rem;
  line-height: 1.1;
  color: var(--ath-gold-deep, #A8863F);
}
.ath-review-score-meta{ font-size: .82rem; opacity: .72; }
.ath-review-stars{ color: #E0B84D; letter-spacing: .12em; font-size: 1.05rem; }

.ath-review-cta{
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.2rem 1.3rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #6b3d0c, #8a5314);
  color: #fff;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .25s ease;
}
.ath-review-cta:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(107,61,12,.35); }
.ath-review-cta > span:first-child{
  flex: 0 0 auto;
  inline-size: 46px; block-size: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  font-size: 1.4rem;
  color: #FFD98A;
}
.ath-review-cta strong{ display: block; font-size: 1.02rem; }
.ath-review-cta em{ display: block; font-style: normal; font-size: .84rem; opacity: .82; margin-block-start: .15rem; }

/* the form */
.ath-review-form{
  max-width: 720px;
  margin-inline: auto;
  margin-block-end: 2.4rem;
  padding: clamp(1.2rem, 3.5vw, 1.9rem);
  border: 1px solid var(--ath-line, rgba(200,162,74,.28));
  border-radius: 16px;
  background: #fff;
}
.ath-review-form h2{ margin: 0 0 1rem; text-align: center; font-size: 1.15rem; }

/* stars as radios: rendered right-to-left so hover fills up to the pick */
.ath-review-stars-input{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: .15rem;
  margin-block-end: 1.3rem;
}
.ath-review-stars-input input{
  position: absolute;
  opacity: 0;
  inline-size: 1px; block-size: 1px;
}
.ath-review-stars-input label{
  font-size: 2.1rem;
  line-height: 1;
  color: rgba(200,162,74,.3);
  cursor: pointer;
  padding: .1rem .12rem;
  min-inline-size: 44px;
  min-block-size: 44px;
  display: grid;
  place-items: center;
  transition: color .15s ease, transform .15s ease;
}
.ath-review-stars-input label:hover,
.ath-review-stars-input label:hover ~ label,
.ath-review-stars-input input:checked ~ label{ color: #E0B84D; }
.ath-review-stars-input label:hover{ transform: scale(1.12); }
.ath-review-stars-input input:focus-visible + label{ outline: 3px solid #C9A96E; outline-offset: 2px; border-radius: 8px; }

.ath-review-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: .9rem 1rem;
  margin-block-end: .9rem;
}
.ath-review-form label{ display: block; font-size: .9rem; }
.ath-review-form label > span{ display: block; margin-block-end: .35rem; font-weight: 600; }
.ath-review-form input:not([type="radio"]),
.ath-review-form textarea{
  inline-size: 100%;
  min-block-size: 48px;
  padding: .65rem .85rem;
  border: 1.5px solid rgba(200,162,74,.38);
  border-radius: 11px;
  background: #fffdf9;
  font: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ath-review-form textarea{ min-block-size: 108px; resize: vertical; }
.ath-review-form input:focus,
.ath-review-form textarea:focus{
  outline: none;
  border-color: #C9A96E;
  box-shadow: 0 0 0 3px rgba(200,162,74,.22);
}
.ath-review-body{ margin-block-end: 1.1rem; }
.ath-review-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--ath-line, rgba(200,162,74,.28));
}
.ath-review-actions p{ margin: 0; flex: 1 1 260px; font-size: .84rem; line-height: 1.75; opacity: .78; }

/* the list */
.ath-review-list-title{ text-align: center; margin-block-end: 1.2rem; }
.ath-review-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: .9rem;
}
.ath-review-card{
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--ath-line, rgba(200,162,74,.28));
  border-radius: 14px;
  background: #fff;
}
.ath-review-card.is-featured{ border-color: #C9A96E; background: rgba(200,162,74,.06); }
.ath-review-card header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.ath-review-card header time{ font-size: .8rem; opacity: .65; }
.ath-review-card p{ margin: 0; font-size: .93rem; line-height: 1.9; }
.ath-review-card footer{
  margin-block-start: auto;
  padding-block-start: .6rem;
  border-block-start: 1px dashed rgba(200,162,74,.25);
  font-size: .85rem;
}
.ath-review-card footer strong{ display: block; }
.ath-review-card footer span{ opacity: .7; font-size: .8rem; }
.ath-review-empty{
  max-width: 52ch;
  margin-inline: auto;
  text-align: center;
  line-height: 2;
  opacity: .8;
}
.sr-only{
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 520px){
  .ath-review-actions .btn{ flex: 1 1 100%; }
}

/* ── 56. LOCATION AND SUGGESTIONS ─────────────────────────────
   Three equal routes to the same answer, then the field. Nothing
   here is required, so none of it should look like a form step. */
.ath-loc-ways{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block: .7rem;
}
.ath-loc-way{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: 1 1 auto;
  justify-content: center;
  min-block-size: 46px;
  padding: .55rem 1rem;
  border: 1.5px solid rgba(200,162,74,.4);
  border-radius: 11px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .12s ease;
}
.ath-loc-way:hover{ border-color: #C9A96E; background: rgba(200,162,74,.09); }
.ath-loc-way:active{ transform: translateY(1px); }
.ath-loc-way[disabled]{ opacity: .55; cursor: default; }
.ath-loc-way > span:first-child{ font-size: 1.05rem; line-height: 1; }

.ath-loc-status{
  margin: .5rem 0 0;
  padding: .5rem .75rem;
  border-radius: 9px;
  font-size: .86rem;
  line-height: 1.7;
  background: rgba(200,162,74,.12);
}
.ath-loc-status[data-tone="ok"]{ background: #eaf7ee; color: #1c6b34; }
.ath-loc-status[data-tone="warn"]{ background: #fdf3e6; color: #8a5a12; }

/* the quiet typing help: chips under the field, only while focused */
.ath-suggest{
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-block-start: .45rem;
}
.ath-suggest-chip{
  min-block-size: 38px;
  padding: .35rem .8rem;
  border: 1px solid rgba(200,162,74,.35);
  border-radius: 999px;
  background: rgba(200,162,74,.07);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.ath-suggest-chip:hover,
.ath-suggest-chip:focus-visible{ background: rgba(200,162,74,.2); border-color: #C9A96E; }
@media (pointer: coarse){ .ath-suggest-chip{ min-block-size: 44px; } }

@media (max-width: 520px){
  .ath-loc-way{ flex: 1 1 100%; }
}

/* ── 57. SHARE PANEL ──────────────────────────────────────────
   Only seen on desktop, where the OS has no share sheet of its
   own. On a phone the native sheet opens instead and this never
   renders. */
.ath-share-panel{
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(20,13,4,.62);
  backdrop-filter: blur(3px);
  animation: ath-veil-in .2s ease forwards;
}
.ath-share-panel-inner{
  inline-size: min(100%, 380px);
  padding: 1.4rem 1.4rem 1.2rem;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  text-align: center;
}
.ath-share-panel-inner > strong{
  display: block;
  margin-block-end: 1rem;
  font-size: 1rem;
  line-height: 1.6;
}
.ath-share-targets{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: .5rem;
  margin-block-end: .9rem;
}
.ath-share-target{
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: .55rem .7rem;
  border: 1.5px solid rgba(200,162,74,.35);
  border-radius: 11px;
  color: inherit;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  transition: background-color .18s ease, border-color .18s ease;
}
.ath-share-target:hover{ background: rgba(200,162,74,.12); border-color: #C9A96E; }
.ath-share-target.is-wa{ border-color: rgba(37,211,102,.55); color: #128C4A; }
.ath-share-target.is-wa:hover{ background: rgba(37,211,102,.12); border-color: #25D366; }

.ath-share-copy,
.ath-share-close{
  inline-size: 100%;
  min-block-size: 48px;
  border-radius: 11px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ath-share-copy{
  border: 0;
  background: #6b3d0c;
  color: #fff;
  margin-block-end: .5rem;
}
.ath-share-copy:hover{ background: #855012; }
.ath-share-close{
  border: 1px solid rgba(200,162,74,.35);
  background: #fff;
  color: inherit;
}
.ath-share-close:hover{ background: rgba(200,162,74,.08); }

/* the button confirms the copy in place */
[data-ath-share].is-shared,
.ath-share-current.is-shared{
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #fff !important;
}

/* ── 58. INSTALL BAR ──────────────────────────────────────────
   Sits above the bottom nav, never over it, and only on a phone. */
.ath-install-bar{
  position: fixed;
  inset-inline: .6rem;
  inset-block-end: calc(env(safe-area-inset-bottom) + 74px);
  z-index: 9990;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  border-radius: 16px;
  background: #241703;
  color: #f4ead9;
  box-shadow: 0 14px 38px rgba(0,0,0,.4);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.ath-install-bar.is-in{ transform: none; opacity: 1; }
.ath-install-text{ flex: 1 1 190px; min-inline-size: 0; }
.ath-install-text strong{ display: block; font-size: .96rem; }
.ath-install-text span{ display: block; font-size: .82rem; opacity: .82; line-height: 1.65; margin-block-start: .15rem; }
.ath-install-actions{ display: flex; gap: .45rem; flex: 0 0 auto; }
.ath-install-go,
.ath-install-later{
  min-block-size: 44px;
  padding: .5rem 1.1rem;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
}
.ath-install-go{ border: 0; background: #C9A96E; color: #2a1a06; }
.ath-install-later{ border: 1px solid rgba(244,234,217,.3); background: transparent; color: #f4ead9; }
@media (prefers-reduced-motion: reduce){
  .ath-install-bar{ transition: none; transform: none; opacity: 1; }
}

/* ── 59. ALBUM PREVIEW STRIP ──────────────────────────────────
   The thumbnails under each album cover were rendering at a 0.28
   ratio — tall slivers, all different from the cover above them.
   An earlier rule set aspect-ratio:1 on them but a later grid
   stretched the row, so the box no longer matched the picture.
   Pin the ratio on the tile and let the image fill it. */
.ath-album-preview-strip{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-block-start: 6px;
}
.ath-album-preview-strip img{
  aspect-ratio: 1 / 1 !important;
  inline-size: 100%;
  block-size: auto !important;
  max-block-size: none;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ── 60. STRIP RATIO OVERRIDE ─────────────────────────────────
   Needs the extra ancestors to out-rank a legacy
   `height: 100% !important` that applies to every image. */
body .ath-album-card .ath-album-preview-strip{
  grid-auto-rows: auto;
}
body .ath-album-card .ath-album-preview-strip img,
body:not(.admin-body) .ath-album-preview-strip img{
  aspect-ratio: 1 / 1 !important;
  block-size: auto !important;
  height: auto !important;
  min-block-size: 0 !important;
  max-block-size: none !important;
  inline-size: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* ── 61. FAQ ACCORDION ────────────────────────────────────────
   Opening one answer closes the others (native `details name`),
   and the panel eases in rather than snapping. */
@keyframes ath-faq-open{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: none; }
}
.ath-faq-item{ transition: border-color .2s ease, background-color .2s ease; }
.ath-faq-item[open]{ border-color: rgba(200,162,74,.5); background: rgba(200,162,74,.05); }
.ath-faq-item > summary{ cursor: pointer; min-block-size: 48px; display: flex; align-items: center; gap: .6rem; }
.ath-faq-item > summary::marker{ content: ''; }
.ath-faq-item > summary::-webkit-details-marker{ display: none; }
.ath-faq-item > summary::after{ content: '+'; margin-inline-start: auto; font-size: 1.25rem; line-height: 1; color: #C9A96E; transition: transform .25s ease; }
.ath-faq-item[open] > summary::after{ content: '−'; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce){ .ath-faq-item, .ath-faq-item > summary::after{ transition: none; } }


/* ── 62. SCENE: THE STAGE LAYER ───────────────────────────────
   The set dressing for the whole site, built to read as one of
   our own koshas: a lit stage, moving heads sweeping across it,
   a string of hanging lights above, a carpet running in, and
   glass frames around the designs.

   Everything here animates transform and opacity only, so it
   stays on the compositor and never triggers layout or paint.
   Every band is decorative: pointer-events are off throughout,
   and the whole section collapses under reduced motion. */

.ath-scene-canvas{
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  contain: strict;
}

/* A stage band is any full-width hero or call-to-action. The
   pseudo-elements carry the lighting so no extra markup is needed. */
.ath-home-hero,
.ath-page-hero,
.ath-album-service-hero,
.ath-quote-hero,
.ath-home-final-cta,
.ath-cta-band{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* ── moving heads ──────────────────────────────────────────── */
.ath-home-hero::before,
.ath-page-hero::before,
.ath-album-service-hero::before,
.ath-home-final-cta::before,
.ath-cta-band::before{
  content: '';
  position: absolute;
  inset-block-start: -42%;
  inset-inline-start: 8%;
  inline-size: 34%;
  block-size: 180%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 238, 200, .30) 0%,
    rgba(255, 232, 186, .14) 38%,
    rgba(255, 228, 178, 0) 78%);
  filter: blur(14px);
  transform-origin: 50% 0%;
  animation: ath-head-left 13s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform;
}

.ath-home-hero::after,
.ath-page-hero::after,
.ath-album-service-hero::after,
.ath-home-final-cta::after,
.ath-cta-band::after{
  content: '';
  position: absolute;
  inset-block-start: -42%;
  inset-inline-end: 8%;
  inline-size: 30%;
  block-size: 180%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(214, 226, 255, .24) 0%,
    rgba(206, 220, 255, .11) 40%,
    rgba(200, 216, 255, 0) 80%);
  filter: blur(16px);
  transform-origin: 50% 0%;
  animation: ath-head-right 17s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform;
}

@keyframes ath-head-left{
  from{ transform: rotate(-15deg) scaleY(.96); opacity: .75; }
  to  { transform: rotate(13deg)  scaleY(1.04); opacity: 1; }
}

@keyframes ath-head-right{
  from{ transform: rotate(14deg)  scaleY(1.03); opacity: .95; }
  to  { transform: rotate(-12deg) scaleY(.97);  opacity: .7; }
}

/* ── hanging lights ────────────────────────────────────────── */
.ath-scene-lights{
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 46px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.ath-scene-lights i{
  position: absolute;
  inset-block-start: 0;
  inline-size: 2px;
  background: linear-gradient(to bottom, rgba(200,162,74,.55), rgba(200,162,74,.12));
  transform-origin: 50% 0%;
  animation: ath-bulb-sway 6s ease-in-out infinite alternate;
}

.ath-scene-lights i::after{
  content: '';
  position: absolute;
  inset-block-end: -7px;
  inset-inline-start: -4px;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d9, #f0c86a 55%, #c8a24a);
  box-shadow: 0 0 12px 3px rgba(246, 208, 126, .55);
  animation: ath-bulb-glow 3.4s ease-in-out infinite;
}

@keyframes ath-bulb-sway{
  from{ transform: rotate(-2.5deg); }
  to  { transform: rotate(2.5deg); }
}

@keyframes ath-bulb-glow{
  0%, 100%{ opacity: .55; }
  50%     { opacity: 1; }
}

/* ── red carpet ────────────────────────────────────────────── */
.ath-scene-carpet{
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  inline-size: min(560px, 78vw);
  block-size: 120px;
  z-index: -1;
  pointer-events: none;
  transform: translateX(-50%);
  /* the trapezoid is what sells the perspective — a plain rectangle
     reads as a stripe, not as a runner going away from the viewer */
  clip-path: polygon(34% 0%, 66% 0%, 100% 100%, 0% 100%);
  background:
    linear-gradient(to bottom, rgba(122, 18, 32, .0), rgba(138, 20, 36, .78)),
    linear-gradient(to right,
      rgba(0,0,0,.28) 0 4%, rgba(0,0,0,0) 4% 96%, rgba(0,0,0,.28) 96% 100%);
}

.ath-scene-carpet::before,
.ath-scene-carpet::after{
  content: '';
  position: absolute;
  inset-block: 0;
  inline-size: 7px;
  background: linear-gradient(to bottom, rgba(200,162,74,0), rgba(219,186,110,.75));
}

.ath-scene-carpet::before{ inset-inline-start: 6%; transform: skewX(15deg); }
.ath-scene-carpet::after { inset-inline-end: 6%;  transform: skewX(-15deg); }

/* ── stage floor ───────────────────────────────────────────── */
.ath-scene-floor{
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 74px;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0), rgba(24, 16, 8, .45)),
    repeating-linear-gradient(to right,
      rgba(200,162,74,.10) 0 2px, rgba(200,162,74,0) 2px 46px);
  mask-image: linear-gradient(to bottom, transparent, #000 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%);
}

/* ── glass frames on our own designs ───────────────────────── */
.ath-home-design-card,
.ath-design-album-card,
.ath-design-card,
.ath-album-card,
.ath-latest-card{
  position: relative;
}

.ath-home-design-card::after,
.ath-design-album-card::after,
.ath-design-card::after,
.ath-album-card::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  /* a gradient border without a second element: paint the gradient,
     then punch out everything but the 1px ring */
  background: linear-gradient(135deg,
    rgba(255,255,255,.62) 0%,
    rgba(200,162,74,.42) 32%,
    rgba(255,255,255,.10) 55%,
    rgba(200,162,74,.50) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .55;
  transition: opacity .35s ease;
}

.ath-home-design-card:hover::after,
.ath-design-album-card:hover::after,
.ath-design-card:hover::after,
.ath-album-card:hover::after,
.ath-home-design-card:focus-within::after,
.ath-album-card:focus-within::after{
  opacity: 1;
}

/* ── sparkle sweep on the primary buttons ──────────────────── */
.ath-btn-primary,
.ath-cta-primary,
.btn-primary{
  position: relative;
  overflow: hidden;
}

.ath-btn-primary::after,
.ath-cta-primary::after,
.btn-primary::after{
  content: '';
  position: absolute;
  inset-block: -60%;
  inline-size: 42%;
  inset-inline-start: -60%;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: ath-btn-sweep 4.6s ease-in-out infinite;
}

@keyframes ath-btn-sweep{
  0%, 62%{ inset-inline-start: -60%; }
  92%, 100%{ inset-inline-start: 130%; }
}

/* ── the scenery strip ─────────────────────────────────────── */
.ath-scene-strip{
  position: relative;
  inline-size: 100%;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  /* it is a divider, so it must never introduce a scrollbar or
     compete with real content for the reader's attention */
  opacity: .85;
}

.ath-scene-strip svg{
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 190px;
}

.ath-scene-strip .ath-scene-horse{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ath-horse-prance 2.4s ease-in-out infinite;
}

.ath-scene-strip .ath-scene-carriage{
  transform-box: fill-box;
  animation: ath-carriage-roll 26s linear infinite;
}

.ath-scene-strip .ath-scene-wheel{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ath-wheel-spin 2.6s linear infinite;
}

.ath-scene-strip .ath-scene-beat{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ath-beat 1.4s ease-in-out infinite;
}

.ath-scene-strip .ath-scene-disc{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ath-wheel-spin 3.6s linear infinite;
}

.ath-scene-strip .ath-scene-string{
  animation: ath-string-pluck 2.1s ease-in-out infinite;
}

@keyframes ath-horse-prance{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  35%     { transform: translateY(-7px) rotate(-3.5deg); }
  60%     { transform: translateY(-2px) rotate(1.5deg); }
}

@keyframes ath-carriage-roll{
  from{ transform: translateX(-22%); }
  to  { transform: translateX(122%); }
}

@keyframes ath-wheel-spin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

@keyframes ath-beat{
  0%, 100%{ transform: scaleY(1); }
  22%     { transform: scaleY(.88); }
  45%     { transform: scaleY(1.05); }
}

@keyframes ath-string-pluck{
  0%, 100%{ opacity: .45; }
  40%     { opacity: 1; }
}

/* ── restraint ─────────────────────────────────────────────── */

/* Phones get the lighting but not the scenery: the strip is the one
   piece here with real drawing cost, and it is the least useful on a
   narrow screen. */
@media (max-width: 720px){
  .ath-scene-strip{ display: none; }
  .ath-scene-carpet{ inline-size: 86vw; block-size: 88px; }
  .ath-scene-lights{ block-size: 34px; }
}

/* Every animation in this section is decoration. None of it should
   run for a reader who asked for stillness. */
@media (prefers-reduced-motion: reduce){
  .ath-scene-canvas{ display: none; }
  .ath-home-hero::before, .ath-home-hero::after,
  .ath-page-hero::before, .ath-page-hero::after,
  .ath-album-service-hero::before, .ath-album-service-hero::after,
  .ath-home-final-cta::before, .ath-home-final-cta::after,
  .ath-cta-band::before, .ath-cta-band::after,
  .ath-scene-lights i, .ath-scene-lights i::after,
  .ath-scene-strip .ath-scene-horse,
  .ath-scene-strip .ath-scene-carriage,
  .ath-scene-strip .ath-scene-wheel,
  .ath-scene-strip .ath-scene-beat,
  .ath-scene-strip .ath-scene-disc,
  .ath-scene-strip .ath-scene-string,
  .ath-btn-primary::after, .ath-cta-primary::after, .btn-primary::after{
    animation: none !important;
  }
}


/* ── 63. SCENE REFINEMENT ─────────────────────────────────────
   Second pass over section 62 after review. Three changes:

     · every effect is now gated on a class the admin panel puts
       on <html>, so the panel can switch any of them off live;
     · the bulbs are real glass — an envelope, a filament and a
       brass cap — instead of a flat dot;
     · the palette is one warm champagne-to-burgundy ramp. The
       cool blue in the first pass fought the brand and read as
       decoration for its own sake.

   The rule throughout: fewer objects, better made. */

:root{
  --fx-champagne: #f4e4bd;
  --fx-gold:      #c8a24a;
  --fx-brass:     #8a6524;
  --fx-deep:      #4d3a16;
  --fx-wine:      #8d1b34;
  --fx-glass:     rgba(255, 252, 245, .10);
}

/* ── the switchboard ───────────────────────────────────────────
   Nothing in the decorative layer renders unless the panel says so. */
.fx-off .ath-scene-canvas,
.fx-off .ath-scene-lights,
.fx-off .ath-scene-carpet,
.fx-off .ath-scene-floor,
.fx-off .ath-scene-strip,
.fx-off .ath-scene-glass,
.fx-off .ath-transition{ display: none !important; }

.fx-off .ath-home-hero::before, .fx-off .ath-home-hero::after,
.fx-off .ath-page-hero::before, .fx-off .ath-page-hero::after,
.fx-off .ath-album-service-hero::before, .fx-off .ath-album-service-hero::after,
.fx-off .ath-home-final-cta::before, .fx-off .ath-home-final-cta::after,
.fx-off .ath-cta-band::before, .fx-off .ath-cta-band::after{ content: none; }

html:not(.fx-lights) .ath-scene-lights{ display: none; }
html:not(.fx-carpet) .ath-scene-carpet,
html:not(.fx-carpet) .ath-scene-floor{ display: none; }
html:not(.fx-scenery) .ath-scene-strip{ display: none; }

html:not(.fx-beams) .ath-home-hero::before,
html:not(.fx-beams) .ath-home-hero::after,
html:not(.fx-beams) .ath-page-hero::before,
html:not(.fx-beams) .ath-page-hero::after,
html:not(.fx-beams) .ath-album-service-hero::before,
html:not(.fx-beams) .ath-album-service-hero::after,
html:not(.fx-beams) .ath-home-final-cta::before,
html:not(.fx-beams) .ath-home-final-cta::after,
html:not(.fx-beams) .ath-cta-band::before,
html:not(.fx-beams) .ath-cta-band::after{ content: none; }

html:not(.fx-frames) .ath-home-design-card::after,
html:not(.fx-frames) .ath-design-album-card::after,
html:not(.fx-frames) .ath-design-card::after,
html:not(.fx-frames) .ath-album-card::after{ content: none; }

html:not(.fx-shimmer) .ath-btn-primary::after,
html:not(.fx-shimmer) .ath-cta-primary::after,
html:not(.fx-shimmer) .btn-primary::after{ content: none; }

/* ── glass bulbs ───────────────────────────────────────────────
   The wire, the brass cap, the glass envelope and the filament are
   four separate layers so the light reads as coming from inside the
   glass rather than being painted on top of it. */
.ath-scene-lights{ block-size: 60px; }

.ath-scene-lights i{
  inline-size: 1px;
  background: linear-gradient(to bottom,
    rgba(138, 101, 36, .70), rgba(138, 101, 36, .30));
  animation-duration: 7.5s;
}

/* brass cap */
.ath-scene-lights i::before{
  content: '';
  position: absolute;
  inset-block-end: -4px;
  inset-inline-start: -3.5px;
  inline-size: 8px;
  block-size: 5px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(to bottom, #b08c3e, #6f5217);
}

/* glass envelope: teardrop, with a filament glow at its heart */
.ath-scene-lights i::after{
  content: '';
  position: absolute;
  inset-block-end: -19px;
  inset-inline-start: -6.5px;
  inline-size: 14px;
  block-size: 17px;
  /* the asymmetric radius is what makes it a bulb and not a circle */
  border-radius: 48% 48% 50% 50% / 62% 62% 38% 38%;
  background:
    radial-gradient(circle at 50% 62%,
      rgba(255, 248, 224, .95) 0%,
      rgba(246, 214, 140, .85) 26%,
      rgba(222, 176, 88, .45) 52%,
      rgba(200, 162, 74, .18) 74%,
      rgba(200, 162, 74, .06) 100%),
    linear-gradient(150deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 44%);
  box-shadow:
    0 0 10px 2px rgba(246, 210, 132, .40),
    0 0 26px 8px rgba(226, 178, 92, .16),
    inset 0 -3px 5px rgba(138, 101, 36, .22);
  animation: ath-bulb-glow 5.2s ease-in-out infinite;
}

/* the string as a whole breathes, rather than each bulb blinking
   independently — a row of individually flashing dots reads as a fairground */
@keyframes ath-bulb-glow{
  0%, 100%{ opacity: .78; filter: saturate(.92); }
  50%     { opacity: 1;   filter: saturate(1.08); }
}

@keyframes ath-bulb-sway{
  from{ transform: rotate(-1.6deg); }
  to  { transform: rotate(1.6deg); }
}

/* ── warm-only beams ──────────────────────────────────────────
   The second head was blue in the first pass. Both are champagne
   now, at different temperatures, so they read as two fixtures
   rather than two colours. */
.ath-home-hero::after,
.ath-page-hero::after,
.ath-album-service-hero::after,
.ath-home-final-cta::after,
.ath-cta-band::after{
  background: linear-gradient(
    to bottom,
    rgba(255, 246, 224, .22) 0%,
    rgba(244, 228, 189, .10) 40%,
    rgba(244, 228, 189, 0) 80%);
}

/* ── the glass plate ──────────────────────────────────────────
   A fixed sheet of very slightly tinted glass behind the content,
   carrying a slow highlight. It is what gives the page the gloss
   Ahmed asked for without putting another object on the screen. */
.ath-scene-glass{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  contain: strict;
  opacity: .55;
  background:
    radial-gradient(120% 60% at 50% -10%,
      rgba(255, 250, 238, .16) 0%, rgba(255, 250, 238, 0) 60%),
    radial-gradient(90% 50% at 8% 110%,
      rgba(200, 162, 74, .10) 0%, rgba(200, 162, 74, 0) 65%),
    radial-gradient(90% 50% at 92% 110%,
      rgba(141, 27, 52, .07) 0%, rgba(141, 27, 52, 0) 65%);
}

.ath-scene-glass::after{
  content: '';
  position: absolute;
  inset-block: -30%;
  inline-size: 38%;
  inset-inline-start: -45%;
  transform: skewX(-14deg);
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.055) 50%,
    rgba(255,255,255,0) 100%);
  animation: ath-glass-sheen 18s ease-in-out infinite;
}

@keyframes ath-glass-sheen{
  0%, 70%  { inset-inline-start: -45%; }
  96%, 100%{ inset-inline-start: 118%; }
}

/* ── page transition ──────────────────────────────────────────
   A short glass wipe carrying geometric kosha outlines, shown while
   the next page loads. Purely a cover for the navigation gap: it
   removes itself on pageshow, and never blocks input. */
.ath-transition{
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  background:
    radial-gradient(70% 70% at 50% 50%,
      rgba(28, 20, 10, .58) 0%, rgba(28, 20, 10, .86) 100%);
  backdrop-filter: blur(7px) saturate(1.15);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  animation: ath-transition-in .42s ease forwards;
}

.ath-transition.is-out{
  animation: ath-transition-out .34s ease forwards;
}

@keyframes ath-transition-in{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

@keyframes ath-transition-out{
  from{ opacity: 1; }
  to  { opacity: 0; }
}

.ath-transition svg{
  inline-size: min(280px, 56vw);
  block-size: auto;
  overflow: visible;
}

/* Each arch draws itself in, then the set breathes. The stagger is
   what makes it read as a kosha being built rather than a spinner. */
.ath-transition .ath-arch{
  fill: none;
  stroke: url(#athArchGold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  animation: ath-arch-draw 1.15s cubic-bezier(.22,.61,.36,1) forwards;
}

.ath-transition .ath-arch:nth-child(2){ animation-delay: .10s; }
.ath-transition .ath-arch:nth-child(3){ animation-delay: .20s; }
.ath-transition .ath-arch:nth-child(4){ animation-delay: .30s; }

.ath-transition .ath-arch-glow{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ath-arch-pulse 2.2s ease-in-out infinite;
}

@keyframes ath-arch-draw{
  to{ stroke-dashoffset: 0; }
}

@keyframes ath-arch-pulse{
  0%, 100%{ opacity: .35; transform: scale(.985); }
  50%     { opacity: .8;  transform: scale(1.015); }
}

/* ── restraint, second pass ───────────────────────────────────  */
@media (max-width: 720px){
  /* backdrop-filter over a full screen is the most expensive thing in
     this file; phones get the tint without the blur */
  .ath-transition{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ath-scene-glass{ opacity: .4; }
  .ath-scene-lights{ block-size: 46px; }
}

@media (prefers-reduced-motion: reduce){
  .ath-scene-glass::after,
  .ath-transition,
  .ath-transition .ath-arch,
  .ath-transition .ath-arch-glow{ animation: none !important; }
  .ath-transition{ display: none !important; }
}

/* ── 64. CENTRED COMPOSITION ──────────────────────────────────
   The first pass hung the effects off the two edges and ran the
   scenery past as a left-to-right parade. Reviewed as lopsided:
   the composition has to be built about the centre line, the way
   a kosha is, with everything either on the axis or mirrored
   evenly across it. */

/* The two heads now converge on the centre instead of raking in
   from the corners, so the brightest point of the band is the
   middle — where the heading and the call to action sit. */
.ath-home-hero::before,
.ath-page-hero::before,
.ath-album-service-hero::before,
.ath-home-final-cta::before,
.ath-cta-band::before{
  inset-inline-start: 26%;
  inline-size: 26%;
  animation-name: ath-head-in-left;
}

.ath-home-hero::after,
.ath-page-hero::after,
.ath-album-service-hero::after,
.ath-home-final-cta::after,
.ath-cta-band::after{
  inset-inline-end: 26%;
  inline-size: 26%;
  animation-name: ath-head-in-right;
}

@keyframes ath-head-in-left{
  from{ transform: rotate(-9deg)  scaleY(.97); opacity: .72; }
  to  { transform: rotate(7deg)   scaleY(1.03); opacity: 1; }
}

@keyframes ath-head-in-right{
  from{ transform: rotate(9deg)   scaleY(1.03); opacity: 1; }
  to  { transform: rotate(-7deg)  scaleY(.97);  opacity: .72; }
}

/* The string of bulbs hangs as one catenary centred on the band,
   deepest in the middle. The per-bulb drop is set from script. */
.ath-scene-lights{
  inline-size: min(1180px, 92%);
  inset-inline: 0;
  margin-inline: auto;
}

/* A centred symmetrical panel replaces the parade. */
.ath-scene-strip{
  display: flex;
  justify-content: center;
  padding-block: 6px 10px;
}

.ath-scene-strip svg{
  inline-size: min(860px, 92%);
  max-block-size: 150px;
}

/* Mirrored pairs breathe together, out of phase with the centre,
   so the eye is led to the middle and not along the row. */
.ath-scene-strip .ath-scene-mirror{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ath-mirror-lift 5.6s ease-in-out infinite;
}

.ath-scene-strip .ath-scene-mirror.is-outer{ animation-delay: .7s; }

.ath-scene-strip .ath-scene-centre{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ath-centre-breathe 6.4s ease-in-out infinite;
}

@keyframes ath-mirror-lift{
  0%, 100%{ transform: translateY(0);     opacity: .72; }
  50%     { transform: translateY(-4px);  opacity: 1; }
}

@keyframes ath-centre-breathe{
  0%, 100%{ transform: scale(1);     opacity: .85; }
  50%     { transform: scale(1.025); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .ath-scene-strip .ath-scene-mirror,
  .ath-scene-strip .ath-scene-centre{ animation: none !important; }
}

/* ── 65. SECTION ORNAMENT ─────────────────────────────────────
   A geometric watermark behind every section heading, chosen from
   what the section is about — an arch for the koshas, an aperture
   for photography, an equaliser for the DJ, a rosette for flowers.

   It sits behind the text at low opacity and draws itself in once
   when the section is first reached. It must never make the
   heading harder to read: that is the whole test for this rule. */

.ath-section-head{ position: relative; }

.ath-section-motif{
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 118px;
  block-size: 118px;
  z-index: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: .12;
}

/* the heading itself has to sit above its own watermark */
.ath-section-head > *:not(.ath-section-motif){
  position: relative;
  z-index: 1;
}

.ath-motif-art{
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.ath-motif-art .ath-arch{
  fill: none;
  stroke: url(#athArchGold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Draw once on entry rather than looping: a heading ornament that
   keeps re-animating pulls the eye away from the words under it. */
.ath-section-head.is-in .ath-section-motif .ath-arch,
.ath-section-head.is-revealed .ath-section-motif .ath-arch{
  stroke-dasharray: 340;
  animation: ath-motif-draw 1.5s cubic-bezier(.22, .61, .36, 1) both;
}

.ath-section-head.is-in .ath-section-motif .ath-arch:nth-child(2){ animation-delay: .12s; }
.ath-section-head.is-in .ath-section-motif .ath-arch:nth-child(3){ animation-delay: .24s; }
.ath-section-head.is-in .ath-section-motif .ath-arch:nth-child(4){ animation-delay: .36s; }
.ath-section-head.is-in .ath-section-motif .ath-arch:nth-child(5){ animation-delay: .48s; }

@keyframes ath-motif-draw{
  from{ stroke-dashoffset: 340; }
  to  { stroke-dashoffset: 0; }
}

/* Darker bands need a touch more presence to read at all. */
.ath-home-final-cta .ath-section-motif,
.ath-cta-band .ath-section-motif{ opacity: .18; }

@media (max-width: 720px){
  .ath-section-motif{ inline-size: 88px; block-size: 88px; opacity: .09; }
}

@media (prefers-reduced-motion: reduce){
  .ath-section-motif .ath-arch{
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}