/* =====================================================================
   Anna Gruzman Photography — website UI kit styles
   Loads on top of ../../colors_and_type.css
   ===================================================================== */

.ag-page { overflow-x: hidden; }

/* ---------- Layout helpers ---------- */
.ag-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.ag-section { padding: 78px 0; }
.ag-section.tight { padding: 48px 0; }
.ag-section.sand { background: var(--color-sand); }
.ag-section.wash { background: var(--color-sage-mist); }
.ag-section.ivory { background: var(--color-ivory); }

.ag-rule { margin: var(--space-7) auto; height: 1px; background: var(--line); position: relative; }
.ag-rule-diamond { position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); background: var(--bg-page); padding: 0 12px; color: var(--color-sage); font-size: 11px; }

/* ---------- Section head ---------- */
.ag-sechead { max-width: 720px; margin-bottom: var(--space-6); }
.ag-sechead.center { margin-inline: auto; text-align: center; }
.ag-sechead .eyebrow { margin-bottom: 14px; }
.ag-sechead h2 { margin-bottom: 18px; text-wrap: balance; }
.ag-sechead .lead { margin: 0; }

/* ---------- Photo placeholder ---------- */
.ag-photo {
  width: 100%;
  background: linear-gradient(135deg, var(--color-sand), var(--color-ivory));
  background:
    repeating-linear-gradient(45deg, rgba(156,167,135,0.05) 0 14px, transparent 14px 28px),
    var(--color-sand);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.ag-photo.has-image { background: var(--color-sand); }
.ag-photo-inner { display:flex; flex-direction: column; align-items:center; gap: 10px; color: var(--color-pebble); }
.ag-photo-mark { font-size: 30px; color: var(--color-sage); opacity: 0.65; }
.ag-photo-label { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-stone); }

