/* UX package 15 Nov 2026, core part (assets/js/ux-core.js adds the classes; without the script nothing here hides or moves anything).
   Palette: paper #fbfbf6, ink #28352e, gold #88734c, text-gold #705e3b, button green #304d3a. All motion sits in a no-preference block
   or is switched off by the reduced-motion block at the end of the file. */

/* ---- vt: cross-document view transitions (a short fade; browsers without support ignore the rule) ----------------------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:ease}
}

/* ---- reveal: sections fade/rise in once (class added by JS only to sections that start below the fold) --------------------- */
html.ag-js .ag-rv{opacity:0;transform:translateY(22px)}
html.ag-js .ag-rv.ag-rv-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}

/* ---- shrink: sticky header that gets thinner after scroll (JS sets --ag-bar-h and --ag-diff, so no layout jump) ------------- */
html.ag-js.ag-sticky-on .wp-site-blocks>header.wp-block-template-part{position:sticky;top:calc(-1 * var(--ag-bar-h,0px));z-index:60}
html.ag-js.ag-sticky-on.ag-shrunk .wp-site-blocks>header.wp-block-template-part{margin-bottom:var(--ag-diff,0px)}
html.ag-js.ag-shrunk .ag-shell #header .header-row{min-height:62px}
html.ag-js.ag-shrunk .ag-shell #logo .brand-logo{width:50px;flex-basis:50px}
html.ag-js.ag-shrunk .ag-shell #logo .brand-logo img{width:50px;height:50px}
html.ag-js.ag-shrunk .ag-shell .site-header{box-shadow:0 2px 14px rgba(40,53,46,.12)}
html.ag-js.ag-sticky-on{scroll-padding-top:84px}
@media (max-width:1000px){
  html.ag-js.ag-shrunk .ag-shell #header .header-row{min-height:56px}
  html.ag-js.ag-shrunk .ag-shell #logo .brand-logo{width:44px;flex-basis:44px}
  html.ag-js.ag-shrunk .ag-shell #logo .brand-logo img{width:44px;height:44px}
}
@media (prefers-reduced-motion:no-preference){
  html.ag-js .ag-shell #header .header-row,html.ag-js .ag-shell #logo .brand-logo,html.ag-js .ag-shell #logo .brand-logo img,html.ag-js .ag-shell .site-header{transition:min-height .28s ease,width .28s ease,height .28s ease,flex-basis .28s ease,box-shadow .28s ease}
  html.ag-js.ag-sticky-on .wp-site-blocks>header.wp-block-template-part{transition:margin-bottom .28s ease}
}

html.ag-measure *{transition:none!important}

/* ---- sheen: occasional gold glint over the primary buttons (green and gold), about every 6 s. The glint is a background-position
   sweep inside the button box (no overflow:hidden, which would move the text baseline and change section heights) ------------------ */
body.ag-shell #page-wrap .wp-block-button__link{position:relative}
@media (prefers-reduced-motion:no-preference){
  body.ag-shell #page-wrap .wp-block-button__link::after,.ag-book-fab::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(100deg,transparent 38%,rgba(245,222,160,.55) 50%,transparent 62%) no-repeat;background-size:300% 100%;background-position:130% 0;animation:ag-sheen 6s ease-in-out 2s infinite}
  .ag-book-fab::after{animation-delay:3s}
  /* the quiet second button of a green block (outline) and hovered buttons stay still */
  body.ag-shell #page-wrap .ag-sec.is-style-flecks .wp-block-buttons~.wp-block-buttons .wp-block-button__link::after,
  body.ag-shell #page-wrap .wp-block-button.outline .wp-block-button__link::after,body.ag-shell #page-wrap .wp-block-button__link:hover::after,.ag-book-fab:hover::after{animation:none;opacity:0}
}
@keyframes ag-sheen{0%,70%{background-position:130% 0}100%{background-position:-30% 0}}