/* ---------- Header ---------- */
.ag-header { position: sticky; top: 0; z-index: 50; background: var(--color-cream); border-bottom: 1px solid transparent; transition: all var(--dur-base) var(--ease-soft); }
.ag-header.scrolled { background: rgba(246,241,234,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.ag-header-inner { max-width: 1180px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: padding var(--dur-base) var(--ease-soft); }
.ag-header.scrolled .ag-header-inner { padding-top: 11px; padding-bottom: 11px; }
.ag-logo img { height: 60px; display: block; transition: height var(--dur-base) var(--ease-soft); }
.ag-header.scrolled .ag-logo img { height: 46px; }
/* Text wordmark logo */
.ag-logo-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; direction: ltr; line-height: 1; flex-shrink: 0; }
.ag-logo-name { font-family: var(--font-script); font-style: italic; font-weight: 500; font-size: 30px; color: var(--color-ink); letter-spacing: 0.01em; white-space: nowrap; transition: font-size var(--dur-base) var(--ease-soft), color var(--dur-base); }
.ag-logo-sub { font-family: var(--font-eyebrow); font-weight: 500; font-size: 9.5px; letter-spacing: 0.46em; text-transform: uppercase; color: var(--color-sage-deep); padding-inline-start: 3px; white-space: nowrap; transition: font-size var(--dur-base) var(--ease-soft); }
.ag-header.scrolled .ag-logo-name { font-size: 26px; }
.ag-header.scrolled .ag-logo-sub { font-size: 9px; letter-spacing: 0.38em; }
.ag-logo-text:hover .ag-logo-name { color: var(--color-mocha); }
.ag-nav { display: flex; gap: 28px; flex: 1; justify-content: center; }
.ag-nav a { font-family: var(--font-eyebrow); font-size: 11.5px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-1); font-weight: 500; position: relative; padding: 4px 0; }
.ag-nav a::after { content: ""; position: absolute; bottom: -2px; right: 0; left: 0; height: 1px; background: var(--color-sage-deep); transform: scaleX(0); transition: transform var(--dur-base) var(--ease-soft); }
.ag-nav a:hover::after, .ag-nav a.active::after { transform: scaleX(1); }
.ag-nav a.active { color: var(--color-sage-deep); }
.ag-header-phone { font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.08em; color: var(--fg-2); white-space: nowrap; }
.ag-burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 6px; }
.ag-burger span { width: 22px; height: 1.5px; background: var(--fg-1); display: block; }
.ag-nav-mobile { display: none; flex-direction: column; padding: 12px 24px 20px; gap: 14px; border-top: 1px solid var(--line); }
.ag-nav-mobile a { font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* ---------- Hero ---------- */
.ag-hero { position: relative; min-height: 96vh; display: flex; align-items: flex-end; background: var(--color-sand); overflow: hidden; }
.ag-hero .ag-photo { position: absolute; inset: 0; border: 0; aspect-ratio: auto; height: 100%; }
.ag-hero-overlay { position: absolute; inset: 0; background: rgba(42,38,32,0.30); }
.ag-hero-content { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 24px var(--space-9); width: 100%; color: var(--color-cream); }
.ag-hero-content .eyebrow { color: var(--color-sage-tint); margin-bottom: 18px; }
.ag-hero h1 { color: var(--color-cream); font-size: var(--fs-hero); font-weight: 400; max-width: 16ch; text-wrap: balance; margin-bottom: 22px; }
.ag-hero-sub { font-size: var(--fs-lead); font-weight: 300; max-width: 44ch; color: rgba(246,241,234,0.92); margin-bottom: 30px; }
.ag-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.ag-hero-btns .btn { border-color: var(--color-cream); color: var(--color-cream); }
.ag-hero-btns .btn:hover { background: var(--color-cream); color: var(--color-ink); }
.ag-hero-btns .btn-primary { background: var(--color-cream); color: var(--color-ink); border-color: var(--color-cream); }
.ag-hero-btns .btn-primary:hover { background: var(--color-mocha); border-color: var(--color-mocha); color: var(--color-ivory); }

/* page hero (shorter, for subpages) */
.ag-hero-line { max-width: 18ch; }
.ag-hl { font-family: var(--font-script); font-style: italic; font-weight: 500; color: var(--color-sage-tint); font-size: 1.12em; }

/* darker hero + centered English headline (family page) */
.ag-hero-dark .ag-hero-overlay { background: rgba(28,24,20,0.52); }
.ag-hero-center { text-align: center; margin-inline: auto; }
.ag-hero-en { font-family: var(--font-script); font-style: italic; font-weight: 400; color: var(--color-cream); font-size: clamp(34px, 5.4vw, 68px); line-height: 1.15; letter-spacing: 0.01em; max-width: 22ch; margin-inline: auto; }
.ag-hero-en .ag-hl { font-size: 1em; color: var(--color-sage-tint); }

/* poetic intro */
.ag-poem { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 400; line-height: 1.7; color: var(--fg-1); text-align: center; max-width: 700px; margin: 0 auto; text-wrap: balance; }
.ag-poem-em { color: var(--color-sage-deep); font-style: italic; }.ag-subhero { min-height: 62vh; }
.ag-subhero h1 { font-size: var(--fs-h1); }

/* ---------- About / split ---------- */
.ag-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.ag-split.narrow-img { grid-template-columns: 0.85fr 1.15fr; }
.ag-split .ag-portrait { box-shadow: var(--shadow-image); }
/* Profile photo → medium circle (about sections, all pages) */
.ag-split.narrow-img .ag-portrait {
  aspect-ratio: 1 / 1 !important;
  width: clamp(200px, 78%, 300px);
  margin-inline: auto;
  border-radius: 50%;
  background-position: center top;
  box-shadow: var(--shadow-md);
}
.ag-split-body h2 { margin-bottom: 18px; }
.ag-split-body .signature { font-family: var(--font-script); font-style: italic; font-size: 26px; color: var(--color-sage-deep); margin-top: 16px; }

/* ---------- Category grid ---------- */
.ag-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ag-cat { display: block; position: relative; overflow: hidden; }
.ag-cat .ag-photo { transition: transform var(--dur-slow) var(--ease-soft); }
.ag-cat:hover .ag-photo { transform: scale(1.04); }
.ag-cat-cap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(42,38,32,0.22); color: var(--color-cream); transition: background var(--dur-base); }
.ag-cat:hover .ag-cat-cap { background: rgba(42,38,32,0.38); }
.ag-cat-cap .eyebrow { color: var(--color-sage-tint); white-space: nowrap; }
.ag-cat-cap h3 { color: var(--color-cream); font-size: 28px; margin: 6px 0 0; }
.ag-cat-cap .arrow { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.2em; margin-top: 12px; opacity: 0; transform: translateY(6px); transition: all var(--dur-base) var(--ease-soft); }
.ag-cat:hover .ag-cat-cap .arrow { opacity: 1; transform: translateY(0); }

/* ---------- Pricing cards ---------- */
.ag-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.ag-pricecard { background: var(--color-ivory); border: 1px solid var(--line); padding: 32px 28px; position: relative; transition: box-shadow var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft); }
.ag-pricecard:hover { box-shadow: var(--shadow-md); }
.ag-pricecard.premium { background: var(--color-sage-deep); border-color: var(--color-sage-deep); box-shadow: var(--shadow-md); }
.ag-pricecard.premium:hover { box-shadow: var(--shadow-lg); }
.ag-pricecard.premium .ag-pricecard-tier { color: var(--color-sage-tint); }
.ag-pricecard.premium h3 { color: var(--color-ivory); }
.ag-pricecard.premium li { color: rgba(251,248,243,0.92); border-bottom-color: rgba(255,255,255,0.16); }
.ag-pricecard.premium li::before { color: var(--color-sage-tint); }
.ag-pricecard.premium .ag-pricecard-note { color: var(--color-sage-tint); }
.ag-pricecard.premium .ag-pricecard-invest { color: var(--color-sage-tint); }
.ag-pricecard.premium .ag-pricecard-price.brass { color: var(--color-ivory); }
.ag-pricecard.premium .ag-pricecard-cta { color: var(--color-ivory); border-top-color: rgba(255,255,255,0.4); }
.ag-pricecard.premium .ag-pricecard-cta:hover { color: var(--color-sage-tint); }
.ag-pricecard-ribbon { position: absolute; top: -1px; left: 28px; background: var(--color-brass); color: var(--color-ivory); padding: 5px 14px; font-family: var(--font-eyebrow); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.ag-pricecard-tier { font-family: var(--font-eyebrow); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-sage-deep); margin-bottom: 10px; }
.ag-pricecard h3 { font-size: 26px; margin-bottom: 18px; }
.ag-pricecard ul { list-style: none; padding: 0; margin: 0 0 18px; }
.ag-pricecard li { font-size: 14px; color: var(--fg-2); padding: 9px 0; padding-inline-start: 22px; border-bottom: 1px solid var(--line); position: relative; line-height: 1.5; }
.ag-pricecard li::before { content: "◆"; position: absolute; right: 0; top: 11px; color: var(--color-sage); font-size: 8px; }
.ag-pricecard li:last-child { border-bottom: 0; }
.ag-pricecard-note { font-size: 12px; color: var(--fg-3); font-style: italic; margin: 0 0 14px; }
.ag-pricecard-invest { font-family: var(--font-eyebrow); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); }
.ag-pricecard-price { font-family: var(--font-display); font-size: 38px; font-weight: 500; color: var(--fg-1); margin: 2px 0 20px; }
.ag-pricecard-price.brass { color: var(--color-brass-deep); }
.ag-pricecard-cta { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-mocha); border-top: 1px solid var(--color-ink); padding-top: 14px; display: block; transition: color var(--dur-quick); }
.ag-pricecard-cta:hover { color: var(--color-ink); }

/* ---------- Category anchor nav (family page) ---------- */
.ag-anchornav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-8); }
.ag-anchornav a { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 18px; border: 1px solid var(--line); color: var(--fg-2); transition: all var(--dur-base); }
.ag-anchornav a:hover { background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); }

.ag-cat-block { scroll-margin-top: 100px; }
.ag-cat-block + .ag-cat-block { margin-top: var(--space-8); }

/* ---------- Session-type trio (family page) ---------- */
.ag-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.ag-type .ag-photo { margin-bottom: 16px; }
.ag-type .num { font-family: var(--font-display); font-size: 34px; color: var(--color-linen); line-height: 1; display: block; }
.ag-type .eyebrow { margin: 8px 0 4px; }
.ag-type h3 { font-size: 22px; margin-bottom: 8px; }
.ag-type p { font-size: 14px; color: var(--fg-2); margin: 0; line-height: 1.6; }