/* ---- faq: smooth open/close; the plus turns into a cross (answers are wrapped by JS in .ag-faq-a > .ag-faq-a-in) ------------ */
body.ag-kit #page-wrap .ag-faq-item.ag-fx.is-open .ag-faq-q:after{content:"+";content:"+" / ""}
body.ag-kit #page-wrap .ag-faq-item.ag-fx .ag-faq-q:after{display:inline-block;transform-origin:50% 54%}
body.ag-kit #page-wrap .ag-faq-item.ag-fx.is-open .ag-faq-q:after{transform:rotate(45deg)}
.ag-faq-js .ag-faq-item.ag-fx:not(.is-open)>.ag-faq-a,.ag-faq-js .ag-faq-item.ag-fx>.ag-faq-a{display:grid!important}
.ag-faq-a{grid-template-rows:0fr;visibility:hidden}
.ag-faq-item.is-open>.ag-faq-a{grid-template-rows:1fr;visibility:visible}
.ag-faq-a>.ag-faq-a-in{min-height:0;overflow:hidden}
.ag-faq-js .ag-faq-item.ag-fx.is-open>:is(h1,h2,h3,h4,h5,h6){margin-bottom:0}
.ag-faq-item.is-open>.ag-faq-a>.ag-faq-a-in{padding-top:16px}
@media (prefers-reduced-motion:no-preference){
  .ag-faq-a{transition:grid-template-rows .38s cubic-bezier(.2,.7,.2,1),visibility 0s linear .38s}
  .ag-faq-item.is-open>.ag-faq-a{transition:grid-template-rows .38s cubic-bezier(.2,.7,.2,1),visibility 0s}
  .ag-faq-a>.ag-faq-a-in{opacity:0;transition:opacity .3s ease}
  .ag-faq-item.is-open>.ag-faq-a>.ag-faq-a-in{opacity:1;transition:opacity .4s ease .08s}
  body.ag-kit #page-wrap .ag-faq-item.ag-fx .ag-faq-q:after{transition:transform .3s ease}
}

/* ---- progress: thin gold reading line, single blog posts only ---------------------------------------------------------------- */
.ag-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:120;background:#88734c;transform:scaleX(0);transform-origin:0 50%;pointer-events:none;will-change:transform}
body.admin-bar .ag-progress{top:32px}
@media (max-width:782px){body.admin-bar .ag-progress{top:46px}}