/* ---------- Long-form editorial detail (family page) ---------- */
/* Gallery masonry (family page) — 10 example slots */
.ag-masonry { column-count: 4; column-gap: 16px; }
.ag-masonry > * { break-inside: avoid; margin-bottom: 16px; display: block; }
.ag-masonry > img { width: 100%; height: auto; border-radius: 2px; }
@media (max-width: 900px) { .ag-masonry { column-count: 2; } }
@media (max-width: 520px) { .ag-masonry { column-count: 1; } }.ag-detail + .ag-detail { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--line); }
.ag-detail-split { align-items: center; }
.ag-detail-split.reverse { direction: ltr; }
.ag-detail-split.reverse > * { direction: rtl; }
.ag-detail-body h2 { margin: 12px 0 18px; }
.ag-detail-body p { font-size: 16px; line-height: 1.85; color: var(--fg-2); margin: 0 0 16px; }
.ag-detail-body .btn { margin-top: 8px; }
.ag-detail-body .eyebrow { color: var(--color-sage-deep); }
.ag-terms { max-width: 760px; margin: 0 auto; }
.ag-term { display: grid; grid-template-columns: 60px 1fr; gap: 22px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ag-term:last-child { border-bottom: 0; }
.ag-term .num { font-family: var(--font-display); font-size: 40px; color: var(--color-sage-deep); line-height: 0.9; }
.ag-term p { font-size: 16px; color: var(--fg-2); line-height: 1.7; margin: 0; }
.ag-term p b { color: var(--fg-1); font-weight: 600; }
.ag-cat-block-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 28px; }
.ag-cat-block-head .num { font-family: var(--font-display); font-size: 52px; color: var(--color-linen); line-height: 1; }
.ag-cat-block-head .txt h3 { font-size: 30px; }
.ag-cat-block-head .txt p { margin: 6px 0 0; color: var(--fg-3); font-size: 15px; max-width: 60ch; }

/* ---------- Process steps ---------- */
.ag-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.ag-step .num { font-family: var(--font-display); font-size: 56px; color: var(--color-linen); line-height: 1; }
.ag-step h4 { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin: 10px 0 10px; }
.ag-step p { font-size: 15px; color: var(--fg-2); margin: 0; }

/* ---------- Accordion / FAQ ---------- */
.ag-accordion { max-width: 820px; margin: 0 auto; }
.ag-acc-item { border-bottom: 1px solid var(--line); }
.ag-acc-q { width: 100%; background: none; border: 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; text-align: right; font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--fg-1); }
.ag-acc-icon { font-family: var(--font-body); font-size: 24px; color: var(--color-sage-deep); font-weight: 300; }
.ag-acc-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-soft); }
.ag-acc-item.open .ag-acc-a { max-height: 320px; }
.ag-acc-a p { padding: 0 0 22px; margin: 0; color: var(--fg-2); font-size: 16px; line-height: 1.7; }

/* ---------- Testimonial ---------- */
.ag-testimonial { max-width: 760px; margin: 0 auto; text-align: center; }
.ag-testimonial blockquote { font-family: var(--font-display); font-size: 26px; font-style: italic; line-height: 1.5; color: var(--fg-1); margin: 0; text-wrap: pretty; }
.ag-testimonial figcaption { font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-sage-deep); margin-top: 22px; }

/* ---------- CTA band ---------- */
.ag-ctaband { background: var(--color-ink); color: var(--color-cream); text-align: center; padding: 72px 24px; }
.ag-ctaband .eyebrow { color: var(--color-sage-tint); }
.ag-ctaband h2 { color: var(--color-cream); margin: 14px 0 12px; }
.ag-ctaband p { color: rgba(246,241,234,0.78); max-width: 48ch; margin: 0 auto 28px; }
.ag-ctaband-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Fine print / policy ---------- */
.ag-policy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.ag-policy h4 { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-sage-deep); margin-bottom: 14px; }
.ag-policy ul { list-style: none; padding: 0; margin: 0; }
.ag-policy li { font-size: 14px; color: var(--fg-2); padding: 7px 0; border-bottom: 1px solid var(--line); line-height: 1.55; }
.ag-policy li:last-child { border-bottom: 0; }

/* ---------- Contact ---------- */
.ag-contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: start; }
.ag-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ag-form label { display: flex; flex-direction: column; gap: 6px; }
.ag-form label.full { grid-column: span 2; }
.ag-form .field-label { font-family: var(--font-eyebrow); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); }
.ag-form input, .ag-form textarea { font-family: var(--font-body); font-size: 15px; padding: 13px 15px; background: var(--color-ivory); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--fg-1); transition: border-color var(--dur-base); }
.ag-form input:focus, .ag-form textarea:focus { outline: none; border-color: var(--color-mocha); }
.ag-form textarea { resize: vertical; min-height: 120px; }
.ag-form .submit-row { grid-column: span 2; }
.ag-contact-aside h3 { font-size: 26px; margin-bottom: 18px; }
.ag-contact-line { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.ag-contact-line .lbl { font-family: var(--font-eyebrow); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); width: 80px; }
.ag-contact-line .val { font-size: 16px; color: var(--fg-1); }
.ag-form-success { grid-column: span 2; background: var(--color-sage-mist); border: 1px solid var(--color-sage-tint); color: var(--color-sage-deep); padding: 16px; text-align: center; font-size: 15px; }

/* ---------- Blog (travel) ---------- */
.ag-blog-h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 500; text-align: center; margin: 0 0 14px; }
.ag-blog-note { text-align: center; color: var(--fg-3); font-size: 15px; margin: 0 auto 28px; max-width: 52ch; }
.ag-blog-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }

/* Google-Maps place pill */
.ag-place { display: inline-flex; align-items: center; gap: 3px; color: var(--color-sage-deep); font-weight: 500; border-bottom: 1px solid var(--color-sage-tint); transition: color var(--dur-quick), border-color var(--dur-quick); }
.ag-place:hover { color: var(--color-mocha); border-color: var(--color-mocha); }
.ag-place-pin { font-size: 0.85em; }

/* Flight / car / lodging cards */
.ag-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ag-info-card { background: var(--color-ivory); border: 1px solid var(--line); padding: 26px 24px; }
.ag-info-card h4 { font-family: var(--font-display); font-size: 21px; font-weight: 500; margin: 0 0 10px; }
.ag-info-card p { font-size: 15px; color: var(--fg-2); margin: 0; line-height: 1.65; }
.ag-info-links { list-style: none; padding: 0; margin: 0; }
.ag-info-links li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ag-info-links li:last-child { border-bottom: 0; }
.ag-info-links a { display: inline-flex; align-items: center; gap: 5px; color: var(--color-sage-deep); }
.ag-info-links a:hover { color: var(--color-mocha); }

/* Day accordion */
.ag-days { margin-top: 8px; }
.ag-day-acc { border: 1px solid var(--line); background: var(--color-ivory); margin-bottom: 12px; transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.ag-day-acc.open { border-color: var(--color-sage); box-shadow: var(--shadow-sm); }
.ag-day-head { width: 100%; background: none; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; text-align: right; }
.ag-day-label { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ag-day-n { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-sage-deep); background: var(--color-sage-mist); padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.ag-day-title { font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--fg-1); }
.ag-day-toggle { font-family: var(--font-body); font-size: 26px; font-weight: 300; color: var(--color-sage-deep); line-height: 1; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-soft); }
.ag-day-acc.open .ag-day-toggle { transform: rotate(180deg); }
.ag-day-panel { overflow: hidden; }
.ag-day-inner { padding: 0 24px 24px; }
.ag-day-inner p { font-size: 16px; line-height: 1.8; color: var(--fg-2); margin: 0 0 12px; }
.ag-day-inner p:last-child { margin-bottom: 0; }

/* ---------- Lifestyle / brand offerings ---------- */
.ag-offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ag-offer-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin: 0 auto; gap: 28px; }
.ag-offer .ag-photo { margin-bottom: 16px; }
.ag-offer h4 { font-family: var(--font-display); font-size: 21px; font-weight: 500; margin: 0 0 8px; }
.ag-offer p { font-size: 14px; color: var(--fg-2); margin: 0; line-height: 1.6; }
.ag-ls-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ---------- Blog teaser (home) ---------- */
.ag-blogteaser { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.ag-blogteaser .ag-photo { box-shadow: var(--shadow-image); }
.ag-blogteaser-body .eyebrow { margin-bottom: 14px; }
.ag-blogteaser-body h2 { margin-bottom: 16px; }
.ag-blogteaser-body p { color: var(--fg-2); margin-bottom: 24px; }

/* ---------- Blog (travel) legacy ---------- */
.ag-blog-meta { display: flex; gap: 18px; align-items: center; font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-sage-tint); margin-bottom: 18px; }
.ag-blog-body { max-width: 760px; margin: 0 auto; }
.ag-blog-body .lead { font-size: 21px; margin-bottom: 28px; }
.ag-blog-body p { font-size: 17px; line-height: 1.8; color: var(--fg-2); margin-bottom: 20px; }
.ag-blog-body h3 { font-size: 26px; margin: 40px 0 14px; }
.ag-day { border-inline-start: 2px solid var(--color-sage); padding-inline-start: 22px; margin-bottom: 30px; }
.ag-day .ag-day-num { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-sage-deep); }
.ag-day h4 { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin: 4px 0 10px; }
.ag-day p { font-size: 16px; margin: 0; }
.ag-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ag-gallery .ag-photo:nth-child(4n) { grid-column: span 2; }
.ag-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.ag-tags span { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); border: 1px solid var(--line); padding: 7px 14px; border-radius: var(--radius-pill); }
.ag-tips { background: var(--color-sage-mist); border: 1px solid var(--color-sage-tint); padding: 28px 32px; margin: 32px 0; }
.ag-tips h4 { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin: 0 0 14px; }
.ag-tips ul { margin: 0; padding-inline-start: 20px; }
.ag-tips li { font-size: 16px; color: var(--fg-2); margin-bottom: 10px; line-height: 1.6; }