/* ---- blur: pictures start soft and sharpen when they have loaded (JS adds .ag-img-wait only to images still loading) ---------- */
img.ag-img-wait{background-color:#e8ebe0;filter:blur(14px);clip-path:inset(0)}
img.ag-img-done{clip-path:inset(0)}
@media (prefers-reduced-motion:no-preference){
  img.ag-img-done{transition:filter .6s ease}
}

/* ---- menu: full-screen mobile menu, large items one after another (the existing #mobile-menu-wrap, shown by :target) --------- */
@media (max-width:1000px){
  html:has(#mobile-menu-wrap:target){overflow:hidden}
  .ag-shell #mobile-menu-wrap{padding:96px 32px 48px;background:radial-gradient(120% 90% at 80% 0%,#284a3b,#1f3a2f 50%,#0f1f18);color:#fffaf0}
  .ag-shell #mobile-menu-wrap .mobile-search-form input{background:#ffffff14;border:1px solid #cdb17a66;color:#fffaf0;font-size:16px;padding:13px 16px}
  .ag-shell #mobile-menu-wrap .mobile-search-form input::placeholder{color:#d9dccf}
  .ag-shell #mobile-menu-wrap .mobile-menu-close{width:46px;height:46px;right:20px;top:18px;border-color:#cdb17a99;color:#fffaf0}
  .ag-shell #mobile-menu a{padding:12px 0;font:400 clamp(28px,8.4vw,40px)/1.12 Georgia,"Times New Roman",serif;letter-spacing:-.01em;color:#fffaf0;border-bottom:1px solid #cdb17a40}
  .ag-shell #mobile-menu a:hover,.ag-shell #mobile-menu .current-menu-item>a{color:#e2c98f}
  .ag-shell #mobile-menu .sub-menu a{padding:8px 0 8px 18px;font-size:clamp(18px,5vw,22px);color:#d9dccf;border-bottom-color:#cdb17a25}
  .ag-shell #mobile-menu a:focus-visible,.ag-shell .mobile-menu-close:focus-visible{outline:2px solid #e2c98f;outline-offset:3px}
}
@media (prefers-reduced-motion:no-preference) and (max-width:1000px){
  .ag-shell #mobile-menu-wrap:target{animation:ag-menu-in .32s cubic-bezier(.2,.7,.2,1)}
  .ag-shell #mobile-menu-wrap:target #mobile-menu>ul>li,.ag-shell #mobile-menu-wrap:target #mobile-menu>div>ul>li{opacity:0;animation:ag-menu-item .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.12s + var(--ag-i,0) * .06s)}
  .ag-shell #mobile-menu-wrap:target .mobile-search-form{opacity:0;animation:ag-menu-item .45s ease .05s forwards}
}
@keyframes ag-menu-in{from{opacity:0}to{opacity:1}}
@keyframes ag-menu-item{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- form: live validation message + success check (WPForms and Contact Form 7) ------------------------------------------------ */
.ag-field-err{display:block;margin:6px 0 0;font:600 13px/1.4 var(--sans,inherit);color:#a3392b}
.ag-sec.is-style-flecks .ag-field-err{color:#ffc9bf}
.wpforms-field:has(label.wpforms-error) .ag-field-err,.wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip)+.ag-field-err{display:none}
input.ag-invalid{border-color:#a3392b!important;box-shadow:0 0 0 1px #a3392b}
.ag-sec.is-style-flecks input.ag-invalid{border-color:#ffc9bf!important;box-shadow:0 0 0 1px #ffc9bf}
.ag-check{display:flex;justify-content:center;margin:4px 0 10px}
.ag-check svg{width:56px;height:56px;display:block;overflow:visible}
.ag-check circle{fill:#e7efe9;stroke:#88734c;stroke-width:1.5}
.ag-check path{fill:none;stroke:#304d3a;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:0}
.ag-sec.is-style-flecks .ag-check circle{fill:#ffffff14;stroke:#e2c98f}
.ag-sec.is-style-flecks .ag-check path{stroke:#e2c98f}
@media (prefers-reduced-motion:no-preference){
  .ag-check svg{animation:ag-pop .45s cubic-bezier(.2,.9,.3,1.2) both}
  .ag-check path{stroke-dashoffset:60;animation:ag-draw .6s ease .25s forwards}
}
@keyframes ag-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes ag-draw{to{stroke-dashoffset:0}}

/* ---- top: back-to-top appears only after a long scroll, and stays clear of the Book button ------------------------------------- */
html.ag-js .ag-shell #back-to-top{opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none}
html.ag-js .ag-shell #back-to-top.ag-show{opacity:.9;visibility:visible;transform:none;pointer-events:auto}
html.ag-js .ag-shell #back-to-top.ag-show:hover{opacity:1}
@media (prefers-reduced-motion:no-preference){
  html.ag-js .ag-shell #back-to-top{transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
  html.ag-js .ag-shell #back-to-top.ag-show{transition:opacity .3s ease,transform .3s ease,visibility 0s}
}
@media (max-width:768px){
  html.ag-has-book .ag-shell #back-to-top{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* ---- plx: light parallax on the page's first big picture (transform only; JS sets --ag-py) ---------------------------------------- */
.ag-plx-wrap{overflow:hidden}
.ag-plx-wrap>img.ag-plx{transform:translate3d(0,var(--ag-py,0px),0) scale(1.1);will-change:transform}

/* ---- count: numbers keep their width while they run ---------------------------------------------------------------------------- */
.ag-count{font-variant-numeric:tabular-nums}

/* ---- fab: round Call / Email button, phones only ------------------------------------------------------------------------------------ */
.ag-fab{display:none}
@media (max-width:768px){
  .ag-fab{display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:fixed;left:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:55}
  html.ag-has-book .ag-fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .ag-fab-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0;padding:0;border:1px solid #c9ab6c;border-radius:50%;background:#304d3a;color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(27,42,33,.3)}
  .ag-fab-btn:hover,.ag-fab-btn:focus-visible{background:#44674f}
  .ag-fab-btn:focus-visible{outline:2px solid #88734c;outline-offset:3px}
  .ag-fab-btn svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ag-fab-btn .ag-ic-x{display:none}
  .ag-fab.is-open .ag-fab-btn .ag-ic-call{display:none}
  .ag-fab.is-open .ag-fab-btn .ag-ic-x{display:block}
  .ag-fab-items{display:flex;flex-direction:column;align-items:flex-start;gap:8px;order:-1}
  .ag-fab-items a{display:block;padding:10px 16px;border:1px solid #d8ddd2;border-radius:999px;background:#fbfbf6;color:#28352e;font:600 14px/1.2 var(--sans,inherit);text-decoration:none;box-shadow:0 4px 14px rgba(27,42,33,.18);opacity:0;visibility:hidden;transform:translateY(10px)}
  .ag-fab.is-open .ag-fab-items a{opacity:1;visibility:visible;transform:none}
  .ag-fab-items a:focus-visible{outline:2px solid #88734c;outline-offset:2px}
}
@media (max-width:768px) and (prefers-reduced-motion:no-preference){
  .ag-fab-items a{transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
  .ag-fab.is-open .ag-fab-items a{transition:opacity .25s ease,transform .25s ease,visibility 0s}
  .ag-fab.is-open .ag-fab-items a+a{transition-delay:.05s}
}

/* ---- map: studio card next to the address on /contact-us ------------------------------------------------------------------------------ */
.ag-mapcard{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:460px;margin:18px 0 22px;padding:14px 18px;border:1px solid #d8ddd2;border-left:3px solid #88734c;background:#fbfbf6;color:#28352e;box-shadow:0 6px 18px rgba(27,42,33,.08)}
.ag-mapcard-txt{display:block;font:500 14px/1.4 var(--sans,inherit)}
.ag-mapcard-txt small{display:block;margin-top:2px;font-size:12px;color:#536158}
body.ag-shell #page-wrap .ag-mapcard a.ag-mapcard-btn{display:inline-flex;align-items:center;padding:11px 18px;background:#304d3a;border:1px solid #304d3a;color:#fff;font:600 12px/1.2 var(--sans,inherit);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
body.ag-shell #page-wrap .ag-mapcard a.ag-mapcard-btn:hover{background:#44674f;border-color:#44674f;color:#fff}
body.ag-shell #page-wrap .ag-mapcard a.ag-mapcard-btn:focus-visible{outline:2px solid #88734c;outline-offset:3px}

/* ---- rm: reduced-motion safety. Everything above that moves is already wrapped in a no-preference block; this is the net below it ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .ag-rv,.ag-rv.ag-rv-in{opacity:1!important;transform:none!important;transition:none!important}
  .ag-faq-a,.ag-faq-a>.ag-faq-a-in,.ag-faq-q:after,.ag-fab-items a,#back-to-top,img.ag-img-done,img.ag-img-wait,.ag-check svg,.ag-check path,
  .ag-shell #header .header-row,.ag-shell #logo .brand-logo,.ag-shell #logo .brand-logo img,.ag-shell .site-header,
  .wp-site-blocks>header.wp-block-template-part,.ag-shell #mobile-menu-wrap,.ag-shell #mobile-menu li{transition:none!important;animation:none!important}
  .ag-check path{stroke-dashoffset:0!important}
  img.ag-img-wait{filter:none!important}
  .ag-plx-wrap>img.ag-plx{transform:none!important}
  body.ag-shell #page-wrap .wp-block-button__link::after,.ag-book-fab::after{animation:none!important;display:none!important}
  .ag-shell #mobile-menu-wrap:target,.ag-shell #mobile-menu-wrap:target *{animation:none!important;opacity:1!important}
}