/* ---------- Masonry gallery (bat-mitzvah) — uncropped, natural ratios ---------- */
.ag-gallery-cols { column-count: 3; column-gap: 14px; }
.ag-gal-cell { display: block; margin: 0 0 14px; break-inside: avoid; overflow: hidden; position: relative; }
.ag-gal-cell img { width: 100%; height: auto; display: block; transition: transform var(--dur-slow) var(--ease-soft); }
.ag-gal-cell:hover img { transform: scale(1.04); }
.ag-gal-cell::after { content: ""; position: absolute; inset: 0; background: rgba(42,38,32,0); transition: background var(--dur-base); }
.ag-gal-cell:hover::after { background: rgba(42,38,32,0.12); }

/* "הצג עוד" reveal button under the bat-mitzvah gallery */
.ag-gallery-more { display: flex; justify-content: center; margin-top: var(--space-7); }
.ag-gallery-more .btn { min-width: 220px; justify-content: center; }

/* ---------- "חשוב לדעת" notes ---------- */
.ag-quote { max-width: 720px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ag-quote-avatar { width: 84px; height: 84px; border-radius: 50%; background-size: cover; background-position: center; margin-bottom: 26px; box-shadow: var(--shadow-sm); border: 3px solid var(--color-ivory); }
.ag-know { max-width: 760px; margin: 56px auto 0; text-align: center; }
.ag-know h4 { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-sage-deep); margin-bottom: 18px; }
.ag-know ul { list-style: none; padding: 0; margin: 0; display: inline-block; text-align: right; }
.ag-know li { font-size: 15px; color: var(--fg-2); padding: 8px 0; padding-inline-start: 22px; position: relative; line-height: 1.6; }
.ag-know li::before { content: "◆"; position: absolute; right: 0; top: 11px; color: var(--color-sage); font-size: 8px; }

/* blog index cards */
.ag-postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ag-postcard { background: var(--color-ivory); border: 1px solid var(--line); overflow: hidden; transition: box-shadow var(--dur-base); }
.ag-postcard:hover { box-shadow: var(--shadow-md); }
.ag-postcard-body { padding: 22px 24px 26px; }
.ag-postcard .cat { font-family: var(--font-eyebrow); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-sage-deep); }
.ag-postcard h3 { font-size: 22px; margin: 8px 0 10px; line-height: 1.25; }
.ag-postcard p { font-size: 14px; color: var(--fg-3); margin: 0; }

/* ---------- Floating WhatsApp FAB ---------- */
.ag-fab { position: fixed; bottom: 24px; left: 24px; z-index: 80; width: 60px; height: 60px; background: var(--color-whatsapp); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(37,211,102,0.36); transition: transform var(--dur-base) var(--ease-soft); }
.ag-fab:hover { transform: scale(1.06); color: #fff; }
.ag-fab-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--color-whatsapp); animation: ag-pulse 2.4s ease-out infinite; z-index: -1; }
@keyframes ag-pulse { 0% { opacity: 0.45; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.ag-fab-tip { position: absolute; left: 72px; background: var(--color-ink); color: var(--color-cream); font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.12em; padding: 8px 14px; border-radius: var(--radius-md); white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-8px); transition: all var(--dur-base) var(--ease-soft); }
.ag-fab:hover .ag-fab-tip { opacity: 1; transform: translateX(0); }

/* ---------- Footer ---------- */
.ag-footer { background: var(--color-ink); color: var(--color-cream); padding: var(--space-8) 0 24px; }
.ag-footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.ag-footer-wordmark { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.18em; }
.ag-footer-script { font-family: var(--font-script); font-style: italic; color: var(--color-sage-tint); font-size: 18px; margin-top: 6px; }
.ag-footer-socials { display: flex; gap: 14px; margin-top: 18px; }
.ag-footer-socials a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-cream); transition: all var(--dur-base); }
.ag-footer-socials a:hover { background: var(--color-sage-deep); border-color: var(--color-sage-deep); }
.ag-footer-col h6 { font-family: var(--font-eyebrow); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-pebble); margin: 0 0 14px; font-weight: 500; }
.ag-footer-col a, .ag-footer-col span { font-size: 14px; color: var(--color-cream); display: block; margin: 6px 0; }
.ag-footer-col a:hover { color: var(--color-sage-tint); }
.ag-mail-btn { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 18px; border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-pill); color: var(--color-cream); font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; transition: all var(--dur-base); width: max-content; }
.ag-mail-btn:hover { background: var(--color-cream); color: var(--color-ink) !important; border-color: var(--color-cream); }
.ag-footer-bottom { max-width: 1180px; margin: 28px auto 0; padding: 18px 24px 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; font-family: var(--font-eyebrow); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-pebble); }

/* ---------- Reveal (entrance disabled) ---------- */
/* This runtime does not advance time-based CSS animations/transitions in the
   preview compositor, which strands opacity-animated content at its start
   frame. Entrance is therefore a no-op: content is always fully visible.
   The .ag-reveal class is kept in markup as a hook for future use. */
.ag-reveal { opacity: 1; transform: none; }

/* ======================================================================
   MOTION & MICRO-INTERACTIONS
   Interaction-driven (hover / press / focus) — smooth in any real browser,
   safe in the static preview. All gated behind prefers-reduced-motion.
   ====================================================================== */

/* Smooth anchor scrolling for the family anchor-nav & in-page links */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: no-preference) {

  /* ---- Cards: gentle lift on hover ---- */
  .ag-pricecard,
  .ag-info-card,
  .ag-postcard,
  .ag-offer { transition: transform var(--dur-base) var(--ease-soft),
                          box-shadow var(--dur-base) var(--ease-soft); }
  .ag-pricecard:hover,
  .ag-info-card:hover,
  .ag-postcard:hover { transform: translateY(-6px); }
  .ag-info-card:hover { box-shadow: var(--shadow-md); }
  /* keep the highlighted premium card grounded but let it breathe */
  .ag-pricecard.premium:hover { transform: translateY(-4px); }

  /* ---- Offer tiles: image + heading nudge together ---- */
  .ag-offer .ag-photo { transition: transform var(--dur-slow) var(--ease-soft),
                                     box-shadow var(--dur-base) var(--ease-soft); }
  .ag-offer:hover .ag-photo { transform: translateY(-5px); box-shadow: var(--shadow-md); }

  /* ---- Masonry gallery: soft zoom-in-place + warm lift ---- */
  .ag-masonry > img { transition: transform var(--dur-slow) var(--ease-soft),
                                   box-shadow var(--dur-base) var(--ease-soft),
                                   filter var(--dur-base) var(--ease-soft);
                      will-change: transform; }
  .ag-masonry > img:hover { transform: scale(1.025);
                            box-shadow: var(--shadow-lg);
                            filter: saturate(1.06) brightness(1.02);
                            position: relative; z-index: 2; }

  /* ---- Wide hero image (family) parallax-ish settle ---- */
  .ag-blogteaser .ag-photo { transition: transform var(--dur-slow) var(--ease-soft),
                                          box-shadow var(--dur-base) var(--ease-soft); }
  .ag-blogteaser a:hover .ag-photo { transform: scale(1.015); box-shadow: var(--shadow-lg); }

  /* ---- Buttons: tactile press + lift ---- */
  .btn { transition: background var(--dur-base) var(--ease-soft),
                     color var(--dur-base) var(--ease-soft),
                     border-color var(--dur-base) var(--ease-soft),
                     transform var(--dur-quick) var(--ease-soft),
                     box-shadow var(--dur-base) var(--ease-soft); }
  .btn-primary:hover,
  .btn-sage:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .btn:active { transform: translateY(0) scale(0.985); box-shadow: none; }

  /* ---- Anchor-nav chips & place pills: micro lift ---- */
  .ag-anchornav a { transition: background var(--dur-base) var(--ease-soft),
                                color var(--dur-base) var(--ease-soft),
                                border-color var(--dur-base) var(--ease-soft),
                                transform var(--dur-quick) var(--ease-soft); }
  .ag-anchornav a:hover { transform: translateY(-2px); }
  .ag-anchornav a:active { transform: translateY(0); }

  /* ---- CTA arrows slide on hover (text links ending in ›) ---- */
  .ag-pricecard-cta { display: inline-flex; gap: 4px; }
  .ag-pricecard-cta::after { content: ""; }

  /* ---- Footer social + mail: lift ---- */
  .ag-footer-socials a { transition: background var(--dur-base) var(--ease-soft),
                                     border-color var(--dur-base) var(--ease-soft),
                                     transform var(--dur-quick) var(--ease-soft); }
  .ag-footer-socials a:hover { transform: translateY(-3px); }

  /* ---- Form fields: focus ring glow ---- */
  .ag-form input, .ag-form textarea { transition: border-color var(--dur-base) var(--ease-soft),
                                                   box-shadow var(--dur-base) var(--ease-soft); }
  .ag-form input:focus, .ag-form textarea:focus { box-shadow: 0 0 0 3px var(--color-sage-mist); }

  /* ---- Day accordion head: hover wash ---- */
  .ag-day-head { transition: background var(--dur-base) var(--ease-soft); }
  .ag-day-head:hover { background: var(--color-sage-mist); }

  /* ---- FAQ question: hover shifts toward accent ---- */
  .ag-acc-q { transition: color var(--dur-base) var(--ease-soft); }
  .ag-acc-q:hover { color: var(--color-sage-deep); }
}

/* ---- Keyboard focus: visible, on-brand ring everywhere ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.ag-form input:focus-visible,
.ag-form textarea:focus-visible {
  outline: 2px solid var(--color-sage-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ag-nav, .ag-header-phone { display: none; }
  .ag-burger { display: flex; }
  .ag-nav-mobile { display: flex; }
  .ag-split, .ag-split.narrow-img, .ag-contact-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .ag-cat-grid, .ag-price-grid, .ag-steps, .ag-policy-grid, .ag-gallery, .ag-postgrid { grid-template-columns: 1fr; }
  .ag-info-grid, .ag-offer-grid { grid-template-columns: 1fr; }
  .ag-offer-grid-2 { grid-template-columns: 1fr; }
  .ag-ls-gallery { grid-template-columns: 1fr 1fr; }
  .ag-blogteaser { grid-template-columns: 1fr; gap: var(--space-6); }
  .ag-gallery-cols { column-count: 2; }
  .ag-types { grid-template-columns: 1fr 1fr; }
  .ag-term { grid-template-columns: 48px 1fr; gap: 16px; }
  .ag-gallery .ag-photo:nth-child(4n) { grid-column: span 1; }
  .ag-form { grid-template-columns: 1fr; }
  .ag-form label.full, .ag-form .submit-row, .ag-form-success { grid-column: span 1; }
  .ag-footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .ag-footer-bottom { flex-direction: column; gap: 8px; }
  .ag-hero h1 { font-size: clamp(38px, 9vw, 60px); }
}
@media (max-width: 560px) {
  .ag-types { grid-template-columns: 1fr; }
}

/* ---------- Mobile refinements (added) ---------- */
@media (max-width: 760px) {
  /* tighten vertical rhythm so phones don't feel empty */
  .ag-section { padding: var(--space-7) 0; }
  .ag-section.tight { padding: var(--space-6) 0; }
  .ag-wrap { padding-inline: 20px; }
  .ag-hero { min-height: 84vh; min-height: 84svh; }
  .ag-hero-content { padding-bottom: var(--space-8); }
  .ag-ctaband { padding: var(--space-8) 20px; }
  .ag-cat-block + .ag-cat-block { margin-top: var(--space-8); }
  .ag-detail + .ag-detail { margin-top: var(--space-7); padding-top: var(--space-7); }
  /* bigger tap targets in the mobile menu */
  .ag-nav-mobile a { padding: 10px 0; }
}

@media (max-width: 560px) {
  .ag-header-inner { padding: 14px 20px; }
  .ag-logo-name { font-size: 26px; }
  .ag-logo-sub { font-size: 9px; letter-spacing: 0.36em; }
  .ag-hero h1 { font-size: clamp(32px, 10.5vw, 50px); }
  .ag-hero-sub { font-size: 16px; }
  .ag-hero-btns { width: 100%; }
  .ag-hero-btns .btn { flex: 1 1 auto; justify-content: center; }
  .ag-gallery-cols { column-count: 2; column-gap: 10px; }
  .ag-gal-cell { margin-bottom: 10px; }
  .ag-gallery-more .btn { width: 100%; min-width: 0; }
  .ag-cat-block-head { gap: 12px; }
  .ag-cat-block-head .num { font-size: 40px; }
  .ag-term { grid-template-columns: 40px 1fr; gap: 14px; }
  .ag-quote-avatar { width: 72px; height: 72px; }
  .ag-poem { font-size: 20px; }
  .ag-fab { width: 54px; height: 54px; bottom: 18px; left: 18px; }
  .btn { padding: 13px 22px; }
}

@media (max-width: 380px) {
  .ag-wrap { padding-inline: 16px; }
  .ag-gallery-cols { column-count: 1; }
}