/*!
 * UAIA Theme - core styles
 * Design tokens live in :root below. Do NOT edit colours here:
 * use Appearance > Customize > UAIA Colours, which overrides the same
 * variables inline. Editing this file means losing your changes on update.
 */
/* ============================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --font-display:'Bricolage Grotesque','Archivo',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ink:#14100D;
  --ink-2:#1D1815;
  --ink-3:#2A221C;
  --ivory:#F6F0E6;
  --ivory-2:#EDE4D6;
  --dim:rgba(246,240,230,.62);
  --dimmer:rgba(246,240,230,.52);   /* was .42, which is 3.7:1 and fails */
  --amber:#F2A413;
  --terra:#D2551F;
  --sage:#7E9270;
  --line:rgba(246,240,230,.13);
  --line-dark:rgba(20,16,13,.14);

  /* Roles, not colours. --ink was doing two jobs: the page background, which
     should flip in light mode, and the text on every amber button and light
     panel, which must not, or every button label goes pale on amber and
     disappears. So each job has its own name, and only the ones that should
     flip do. */
  --on-light:#14100D;        /* text on an accent or a light surface     */
  --light-surface:#F6F0E6;   /* a light surface with dark text on it     */
  --clay:#D2551F;            /* the plugins say clay, the theme said terra */

  /* Dark by design, in both modes: panels and scrims that carry white text.
     If these flipped with the page they would go white on white. */
  --night:#14100D;
  --night-2:#1D1815;

  /* The sticky header's glass, which does flip with the page. */
  --glass:rgba(20,16,13,.88);

  /* An accent used as TEXT. On the dark page it is the accent itself; on
     the light page amber text is 1.8 to 1 and unreadable, so it darkens.
     Used as a fill or a border the accent keeps its real colour. */
  --amber-ink:var(--amber);
  --terra-ink:var(--terra);
  --sage-ink:var(--sage);

  color-scheme:dark;

  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-pill:999px;
  --wrap:1240px;
  --gutter:22px;

  /* Space above and below every section. One number for the whole site,
     set under Appearance, Customize, UAIA Layout. */
  --section-y:clamp(28px,3.7vw,48px);

  /* A surface that contrasts with the page, and the text that goes on it:
     light on the dark site, dark on the light one. Both follow the page's
     own pair, so they swap together and never need a light mode override. */
  --inverse-bg:var(--ivory);
  /* The accent for text laid over a darkened photograph. Fixed, not swapped:
     the photograph is dark in both modes. Never for text on the page. */
  --accent-on-dark:#F2A413;
  --inverse-text:var(--ink);

  /* The photo strip under the homepage hero. The hero leaves exactly this
     much of the screen for it, so it is in view before anybody scrolls. */
  --marquee-w:clamp(150px,17vw,236px);
  --marquee-h:calc(var(--marquee-w) * .75 + 2px);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ----------------------------------------------------------------------------
   LIGHT

   Only the roles that should change do. Every value here was checked for
   contrast against the page it sits on, and secondary text is at least as
   readable as it is in dark mode, not merely present.
   ------------------------------------------------------------------------- */
html[data-theme="light"]{
  --ink:#F6F0E6;
  --ink-2:#FFFFFF;
  --ink-3:#EDE4D6;
  --ivory:#14100D;
  --ivory-2:#2A221C;
  --dim:rgba(20,16,13,.72);      /* 7.2:1 */
  --dimmer:rgba(20,16,13,.60);   /* 4.7:1 */
  --line:rgba(20,16,13,.13);
  --glass:rgba(246,240,230,.9);

  --amber-ink:#8A5A06;           /* 5.2:1, where amber itself is 1.8 */
  --terra-ink:#A8401A;           /* 5.4:1 */
  --sage-ink:#56694A;            /* 5.3:1 */

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--dim);
  font-family:var(--font-body);
  font-size:16.5px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

h1,h2,h3{
  font-family:var(--font-display);font-weight:600;
  color:var(--ivory);margin:0 0 .42em;line-height:1.03;letter-spacing:-.03em;
}
h1{font-size:clamp(2.85rem,7.6vw,5.4rem);font-weight:700}
h2{font-size:clamp(2.1rem,5.2vw,3.5rem)}
h3{font-size:clamp(1.28rem,3vw,1.62rem);line-height:1.18;letter-spacing:-.02em}
h4{font-family:var(--font-body);font-weight:700;color:var(--ivory);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 20px}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--ivory)}

/* --- utilities ------------------------------------------------------------ */
.u-wrap{width:100%;max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-inline:var(--gutter);position:relative;z-index:2}
.u-section{position:relative}
.u-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amber-ink);margin:0 0 18px;line-height:1.4;
}
.u-lead{font-size:clamp(1rem,2.3vw,1.08rem);max-width:58ch;color:var(--dim)}

.u-light{background:var(--light-surface);color:rgba(20,16,13,.66)}
.u-light h1,.u-light h2,.u-light h3,.u-light h4{color:var(--on-light)}
.u-light .u-lead{color:rgba(20,16,13,.66)}
.u-light .u-eyebrow{color:var(--terra-ink)}
.u-light strong{color:var(--on-light)}

.u-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:15px 30px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-weight:600;font-size:.92rem;line-height:1.2;
  border:1.5px solid transparent;cursor:pointer;text-align:center;
  transition:transform .22s var(--ease),background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.u-btn:hover{transform:translateY(-2px)}
.u-btn--amber{background:var(--amber);color:var(--on-light);box-shadow:0 8px 24px rgba(242,164,19,.22)}
.u-btn--amber:hover{background:#ffb424;box-shadow:0 14px 34px rgba(242,164,19,.3)}
.u-btn--ink{background:var(--ink);color:var(--ivory)}
.u-btn--ink:hover{background:#241d17}
.u-btn--outline{border-color:var(--line);color:var(--ivory)}
.u-btn--outline:hover{border-color:var(--ivory);background:var(--light-surface);color:var(--on-light)}
.u-btn--outline-dark{border-color:rgba(20,16,13,.24);color:var(--on-light)}
.u-btn--outline-dark:hover{border-color:var(--ink);background:var(--ink);color:var(--ivory)}
.u-arrow{line-height:1;transition:transform .22s ease}
.u-btn:hover .u-arrow{transform:translateX(4px)}

/* a shared photo frame so every image behaves the same way */
.u-shot{position:relative;overflow:hidden;background:var(--ink-2)}
.u-shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}

:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ============================================================================
   2. HEADER
   ========================================================================== */
.uaia-header{position:absolute;top:0;left:0;right:0;z-index:70}
.uaia-header.is-fixed{position:fixed;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);animation:dropin .35s var(--ease)}
@keyframes dropin{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.uaia-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px}

.uaia-logo{display:flex;align-items:center;gap:12px;flex:none;color:var(--ivory)}
.uaia-logo__mark{width:42px;height:42px;flex:none;border-radius:12px;background:var(--amber);display:grid;place-items:center;color:var(--on-light);font-family:var(--font-display);font-size:.9rem;font-weight:700;letter-spacing:-.03em}
.uaia-logo__txt{font-family:var(--font-display);font-size:1.2rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.uaia-logo__txt small{display:block;font-family:var(--font-body);font-size:.55rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--dimmer);margin-top:3px}

.uaia-nav{display:flex;align-items:center;gap:30px}
/* The menu prints bare list items straight into the nav. Nothing here
   removed their markers; Elementor's base styles happened to, so the site
   looked right only while Elementor was loaded. */
.uaia-nav li{list-style:none;margin:0;padding:0}
.uaia-nav a{font-size:.89rem;font-weight:500;color:var(--dim);padding:8px 0;position:relative;transition:color .2s ease}
.uaia-nav a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1.5px;background:var(--amber);transition:width .25s var(--ease)}
.uaia-nav a:hover{color:var(--ivory)}
.uaia-nav a:hover::after{width:100%}
.uaia-header__actions{display:flex;align-items:center;gap:12px}
.uaia-header .u-btn{min-height:46px;padding:12px 24px;font-size:.85rem}

.uaia-burger{display:none;width:48px;height:48px;flex:none;border:1px solid var(--line);background:rgba(246,240,230,.06);border-radius:13px;cursor:pointer;padding:0;place-items:center}
.uaia-burger span{display:block;width:19px;height:1.8px;background:var(--light-surface);border-radius:2px;position:relative;transition:background .2s ease}
.uaia-burger span::before,.uaia-burger span::after{content:"";position:absolute;left:0;width:19px;height:1.8px;background:var(--light-surface);border-radius:2px;transition:transform .28s var(--ease),top .28s var(--ease)}
.uaia-burger span::before{top:-6px}
.uaia-burger span::after{top:6px}
.uaia-burger.is-active span{background:transparent}
.uaia-burger.is-active span::before{top:0;transform:rotate(45deg)}
.uaia-burger.is-active span::after{top:0;transform:rotate(-45deg)}

.uaia-drawer{display:none}
@media(max-width:1100px){
  .uaia-nav,.uaia-header__actions .u-btn--outline{display:none}
  .uaia-burger{display:grid}
  .uaia-drawer{display:block;position:fixed;inset:0;z-index:90;background:rgba(20,16,13,.6);opacity:0;pointer-events:none;transition:opacity .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .uaia-drawer.is-open{opacity:1;pointer-events:auto}
  .uaia-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,86vw);background:var(--ink-2);padding:24px 24px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-y:auto;transform:translateX(100%);transition:transform .34s var(--ease);border-left:1px solid var(--line)}
  .uaia-drawer.is-open .uaia-drawer__panel{transform:translateX(0)}
  .uaia-drawer__head{display:flex;justify-content:flex-end;margin-bottom:12px}
  .uaia-drawer__close{width:46px;height:46px;border-radius:13px;border:1px solid var(--line);background:transparent;display:grid;place-items:center;font-size:1.35rem;color:var(--ivory);cursor:pointer;line-height:1}
  .uaia-drawer nav{display:flex;flex-direction:column;margin-bottom:24px}
  .uaia-drawer nav a{font-family:var(--font-display);font-size:1.45rem;font-weight:600;letter-spacing:-.02em;color:var(--ivory);padding:14px 2px;border-bottom:1px solid var(--line)}
  .uaia-drawer__cta{display:grid;gap:10px;margin-top:auto}
  .uaia-drawer__cta .u-btn{width:100%}
}
@media(max-width:560px){
  .uaia-header__inner{min-height:72px}
  .uaia-logo__txt{font-size:1.06rem}
  .uaia-logo__mark{width:38px;height:38px;border-radius:11px;font-size:.8rem}
  .uaia-header__actions .u-btn{padding:11px 18px;font-size:.81rem}
}
@media(max-width:400px){
  .uaia-logo__txt small{display:none}
  .uaia-header__actions .u-btn{display:none}
}

/* ============================================================================
   3. HERO, one large photograph
   ELEMENTOR: Container, Min Height 92vh, Background Image + dark overlay,
   Content Position Bottom.
   ========================================================================== */
.uaia-hero{position:relative;min-height:min(92vh,880px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-top:110px}
.uaia-hero__media{position:absolute;inset:0;z-index:0}
.uaia-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.uaia-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,13,.74) 0%,rgba(20,16,13,.44) 32%,rgba(20,16,13,.88) 76%,var(--ink) 100%)}
.uaia-hero__inner{padding-bottom:clamp(40px,5vw,72px)}
.uaia-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(26px,4vw,64px);align-items:end}
.uaia-hero h1{margin-bottom:0;max-width:15ch}
.uaia-hero h1 span{color:var(--amber-ink)}
.uaia-hero__side{padding-bottom:8px}
.uaia-hero__side p{font-size:1.02rem;color:var(--dim);margin-bottom:26px}
.uaia-hero__cta{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:900px){
  .uaia-hero{min-height:auto;padding-top:120px}
  .uaia-hero__grid{grid-template-columns:1fr;gap:24px;align-items:start}
  .uaia-hero h1{max-width:18ch}
  .uaia-hero__inner{padding-bottom:52px}
}
@media(max-width:560px){
  .uaia-hero{padding-top:100px}
  .uaia-hero__inner{padding-bottom:40px}
  .uaia-hero__cta{gap:10px}
  .uaia-hero__cta .u-btn{flex:1 1 100%}
}

/* ============================================================================
   4. MARQUEE, a continuous band of chapter photographs
   ELEMENTOR: Image Carousel widget. Slides to Show 6, Autoplay Yes,
   Autoplay Speed 2000, Infinite Loop Yes, Arrows and Dots Off, Pause on Hover Yes.
   ========================================================================== */
.uaia-marquee{border-block:1px solid var(--line);overflow:hidden;background:var(--ink)}
.uaia-marquee__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.uaia-marquee:hover .uaia-marquee__track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.uaia-marquee__item{width:var(--marquee-w);aspect-ratio:4/3;flex:none;border-right:1px solid var(--line)}
.uaia-marquee__item img{filter:saturate(.82) brightness(.82);transition:filter .4s ease}
.uaia-marquee__item:hover img{filter:saturate(1) brightness(1)}

/* ============================================================================
   5. STAT STRIP
   ========================================================================== */
.uaia-strip{border-bottom:1px solid var(--line);background:var(--ink)}
.uaia-strip__inner{display:grid;grid-template-columns:repeat(4,1fr)}
.uaia-strip__item{padding:24px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
.uaia-strip__item:last-child{border-right:0}
.uaia-strip__item b{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.05rem);font-weight:700;color:var(--ivory);letter-spacing:-.03em;line-height:1.1}
.uaia-strip__item b i{font-style:normal;color:var(--amber-ink)}
.uaia-strip__item small{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dimmer);line-height:1.4}
@media(max-width:900px){
  .uaia-strip__inner{grid-template-columns:1fr 1fr}
  .uaia-strip__item:nth-child(2n){border-right:0}
  .uaia-strip__item:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:560px){.uaia-strip__item{padding:18px 16px}}

/* ============================================================================
   6. STAGES, three tall photo panels
   ELEMENTOR: Container, 3 columns, each column Min Height 520px with a
   Background Image + gradient overlay, Content Position Bottom.
   ========================================================================== */
.uaia-stages{background:var(--ink)}
.uaia-stages__head{max-width:640px;margin-bottom:clamp(34px,4vw,52px)}
.uaia-stages__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.uaia-stage{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:30px 28px 32px;isolation:isolate;
}
.uaia-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease)}
.uaia-stage:hover img{transform:scale(1.06)}
.uaia-stage::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,16,13,.2) 0%,rgba(20,16,13,.55) 46%,rgba(20,16,13,.94) 100%);
}
.uaia-stage__num{
  position:absolute;top:26px;left:28px;right:28px;z-index:1;
  font-family:var(--font-display);font-size:.76rem;font-weight:700;
  letter-spacing:.13em;color:var(--amber-ink);display:flex;align-items:center;gap:10px;
}
.uaia-stage__num::after{content:"";flex:1;height:1px;background:rgba(242,164,19,.35)}
.uaia-stage h3{margin-bottom:10px}
.uaia-stage p{font-size:.92rem;margin-bottom:20px;line-height:1.6;color:rgba(246,240,230,.76)}
.uaia-stage__link{display:inline-flex;align-items:center;gap:9px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory)}
.uaia-stage:hover .u-arrow{transform:translateX(5px)}
@media(max-width:900px){
  .uaia-stages__grid{grid-template-columns:1fr}
  .uaia-stage{min-height:400px}
}
@media(max-width:560px){.uaia-stage{min-height:340px;padding:26px 22px 28px}}

/* ============================================================================
   7. VALUE, four photo-topped cards
   ========================================================================== */
.uaia-value{background:var(--ink-2)}
.uaia-value__head{max-width:640px;margin-bottom:clamp(34px,4vw,52px)}
.uaia-value__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.uaia-item{
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color .3s ease,transform .3s var(--ease);
  display:flex;flex-direction:column;
}
.uaia-item:hover{border-color:rgba(242,164,19,.42);transform:translateY(-5px)}
.uaia-item__shot{aspect-ratio:4/3}
.uaia-item:hover .uaia-item__shot img{transform:scale(1.06)}
.uaia-item__body{padding:24px 22px 26px}
.uaia-item h3{font-size:1.14rem;margin-bottom:8px}
.uaia-item p{font-size:.88rem;margin:0;line-height:1.6}
@media(max-width:1100px){.uaia-value__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .uaia-value__grid{grid-template-columns:1fr;gap:12px}
  .uaia-item{flex-direction:row;align-items:stretch}
  .uaia-item__shot{aspect-ratio:1;width:112px;flex:none}
  .uaia-item__body{padding:18px 18px 18px 16px}
  .uaia-item h3{font-size:1.05rem}
  .uaia-item p{font-size:.83rem}
}

/* ============================================================================
   8. SOFT LANDING, checklist beside a 2x2 photo grid
   ========================================================================== */
.uaia-soft{background:var(--ink)}
.uaia-soft__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.uaia-soft__list{list-style:none;padding:0;margin:26px 0 32px;display:grid;gap:0}
.uaia-soft__list li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:15px 0;border-bottom:1px solid var(--line);font-size:.94rem;line-height:1.6}
.uaia-soft__list li:first-child{border-top:1px solid var(--line)}
.uaia-soft__list i{font-style:normal;font-family:var(--font-display);font-weight:700;font-size:.8rem;color:var(--amber-ink);letter-spacing:.08em;padding-top:3px}
.uaia-soft__mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.uaia-soft__mosaic .u-shot{border-radius:var(--r-md);aspect-ratio:1}
.uaia-soft__mosaic .u-shot:nth-child(1){aspect-ratio:1/1.24;align-self:end}
.uaia-soft__mosaic .u-shot:nth-child(4){aspect-ratio:1/1.24}
.uaia-soft__mosaic .u-shot:hover img{transform:scale(1.06)}
.uaia-soft .u-btn{align-self:flex-start}
@media(max-width:900px){
  .uaia-soft__grid{grid-template-columns:1fr;gap:36px}
  .uaia-soft__mosaic{order:-1}
}
@media(max-width:560px){
  .uaia-soft__mosaic{gap:9px}
  .uaia-soft .u-btn{width:100%}
}

/* ============================================================================
   9. CHAPTERS, departures board, thumbnail on every row
   ELEMENTOR: Loop Grid, 1 column, one row template. Featured image = thumbnail.
   ========================================================================== */
.uaia-board{background:var(--ink)}
.uaia-board__head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:32px}
.uaia-board__head>div{max-width:600px}
.uaia-board__head p{margin:0}

.uaia-board__legend{
  display:grid;grid-template-columns:76px minmax(92px,auto) minmax(150px,1.2fr) 1.4fr minmax(110px,auto) auto 30px;
  gap:20px;align-items:center;padding:0 18px 12px;
  font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);
  border-bottom:1px solid var(--line);
}
.uaia-row{
  display:grid;grid-template-columns:76px minmax(92px,auto) minmax(150px,1.2fr) 1.4fr minmax(110px,auto) auto 30px;
  gap:20px;align-items:center;padding:14px 18px;
  border-bottom:1px solid var(--line);position:relative;
  transition:background .25s ease,padding-left .25s var(--ease);
}
.uaia-row:hover{background:var(--ink-2);padding-left:26px}
.uaia-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber);transform:scaleY(0);transition:transform .25s var(--ease)}
.uaia-row:hover::before{transform:scaleY(1)}
.uaia-row__shot{width:88px;aspect-ratio:4/3;border-radius:var(--r-sm);flex:none}
.uaia-row__shot img{filter:saturate(.8) brightness(.85);transition:transform .7s var(--ease),filter .3s ease}
.uaia-row:hover .uaia-row__shot img{transform:scale(1.07);filter:saturate(1) brightness(1)}
.uaia-row__city{font-family:var(--font-display);font-size:1.28rem;font-weight:600;color:var(--ivory);letter-spacing:-.02em;line-height:1.15}
.uaia-row__served{font-size:.84rem;color:var(--dim);line-height:1.5}
.uaia-row__url{font-size:.81rem;color:var(--dimmer);word-break:break-all}
.uaia-row:hover .uaia-row__url{color:var(--amber-ink)}
.uaia-row__go{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ivory);font-size:.85rem;flex:none;transition:background .25s ease,border-color .25s ease,color .25s ease}
.uaia-row:hover .uaia-row__go{background:var(--amber);border-color:var(--amber);color:var(--on-light)}

.uaia-status{display:inline-flex;align-items:center;gap:8px;font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);border:1px solid currentColor;white-space:nowrap}
.uaia-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.uaia-status--live{color:var(--sage-ink)}
.uaia-status--forming{color:var(--amber-ink)}
.uaia-status--soon{color:var(--dimmer)}
.uaia-flag{
  display:inline-block;vertical-align:middle;margin-left:9px;
  font-family:var(--font-body);font-size:.56rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-light);background:var(--amber);padding:4px 7px;border-radius:4px;
}
.uaia-board__foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:26px 18px 0}
.uaia-board__foot p{margin:0;font-size:.9rem;max-width:46ch}

@media(max-width:1100px){
  .uaia-row__url,.uaia-board__legend span:nth-child(5){display:none}
  .uaia-row__shot{width:78px}
}
@media(max-width:900px){
  .uaia-board__legend{display:none}
  .uaia-row:hover{padding-left:20px}
  .uaia-row__shot{width:84px;grid-column:1;grid-row:1/span 2}
  .uaia-row__city{grid-column:2;grid-row:1;font-size:1.14rem}
  .uaia-row__status{grid-column:3;grid-row:1;justify-self:end}
  .uaia-row__served{grid-column:2/-1;grid-row:2;font-size:.79rem}
  .uaia-row__go{display:none}
}
@media(max-width:560px){
  .uaia-board__head .u-btn,.uaia-board__foot .u-btn{width:100%}
    .uaia-row__shot{width:68px}
  .uaia-row__city{grid-column:2;grid-row:1}
  .uaia-row__status{grid-column:2;grid-row:3;justify-self:start;margin-top:6px}
  .uaia-row__served{grid-column:2;grid-row:2}
  .uaia-row--flagship .uaia-flag{display:block;margin:7px 0 0;width:fit-content}
}

/* ============================================================================
   10. GALLERY, the centrepiece mosaic
   ELEMENTOR: Gallery widget (Masonry, 4 columns) or a Container with 9 Images
   and the spans below applied per image via Advanced > Custom CSS classes.
   ========================================================================== */
.uaia-gallery{background:var(--ink-2);overflow:hidden}
.uaia-gallery__head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:34px}
.uaia-gallery__head>div{max-width:560px}
.uaia-gallery__head p{margin:0}
.uaia-gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,15vw,190px);gap:12px}
.uaia-gallery__grid .u-shot{border-radius:var(--r-md)}
.uaia-gallery__grid .u-shot::after{
  content:"";position:absolute;inset:0;background:rgba(20,16,13,.22);transition:background .35s ease;
}
.uaia-gallery__grid .u-shot:hover::after{background:rgba(20,16,13,0)}
.uaia-gallery__grid .u-shot:hover img{transform:scale(1.05)}
.g-a{grid-column:span 2;grid-row:span 2}
.g-b{grid-column:span 1;grid-row:span 1}
.g-c{grid-column:span 1;grid-row:span 2}
.g-d{grid-column:span 2;grid-row:span 1}
.uaia-gallery__cap{
  display:flex;align-items:center;gap:12px;margin-top:22px;
  font-size:.78rem;color:var(--dimmer);letter-spacing:.04em;
}

@media(max-width:900px){
  .uaia-gallery__grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(120px,20vw,160px)}
  .g-c{grid-row:span 1}
}
@media(max-width:560px){
  .uaia-gallery__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;gap:9px}
  .g-a{grid-column:span 2;grid-row:span 2}
  .g-d{grid-column:span 2;grid-row:span 1}
  .uaia-gallery__head .u-btn{width:100%}
}

/* ============================================================================
   11. FOUNDER, light break, portrait plus three supporting shots
   ========================================================================== */
.uaia-founder__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.uaia-founder__main{border-radius:var(--r-lg);overflow:hidden;width:100%;aspect-ratio:3/4.1}
.uaia-founder__main img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.uaia-founder__main{grid-row:span 3;aspect-ratio:3/4.1}
.uaia-founder__main:hover img{transform:scale(1.04)}
.uaia-founder blockquote{
  margin:0 0 26px;padding:0;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.4rem,3.6vw,2rem);line-height:1.28;letter-spacing:-.025em;color:var(--on-light);
}
.uaia-founder blockquote::before{content:"“";color:var(--terra-ink)}
.uaia-founder blockquote::after{content:"”";color:var(--terra-ink)}
.uaia-founder__sig{display:flex;align-items:center;gap:15px;padding-top:24px;border-top:1px solid var(--line-dark);margin-top:26px}
.uaia-founder__sig img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none}
.uaia-founder__sig b{display:block;font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--on-light);letter-spacing:-.02em}
.uaia-founder__sig small{font-size:.8rem;line-height:1.45}
@media(max-width:900px){
  .uaia-founder__grid{grid-template-columns:1fr;gap:34px}
  .uaia-founder__main{max-width:520px;margin-inline:auto}
  .uaia-founder__main{aspect-ratio:3/3.6}
}

/* ============================================================================
   12. HUB, three photo cards
   ========================================================================== */
/* The theme's own guides section. Scoped to that section, because UAIA Core's
   Hub and the members page also use the class uaia-hub, and an unscoped rule
   painted both of them cream in dark mode, with cream text on top. */
.uaia-block.uaia-hub{background:var(--ivory-2)}
.uaia-block.uaia-hub .uaia-hub__head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:38px}
.uaia-block.uaia-hub .uaia-hub__head>div{max-width:560px}
.uaia-block.uaia-hub .uaia-hub__head p{margin:0}
.uaia-block.uaia-hub .uaia-hub__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.uaia-post{background:var(--light-surface);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s ease}
.uaia-post:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(20,16,13,.14)}
.uaia-post__img{aspect-ratio:16/10}
.uaia-post:hover .uaia-post__img img{transform:scale(1.05)}
.uaia-post__tag{position:absolute;left:14px;top:14px;z-index:2;background:var(--ink);color:var(--amber-ink);font-size:.61rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill)}
.uaia-post__body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.uaia-post h3{font-size:1.16rem;margin-bottom:10px}
.uaia-post p{font-size:.88rem;margin-bottom:18px;line-height:1.62;color:rgba(20,16,13,.64)}
.uaia-post__meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-dark);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-ink);display:flex;align-items:center;gap:8px}
.uaia-post:hover .u-arrow{transform:translateX(4px)}
@media(max-width:900px){.uaia-block.uaia-hub .uaia-hub__grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .uaia-block.uaia-hub .uaia-hub__grid{grid-template-columns:1fr}
  .uaia-block.uaia-hub .uaia-hub__head .u-btn{width:100%}
}

/* ============================================================================
   13. VOICES, portrait beside each quote
   ========================================================================== */
.uaia-voices{background:var(--ink)}
.uaia-voices__head{max-width:600px;margin-bottom:clamp(32px,4vw,48px)}
.uaia-voices__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.uaia-quote{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;margin:0;display:flex;flex-direction:column;
  transition:border-color .3s ease;
}
.uaia-quote:hover{border-color:rgba(242,164,19,.35)}
.uaia-quote__shot{aspect-ratio:4/3}
.uaia-quote:hover .uaia-quote__shot img{transform:scale(1.05)}
.uaia-quote__body{padding:26px 26px 24px;display:flex;flex-direction:column;flex:1}
.uaia-quote p{font-family:var(--font-display);font-weight:500;font-size:1.02rem;line-height:1.42;letter-spacing:-.015em;color:var(--ivory);margin-bottom:22px}
.uaia-quote__who{margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.uaia-quote__who b{display:block;color:var(--ivory);font-size:.89rem;font-weight:600}
.uaia-quote__who small{font-size:.76rem;color:var(--dimmer);line-height:1.45}
@media(max-width:900px){.uaia-voices__grid{grid-template-columns:1fr;max-width:560px}}

/* ============================================================================
   14. CTA, photograph behind an amber wash
   ELEMENTOR: Container with Background Image + Background Overlay set to
   #F2A413 at 88%, Blend Mode Normal.
   ========================================================================== */
.uaia-cta{position:relative;overflow:hidden;padding:var(--section-y) 0;color:rgba(20,16,13,.78)}
.uaia-cta__media{position:absolute;inset:0;z-index:0}
.uaia-cta__media img{width:100%;height:100%;object-fit:cover}
.uaia-cta__media::after{content:"";position:absolute;inset:0;background:var(--amber);opacity:.9;mix-blend-mode:normal}
.uaia-cta__inner{text-align:center;max-width:720px;margin-inline:auto}
.uaia-cta h2{color:var(--on-light);max-width:17ch;margin-inline:auto}
.uaia-cta .u-eyebrow{color:rgba(20,16,13,.62);justify-content:center}
.uaia-cta p{max-width:50ch;margin:0 auto 28px;font-size:clamp(.98rem,2.3vw,1.06rem)}
.uaia-cta__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){.uaia-cta__btns .u-btn{width:100%}}

/* ============================================================================
   15. FOOTER
   ========================================================================== */
.uaia-footer{background:var(--ink);padding:clamp(52px,6vw,86px) 0 0}
.uaia-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.uaia-footer a{font-size:.89rem;display:inline-block;padding:2px 0;transition:color .2s ease}
.uaia-footer a:hover{color:var(--amber-ink)}
.uaia-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:40px;padding-bottom:46px}
.uaia-footer__brand p{font-size:.89rem;max-width:34ch;margin-top:16px}
.uaia-footer__social{display:flex;gap:9px;margin-top:20px}
.uaia-footer__social a{width:46px;height:46px;border-radius:13px;border:1px solid var(--line);display:grid;place-items:center;font-size:.77rem;font-weight:700;color:var(--ivory);padding:0;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}
.uaia-footer__social a:hover{background:var(--amber);border-color:var(--amber);color:var(--on-light);transform:translateY(-3px)}
.uaia-footer__news p{font-size:.88rem;margin-bottom:16px}
.uaia-footer__form{display:flex;gap:8px;flex-wrap:wrap}
.uaia-footer__form input{flex:1 1 160px;min-width:0;padding:14px 19px;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(246,240,230,.05);color:var(--ivory);font-family:var(--font-body);font-size:16px;min-height:52px}
.uaia-footer__form input::placeholder{color:var(--dimmer)}
.uaia-footer__form button{padding:14px 24px;font-size:.85rem;flex:0 0 auto}
.uaia-footer__bar{border-top:1px solid var(--line);padding:22px 0 calc(22px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.81rem;color:var(--dimmer)}
.uaia-footer__bar .flagship{color:var(--amber-ink);font-weight:500}
.uaia-footer__bar nav{display:flex;gap:20px;flex-wrap:wrap}
@media(max-width:900px){.uaia-footer__grid{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){
  .uaia-footer__grid{grid-template-columns:1fr;gap:32px;padding-bottom:36px}
  .uaia-footer__form button{width:100%}
  .uaia-footer__bar{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ============================================================================
   THEME ADDITIONS, WordPress + Elementor integration
   These rules do not exist in the static mockup. They make the design behave
   correctly inside the Elementor editor and with WordPress-generated markup.
   ========================================================================== */

/* Elementor wraps every widget in .elementor-widget-container. Our sections
   assume they own their full width, so neutralise the wrapper. */
.elementor-widget-container > .uaia-block{width:100%}

/* ---------------------------------------------------------------------------
   HOW WIDTH WORKS NOW

   Widgets no longer try to break out of Elementor. Each widget's root is a
   .uaia-block that simply fills whatever Elementor gives it. Width, background
   and outer padding are set on the Elementor container, where the client can
   see and change them.

   The only job left for CSS is to stop Elementor's six nested wrappers from
   shrinking or off-centring the widget on the way down.
   --------------------------------------------------------------------------- */

/* The widget root fills its parent. It sets no width of its own. */
.uaia-block{width:100%;max-width:100%;position:relative}

/* Elementor's wrappers pass their full width through to the widget. */
[data-widget_type^="uaia_"],
[data-widget_type^="uaia_"] > .elementor-widget-container{width:100%;max-width:100%}

/* Any Elementor row, column or container holding a UAIA widget stays centred
   and drops the side padding that would otherwise shift the block sideways. */
.elementor-section:has([data-widget_type^="uaia_"]) > .elementor-container{
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
}
.elementor-column:has([data-widget_type^="uaia_"]) > .elementor-widget-wrap{padding-inline:0}
.e-con:has([data-widget_type^="uaia_"]){--padding-inline-start:0px;--padding-inline-end:0px;max-width:100%}

/* ---------------------------------------------------------------------------
   FULL-WIDTH ENFORCEMENT

   Something above <main> is capping content at roughly 1200px while the
   absolutely-positioned header escapes it. Rather than guess which of
   Elementor's wrappers is responsible, every one of them is forced to fill
   its parent. The design is full-width throughout, so nothing is lost.

   Turn this off in Appearance > Customize > UAIA Layout if you want boxed
   Elementor sections back.
   --------------------------------------------------------------------------- */
html,body{width:100%;max-width:100%}
#uaia-main{width:100%;max-width:100%}

body.uaia-force-full #uaia-main .elementor,
body.uaia-force-full #uaia-main .elementor-section,
body.uaia-force-full #uaia-main .elementor-container,
body.uaia-force-full #uaia-main .elementor-column,
body.uaia-force-full #uaia-main .elementor-widget-wrap,
body.uaia-force-full #uaia-main .elementor-widget,
body.uaia-force-full #uaia-main .e-con,
body.uaia-force-full #uaia-main .e-con-inner{
	width:100%!important;
	max-width:100%!important;
	margin-left:auto!important;
	margin-right:auto!important;
	float:none!important;
}
body.uaia-force-full #uaia-main .elementor-column{flex:1 1 100%!important}
body.uaia-force-full #uaia-main .elementor-widget-wrap,
body.uaia-force-full #uaia-main .elementor-container{padding-inline:0!important}

/* Inner content stays readable: it centres inside the block rather than
   running to the screen edges. This is the only max-width the theme sets, and
   it is inside the widget, so nothing has to be escaped. */
.uaia-block > .u-wrap{max-width:var(--wrap);margin-left:auto;margin-right:auto}

/* Vertical rhythm now lives on the widget, so it can be overridden from
   Elementor's Advanced tab like any other widget. */
.uaia-block{padding-block:var(--section-y)}
.uaia-hero,.uaia-marquee,.uaia-strip{padding-block:0}

/* In the editor, empty repeaters would collapse to nothing and become
   un-clickable. Give them a visible minimum. */
.elementor-editor-active .uaia-empty{
	min-height:160px;display:grid;place-items:center;text-align:center;
	border:1px dashed var(--line);border-radius:var(--r-md);padding:26px;
	color:var(--dimmer);font-size:.88rem;
}
.elementor-editor-active .u-light .uaia-empty{border-color:var(--line-dark);color:rgba(20,16,13,.5)}

/* WordPress core alignment + caption classes */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{margin-inline:auto}
.wp-caption-text,.wp-element-caption{font-size:.82rem;color:var(--dimmer);margin-top:8px}
.screen-reader-text{
	border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
	overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;
}
.skip-link:focus{
	position:fixed;top:12px;left:12px;z-index:9999;background:var(--amber);color:var(--on-light);
	padding:12px 20px;border-radius:var(--r-pill);font-weight:700;clip:auto;clip-path:none;
	width:auto;height:auto;margin:0;
}

/* Admin bar offset for the sticky header */
.admin-bar .uaia-header.is-fixed{top:32px}
@media(max-width:782px){.admin-bar .uaia-header.is-fixed{top:46px}}

/* Inner pages: the header is absolute over the hero on the homepage, but on a
   normal page it needs a solid ground to sit on. */
.uaia-header--solid{position:relative;background:var(--ink);border-bottom:1px solid var(--line)}

/* Generic page + post content */
.uaia-page{padding:clamp(48px,7vw,104px) 0}
.uaia-page__head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.uaia-entry{max-width:760px}
/* A reading-width wrapper must never cage a builder layout. */
.uaia-entry:has(.elementor),
.uaia-entry:has(.uaia-block),
.elementor-page .uaia-entry,
.elementor-page .uaia-page > .u-wrap{max-width:none;width:100%}
.elementor-page .uaia-page{padding:0}
.uaia-entry h2,.uaia-entry h3{margin-top:1.6em}
.uaia-entry a:not(.u-btn){color:var(--amber-ink);border-bottom:1px solid rgba(242,164,19,.4)}
.uaia-entry a:not(.u-btn):hover{border-color:var(--amber)}
.uaia-entry img{border-radius:var(--r-md);margin-block:1.6em}
.uaia-entry blockquote{
	margin:1.8em 0;padding-left:24px;border-left:2px solid var(--amber);
	font-family:var(--font-display);font-size:1.2rem;line-height:1.4;color:var(--ivory);
}
.uaia-entry ul,.uaia-entry ol{padding-left:1.3em}
.uaia-entry li{margin-bottom:.5em}
.uaia-entry code{background:var(--ink-2);padding:2px 7px;border-radius:6px;font-size:.9em}
.uaia-entry pre{background:var(--ink-2);padding:20px;border-radius:var(--r-md);overflow-x:auto}
.uaia-entry table{width:100%;border-collapse:collapse;margin-block:1.6em}
.uaia-entry th,.uaia-entry td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.uaia-entry th{color:var(--ivory);font-weight:600}

/* Archive grid reuses the guide card */
.uaia-archive__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.uaia-archive__grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.uaia-archive__grid{grid-template-columns:1fr}}

.uaia-pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:44px}
.uaia-pagination .page-numbers{
	min-width:46px;min-height:46px;display:inline-grid;place-items:center;padding:0 14px;
	border:1px solid var(--line);border-radius:var(--r-pill);font-size:.88rem;color:var(--dim);
}
.uaia-pagination .page-numbers:hover,.uaia-pagination .page-numbers.current{
	background:var(--amber);border-color:var(--amber);color:var(--on-light);font-weight:700;
}

/* 404 + search */
.uaia-404{text-align:center;padding:clamp(70px,10vw,150px) 0}
.uaia-404 h1{font-size:clamp(4rem,14vw,9rem);color:var(--amber-ink);margin-bottom:.1em}
.uaia-search{display:flex;gap:8px;max-width:420px;margin:26px auto 0;flex-wrap:wrap}
.uaia-search input[type=search]{
	flex:1 1 180px;min-width:0;min-height:52px;padding:14px 20px;border-radius:var(--r-pill);
	border:1px solid var(--line);background:rgba(246,240,230,.05);color:var(--ivory);
	font-family:var(--font-body);font-size:16px;
}
.uaia-search input[type=search]::placeholder{color:var(--dimmer)}

/* Chapter single template */
.uaia-chapter-hero{position:relative;min-height:clamp(300px,42vw,480px);display:flex;align-items:flex-end;overflow:hidden}
.uaia-chapter-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.uaia-chapter-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,16,13,.3),rgba(20,16,13,.95))}
.uaia-chapter-hero__inner{padding-block:clamp(30px,4vw,58px)}
.uaia-chapter-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.uaia-chapter-meta a{color:var(--amber-ink)}

/* ============================================================================
   WIDGET-ONLY CLASSES
   These exist because the Elementor widgets expose options the static mockup
   did not have, flipping the Soft Landing, hiding board thumbnails, and so on.
   ========================================================================== */

/* Soft Landing: photographs on the left instead of the right */
.uaia-soft--flip .uaia-soft__grid > *:first-child{order:2}
.uaia-soft--flip .uaia-soft__mosaic{order:1}
@media(max-width:900px){
	.uaia-soft--flip .uaia-soft__grid > *:first-child{order:2}
	.uaia-soft--flip .uaia-soft__mosaic{order:1}
}

/* Marquee: dimming is optional */
.uaia-marquee__item img{filter:none}
.uaia-marquee.is-dim .uaia-marquee__item img{filter:saturate(.82) brightness(.82);transition:filter .4s ease}
.uaia-marquee.is-dim .uaia-marquee__item:hover img{filter:saturate(1) brightness(1)}

/* Chapter board without photographs */
.uaia-board--nothumbs .uaia-board__legend,
@media(max-width:1100px){
	.uaia-board--nothumbs .uaia-board__legend,
	.uaia-board--nothumbs .uaia-row{grid-template-columns:112px minmax(130px,1fr) 1.5fr 34px}
}
@media(max-width:900px){
		.uaia-board--nothumbs .uaia-row__city{grid-column:1;grid-row:1}
	.uaia-board--nothumbs .uaia-row__status{grid-column:2;grid-row:1}
	.uaia-board--nothumbs .uaia-row__served{grid-column:1/-1;grid-row:2}
}
/* An empty thumbnail cell should not collapse the grid */
.uaia-row__shot:empty{background:var(--ink-3)}

/* Feature card as a link */
a.uaia-item{color:inherit;text-decoration:none}
a.uaia-item:hover h3{color:var(--amber-ink)}

/* Guide cards: titles and images are links now */
.uaia-post h3 a{color:inherit}
.uaia-post:hover h3 a{color:var(--terra-ink)}
.uaia-post__img{display:block}

/* Gallery tiles are links when the lightbox is on */
a.u-shot{display:block}

/* Custom logo image instead of the lettermark */
.uaia-logo--img .uaia-logo__img{max-height:52px;width:auto}

/* Elementor lightbox tuned to the palette */
.elementor-lightbox{--lightbox-ui-color:var(--ivory)}

/* Founder stack needs the main image to span the side column properly even
   when fewer than three side photos are supplied. */

/* Widget sections inside Elementor should not inherit stray margins */
.elementor-widget-uaia_hero .elementor-widget-container,
.elementor-widget-uaia_marquee .elementor-widget-container,
.elementor-widget-uaia_stats .elementor-widget-container,
.elementor-widget-uaia_cta .elementor-widget-container{margin:0;padding:0}

/* Footer widget area */
.uaia-footer__widget{margin-top:6px}
.uaia-footer__widget input[type=email],
.uaia-footer__widget input[type=text]{
	width:100%;padding:14px 19px;border-radius:var(--r-pill);min-height:52px;
	border:1px solid var(--line);background:rgba(246,240,230,.05);
	color:var(--ivory);font-family:var(--font-body);font-size:16px;
}

/* ============================================================================
   CARD SPANS
   Per-card width overrides from the "Card width" control. Grids are declared
   with minmax(0,1fr) so a spanning card cannot blow the row out.
   ========================================================================== */
.uaia-span-2{grid-column:span 2}
.uaia-span-3{grid-column:span 3}
.uaia-span-full{grid-column:1/-1}
@media(max-width:900px){
	.uaia-span-3{grid-column:span 2}
}
@media(max-width:640px){
	.uaia-span-2,.uaia-span-3,.uaia-span-full{grid-column:1/-1}
}

/* Rich-text card bodies. The editor wraps content in <p>, so style the
   wrapper rather than assuming a bare paragraph. */
.uaia-item__text,.uaia-stage__text,.uaia-quote__text{margin:0}
.uaia-item__text > *:last-child,
.uaia-stage__text > *:last-child,
.uaia-quote__text > *:last-child{margin-bottom:0}
.uaia-item__text p{font-size:.88rem;line-height:1.6;margin-bottom:.7em}
.uaia-stage__text p{font-size:.92rem;line-height:1.6;color:rgba(246,240,230,.76);margin-bottom:.7em}
.uaia-quote__text p{font-family:var(--font-display);font-weight:500;font-size:1.02rem;line-height:1.42;letter-spacing:-.015em;color:var(--ivory);margin-bottom:.6em}
.uaia-item__text a,.uaia-stage__text a,.uaia-quote__text a{color:var(--amber-ink);text-decoration:underline}
.uaia-item__text ul,.uaia-stage__text ul{padding-left:1.1em;margin:.4em 0}
.uaia-quote__text{margin-bottom:22px}

/* Grids declare minmax(0,1fr) so a spanning card cannot force an overflow. */
.uaia-value__grid,.uaia-stages__grid,.uaia-voices__grid{grid-auto-flow:dense}

/* ============================================================================
   MOBILE PASS
   Everything below runs last so it wins at equal specificity. Two jobs:
   make every section behave down to 320px, and centre the page on phones.

   Centring is controlled by the body class .uaia-center-mobile, set from
   Appearance > Customize > UAIA Layout. On by default.
   ========================================================================== */

/* ---- 900px and under: tablets and large phones ------------------------- */
@media(max-width:900px){
	.uaia-hero{min-height:auto;padding-top:104px}
	.uaia-hero__inner{padding-bottom:44px}
	.uaia-stage{min-height:360px}
	.uaia-marquee__item{width:clamp(140px,32vw,200px)}
	.uaia-board__foot{padding-inline:0}
	.uaia-gallery__grid{grid-auto-rows:minmax(110px,auto)}
}

/* ---- 640px and under: phones ------------------------------------------- */
@media(max-width:640px){
	:root{--gutter:18px}

	.uaia-hero{padding-top:92px}
	.uaia-hero__inner{padding-bottom:36px}
	.uaia-hero h1{max-width:none}

	.uaia-stage{min-height:300px;padding:24px 20px 26px}
	.uaia-stage__num{top:20px;left:20px;right:20px}

	.uaia-item{padding:20px}
	.uaia-quote__body{padding:22px 20px 20px}
	.uaia-post__body{padding:20px 20px 22px}

	.uaia-strip__item{padding:16px 14px}
	.uaia-founder__main{aspect-ratio:4/5}

	.uaia-soft__mosaic{gap:9px}
	.uaia-soft__list li{padding:13px 0}

	.uaia-gallery__grid{grid-auto-rows:minmax(96px,auto)}
	.uaia-marquee__item{width:clamp(128px,42vw,180px)}

	/* Long subdomains must never widen the page. */
	.uaia-row__url,.uaia-row__served{overflow-wrap:anywhere}
}

/* ---- 420px and under: small phones -------------------------------------- */
@media(max-width:420px){
	:root{--gutter:16px}

	.uaia-hero{padding-top:84px}
	.uaia-stage{min-height:260px;padding:22px 18px 24px}
	.uaia-item{padding:18px}
	.uaia-row{padding:12px 12px}
	.uaia-row__shot{width:58px}
	.uaia-row__city{font-size:1.02rem}
	.uaia-footer__social a{width:42px;height:42px}
	.uaia-gallery__grid{grid-template-columns:1fr;grid-auto-rows:minmax(150px,auto)}
	.uaia-gallery__grid .u-shot{grid-column:auto!important;grid-row:auto!important}
}

/* ---- 340px and under: the floor ----------------------------------------- */
@media(max-width:340px){
	:root{--gutter:13px}
	.uaia-strip__inner{grid-template-columns:1fr}
	.uaia-strip__item{border-right:0;border-bottom:1px solid var(--line)}
	.uaia-soft__mosaic{grid-template-columns:1fr}
}

/* ============================================================================
   CENTRE ON MOBILE
   ========================================================================== */
@media(max-width:900px){
	body.uaia-center-mobile .uaia-block{text-align:center}

	/* The eyebrow is a flex row with a leading rule, so it needs centring
	   as a flex container, not just as text. */
	body.uaia-center-mobile .u-eyebrow{justify-content:center}

	body.uaia-center-mobile .u-lead,
	body.uaia-center-mobile .uaia-hero h1,
	body.uaia-center-mobile .uaia-founder blockquote,
	body.uaia-center-mobile .uaia-board__foot p,
	body.uaia-center-mobile .uaia-gallery__cap,
	body.uaia-center-mobile .uaia-item__text,
	body.uaia-center-mobile .uaia-stage__text,
	body.uaia-center-mobile .uaia-quote__text{margin-left:auto;margin-right:auto}

	/* Blocks that are visually anchored need their anchor moved too. */
	body.uaia-center-mobile .uaia-founder blockquote{border-left:0;padding-left:0;border-top:2px solid var(--amber);padding-top:18px}
	body.uaia-center-mobile .uaia-gallery__cap{justify-content:center}
	body.uaia-center-mobile .uaia-gallery__cap::before{display:none}
	body.uaia-center-mobile .uaia-stage__num::after{display:none}
	body.uaia-center-mobile .uaia-stage__num{justify-content:center}

	/* Rows of buttons and people. */
	body.uaia-center-mobile .uaia-hero__cta,
	body.uaia-center-mobile .uaia-cta__btns,
	body.uaia-center-mobile .uaia-board__head,
	body.uaia-center-mobile .uaia-hub__head,
	body.uaia-center-mobile .uaia-gallery__head,
	body.uaia-center-mobile .uaia-chapters__head,
	body.uaia-center-mobile .uaia-founder__sig,
	body.uaia-center-mobile .uaia-quote__who,
	body.uaia-center-mobile .uaia-footer__social,
	body.uaia-center-mobile .uaia-footer__form{justify-content:center}

	body.uaia-center-mobile .uaia-board__head>div,
	body.uaia-center-mobile .uaia-hub__head>div,
	body.uaia-center-mobile .uaia-gallery__head>div{max-width:none;width:100%}

	body.uaia-center-mobile .uaia-soft__body .u-btn,
	body.uaia-center-mobile .uaia-soft .u-btn{align-self:center}

	/* A numbered checklist reads badly centred, so the row stays left while
	   the group as a whole is centred. */
	body.uaia-center-mobile .uaia-soft__list{text-align:left;max-width:34rem;margin-inline:auto}

	/* Directory rows: the card is centred, the detail lines stay readable. */
	body.uaia-center-mobile .uaia-row{justify-items:center}
	body.uaia-center-mobile .uaia-row__status{justify-self:center}

	body.uaia-center-mobile .uaia-footer__grid{text-align:center}
	body.uaia-center-mobile .uaia-footer__bar{align-items:center;text-align:center}
	body.uaia-center-mobile .uaia-footer__bar nav{justify-content:center}
	body.uaia-center-mobile .uaia-footer__brand .uaia-logo{justify-content:center}
	body.uaia-center-mobile .uaia-footer__brand .uaia-logo--footer{margin-inline:auto}
	body.uaia-center-mobile .uaia-footer__brand p{margin-inline:auto}
	body.uaia-center-mobile .uaia-footer ul{justify-items:center}
}

/* The value card flips to a horizontal layout on phones; centring that would
   look wrong, so it opts out. */
@media(max-width:560px){
	body.uaia-center-mobile .uaia-item{text-align:left}
	body.uaia-center-mobile .uaia-hero__trust{justify-content:center}
	body.uaia-center-mobile .uaia-hero__trust p{text-align:center}
}

/* ============================================================================
   MOBILE STACKING, MUST WIN
   The hero, Soft Landing and Founder each expose a "split" slider that writes
   grid-template-columns through an Elementor responsive control. Elementor's
   per-element selector outranks a plain theme media query, so without this the
   two-column layout survives on a phone and everything reads as two thin
   columns. These sections are designed to stack, so the stack is enforced.
   ========================================================================== */
/* Stacking follows the widget's "Stack to one column" setting. */
.uaia-stack-always .uaia-hero__grid,
.uaia-stack-always .uaia-soft__grid,
.uaia-stack-always .uaia-founder__grid{grid-template-columns:minmax(0,1fr)!important}

@media(max-width:900px){
	.uaia-stack-tablet .uaia-hero__grid,
	.uaia-stack-tablet .uaia-soft__grid,
	.uaia-stack-tablet .uaia-founder__grid{grid-template-columns:minmax(0,1fr)!important}

	.uaia-soft__grid{gap:32px}
	.uaia-founder__grid{gap:30px}
	.uaia-hero__grid{gap:22px}

	/* Photos read better above the words once stacked. */
	.uaia-stack-tablet .uaia-soft__mosaic{order:-1;max-width:460px;margin-inline:auto}
	.uaia-stack-tablet .uaia-founder__main{order:-1;max-width:420px;margin-inline:auto}
}

@media(max-width:640px){
	.uaia-stack-mobile .uaia-hero__grid,
	.uaia-stack-mobile .uaia-soft__grid,
	.uaia-stack-mobile .uaia-founder__grid{grid-template-columns:minmax(0,1fr)!important}
	.uaia-stack-mobile .uaia-soft__mosaic,
	.uaia-stack-mobile .uaia-founder__main{order:-1;max-width:460px;margin-inline:auto}
}

/* ---- proportion on phones ------------------------------------------------
   The display face is set very large by design. Its clamp() floor was still
   too high for a 360px screen, so the headline swallowed the viewport.
   -------------------------------------------------------------------------- */
@media(max-width:640px){
	h1{font-size:clamp(2rem,8.6vw,2.9rem);line-height:1.06}
	h2{font-size:clamp(1.72rem,7vw,2.3rem);line-height:1.08}
	h3{font-size:clamp(1.16rem,4.6vw,1.4rem)}
	.u-lead{font-size:1rem;line-height:1.62}
	.uaia-founder blockquote{font-size:clamp(1.15rem,5.4vw,1.5rem);line-height:1.32}
	.uaia-hero__side p{font-size:1rem}

	/* Buttons: full width, one per line, text on one line. */
	.uaia-hero__cta,.uaia-cta__btns{flex-direction:column;align-items:stretch;width:100%}
	.uaia-hero__cta .u-btn,.uaia-cta__btns .u-btn{width:100%;white-space:nowrap;padding-inline:20px}

	.uaia-strip__item b{font-size:clamp(1.5rem,6.4vw,1.9rem)}
	.uaia-quote__text p{font-size:.98rem}
}

@media(max-width:420px){
	h1{font-size:clamp(1.82rem,9vw,2.35rem)}
	h2{font-size:clamp(1.55rem,7.4vw,1.95rem)}
	.uaia-founder blockquote{font-size:clamp(1.05rem,5.8vw,1.3rem)}
}

/* Admin-only setup hints. Visitors never see these; they are rendered only
   for logged-in users with the right capability. */
.uaia-admin-hint{
	font-size:.8rem;line-height:1.5;color:var(--dimmer);
	border:1px dashed var(--line);border-radius:var(--r-sm);
	padding:12px 14px;margin:0;
}
.uaia-admin-hint a{color:var(--amber-ink);text-decoration:underline}
.u-light .uaia-admin-hint{border-color:var(--line-dark);color:rgba(20,16,13,.5)}

/* ============================================================================
   NATIONAL CHAPTER MAP
   Geometry comes from inc/map-data.php, projected with albersUsa, which is
   why Alaska and Hawaii sit inset at the bottom left.
   ========================================================================== */
.uaia-map__head{max-width:640px;margin-bottom:26px}

.uaia-map__legend{
	list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px 22px;
	font-size:.78rem;letter-spacing:.04em;color:var(--dim);
}
.uaia-map__legend li{display:flex;align-items:center;gap:9px}
.uaia-map__key{flex:none;border-radius:50%}
.uaia-map__key--live{width:14px;height:14px;background:var(--sage);box-shadow:0 0 0 2px var(--ivory) inset}
.uaia-map__key--forming{width:12px;height:12px;background:var(--amber);box-shadow:0 0 0 2px var(--ink) inset}
.uaia-map__key--soon{width:11px;height:11px;background:transparent;border:2px dashed var(--clay)}
.uaia-map__key--open{width:10px;height:10px;border-radius:3px;background:var(--ink-3);border:1px solid var(--line)}

.uaia-map__figure{position:relative;margin:0;width:100%}
.uaia-map__svg{width:100%;height:auto;display:block;overflow:visible}

/* Land */
.uaia-map__state{
	fill:var(--ink-2);stroke:var(--line);stroke-width:.7;
	transition:fill .25s ease,stroke .25s ease;cursor:pointer;
}
.uaia-map__state.is-hovered{stroke:var(--dimmer)}
.uaia-map__state.is-live{fill:rgba(126,146,112,.42)}
.uaia-map__state.is-forming{fill:rgba(242,164,19,.34)}
.uaia-map__state.is-soon{fill:rgba(200,84,31,.28)}
.uaia-map__state.is-live.is-hovered{fill:rgba(126,146,112,.62)}
.uaia-map__state.is-forming.is-hovered{fill:rgba(242,164,19,.52)}
.uaia-map__state.is-soon.is-hovered{fill:rgba(200,84,31,.44)}

/* Pins */
.uaia-map__pin{cursor:pointer}
.uaia-map__dot{stroke:var(--ink);stroke-width:1.5;transition:r .22s var(--ease)}

/* LIVE: largest, solid, bright. A place you can go to today. */
.uaia-map__pin.is-live .uaia-map__dot{fill:var(--sage);stroke:var(--ivory);stroke-width:2;r:6.5}
.uaia-map__pin.is-live .uaia-map__core{fill:var(--ivory);r:2.2}

/* FORMING: mid sized, amber, hollow centre. Under construction. */
.uaia-map__pin.is-forming .uaia-map__dot{fill:var(--amber);stroke:var(--ink);stroke-width:1.5;r:5.5}
.uaia-map__pin.is-forming .uaia-map__core{fill:var(--ink);r:2}

/* OPENING SOON: smallest, hollow, dashed. Clearly not yet open. */
.uaia-map__pin.is-soon .uaia-map__dot{fill:none;stroke:var(--clay);stroke-width:2.2;stroke-dasharray:2.4 2;r:5}
.uaia-map__pin.is-soon .uaia-map__core{fill:var(--clay);r:1.4}
.uaia-map__pin:hover .uaia-map__dot,
.uaia-map__pin:focus .uaia-map__dot{r:9}
.uaia-map__pin:focus{outline:none}
.uaia-map__pin:focus-visible .uaia-map__dot{stroke:var(--ivory);stroke-width:2.6}

.uaia-map__ring{fill:none;stroke:var(--sage);stroke-width:1.4;opacity:0}
.uaia-map.is-pulsing .uaia-map__pin.is-live .uaia-map__ring{
	animation:uaia-pulse 2.8s ease-out infinite;
	animation-delay:calc(var(--i,0) * .32s);
	transform-origin:center;
}
@keyframes uaia-pulse{
	0%{opacity:.75;r:6}
	70%{opacity:0;r:17}
	100%{opacity:0;r:17}
}

/* Tooltip */
.uaia-map__tip{
	position:absolute;z-index:5;transform:translate(-50%,-100%);pointer-events:none;
	background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
	padding:9px 13px;max-width:230px;box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.uaia-map__tip b,
.uaia-map__tip-title{display:block;color:var(--ivory);font-size:.88rem;font-weight:600;line-height:1.3}
.uaia-map__tip small,
.uaia-map__tip-body{display:block;color:var(--dimmer);font-size:.75rem;line-height:1.4;margin-top:2px}
.uaia-map__land{pointer-events:auto}

/* Counts */
.uaia-map__counts{
	display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px;
	border-top:1px solid var(--line);padding-top:24px;
}
.uaia-map__counts b{
	display:block;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
	color:var(--ivory);font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1;
}
.uaia-map__counts small{display:block;font-size:.76rem;letter-spacing:.05em;color:var(--dimmer);margin-top:6px}
.uaia-map__cta{margin-top:26px}
.uaia-map__prompt:empty{display:none}

@media(max-width:760px){
	.uaia-map__counts{grid-template-columns:1fr 1fr;gap:22px 14px}
	.uaia-map__legend{gap:6px 16px;font-size:.73rem}
}
@media(max-width:420px){
	.uaia-map__tip{max-width:180px;padding:7px 10px}
}

/* ============================================================================
   SCROLL REVEAL
   Applied by data-uaia-reveal. Anyone with reduced motion turned on gets the
   finished state immediately and never sees a transition.
   ========================================================================== */
[data-uaia-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-uaia-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
	[data-uaia-reveal]{opacity:1;transform:none;transition:none}
	.uaia-map.is-pulsing .uaia-map__pin .uaia-map__ring{animation:none}
}

/* ============================================================================
   MAP: COLOUR AND LIGHT
   Active states are filled with a gradient rather than a flat tint, a slow
   band of light sweeps across them, and small points of light cluster around
   the pins. All of it stops for reduced motion.
   ========================================================================== */

/* The gradient fill is set as an attribute, so the flat colour is only the
   fallback for states with no chapter. */
.uaia-map__state.is-live,
.uaia-map__state.is-forming,
.uaia-map__state.is-soon{
	stroke:rgba(246,240,230,.22);
	stroke-width:.9;
	animation:uaia-map-in .7s var(--ease) both;
	animation-delay:var(--delay,0s);
}
@keyframes uaia-map-in{
	from{opacity:0;transform:translateY(4px)}
	to{opacity:1;transform:none}
}

.uaia-map__state.is-live.is-hovered,
.uaia-map__state.is-forming.is-hovered,
.uaia-map__state.is-soon.is-hovered{
	stroke:var(--ivory);
	stroke-width:1.5;
	filter:brightness(1.25);
}

/* Sweeping light, layered over the active states only. */
.uaia-map__shine{pointer-events:none;mix-blend-mode:screen}

/* Points of light around each chapter. */
.uaia-map__sparks{pointer-events:none}
.uaia-map__spark{
	fill:var(--amber);
	opacity:0;
	animation:uaia-spark 3.4s ease-in-out infinite;
	animation-delay:var(--d,0s);
}
.uaia-map__spark:nth-child(3n){fill:var(--sage)}
.uaia-map__spark:nth-child(3n+1){fill:var(--ivory)}
@keyframes uaia-spark{
	0%,100%{opacity:0;transform:scale(.6)}
	40%{opacity:.9;transform:scale(1)}
	60%{opacity:.35;transform:scale(.85)}
}

/* Pins sit above the light and pick up the glow filter. */
.uaia-map__pins{pointer-events:auto}
.uaia-map__pin.is-live .uaia-map__ring{stroke:var(--sage)}
.uaia-map__pin.is-forming .uaia-map__ring{stroke:var(--amber)}
.uaia-map__pin.is-soon .uaia-map__ring{stroke:var(--clay)}
.uaia-map.is-pulsing .uaia-map__pin.is-forming .uaia-map__ring{
	animation:uaia-pulse 3.4s ease-out infinite;
	animation-delay:calc(var(--i,0) * .32s + .6s);
}

/* A soft wash behind the whole map so it does not float on flat black. */
.uaia-map__figure::before{
	content:"";position:absolute;inset:-6% -4%;z-index:0;pointer-events:none;
	background:
		radial-gradient(ellipse 42% 55% at 44% 74%, rgba(242,164,19,.13), transparent 68%),
		radial-gradient(ellipse 38% 48% at 74% 40%, rgba(126,146,112,.10), transparent 70%);
	filter:blur(22px);
}
.uaia-map__figure > *{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
	.uaia-map__spark{animation:none;opacity:.55}
	.uaia-map__state.is-live,
	.uaia-map__state.is-forming,
	.uaia-map__state.is-soon{animation:none}
	.uaia-map__shine{display:none}
}

/* ============================================================================
   NATIVE CONTAINER TEMPLATES
   The presentational sections are now built from Elementor containers and core
   widgets, so they carry drag handles. These rules make a native section look
   identical to the custom widget it replaced.

   Elementor supplies the layout. The theme supplies the look.
   ========================================================================== */

/* Core widgets inside a UAIA template inherit the theme's type rather than
   Elementor's defaults. */
.uaia-tpl .elementor-widget-heading .elementor-heading-title{
	font-family:var(--font-display)!important;font-weight:700;letter-spacing:-.03em;
	color:var(--ivory)!important;margin:0;
}
.uaia-tpl .elementor-widget-text-editor,
.uaia-tpl .elementor-widget-text-editor p{color:var(--dim)!important}
.uaia-tpl h1.elementor-heading-title{font-size:clamp(2.6rem,6.6vw,5rem);line-height:1.02}
.uaia-tpl h2.elementor-heading-title{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.06}
.uaia-tpl h3.elementor-heading-title{font-size:clamp(1.18rem,1.9vw,1.5rem);line-height:1.2}
.uaia-tpl h4.elementor-heading-title{font-size:.94rem;letter-spacing:.02em}

.uaia-tpl .elementor-widget-text-editor{
	font-family:var(--font-body);font-size:.96rem;line-height:1.66;color:var(--dim);
}
.uaia-tpl .elementor-widget-text-editor p:last-child{margin-bottom:0}

/* The eyebrow, as a heading widget with a class rather than custom markup. */
.uaia-tpl .u-eyebrow .elementor-heading-title,
.uaia-tpl .u-eyebrow.elementor-widget-heading .elementor-heading-title{
	font-family:var(--font-body);font-size:.72rem;font-weight:700;
	letter-spacing:.2em;text-transform:uppercase;color:var(--amber-ink)!important;
}

/* Buttons.
   Elementor applies the class to the widget WRAPPER, so the wrapper must stay
   unstyled and the real .elementor-button inside gets the treatment. Anything
   else produces a button inside a button. */
.uaia-btn .elementor-button{
	font-family:var(--font-body)!important;font-weight:600!important;
	font-size:.9rem!important;letter-spacing:.01em!important;
	border-radius:var(--r-pill)!important;padding:15px 26px!important;
	min-height:52px;display:inline-flex;align-items:center;justify-content:center;
	border:0!important;
	transition:transform .3s var(--ease),background .3s var(--ease);
}
.uaia-btn--amber .elementor-button{background:var(--amber)!important;color:var(--on-light)!important}
.uaia-btn--ink .elementor-button{background:var(--ink)!important;color:var(--ivory)!important}
.uaia-btn--outline .elementor-button{
	background:transparent!important;color:var(--ivory)!important;
	box-shadow:inset 0 0 0 1px rgba(246,240,230,.4);
}
.uaia-btn .elementor-button:hover{transform:translateY(-2px)}
.uaia-btn--amber .elementor-button:hover{background:var(--amber-hi,#FFB733)!important}

/* Images inside a template get the theme's frame treatment. */
.uaia-tpl__shot img{
	width:100%;height:100%;object-fit:cover;
	border-radius:var(--r-md);display:block;
}
.uaia-tpl .uaia-founder__main img{border-radius:var(--r-lg);aspect-ratio:3/4.1;object-fit:cover}

/* Cards built as inner containers. */
.uaia-tpl__card{
	background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
	padding:24px;transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.uaia-tpl__card:hover{border-color:var(--dimmer);transform:translateY(-3px)}
.uaia-tpl__card .uaia-tpl__shot img{aspect-ratio:4/3;margin-bottom:16px}

/* Hero, on a background image with an overlay set in Elementor. */
.uaia-tpl.uaia-hero{color:var(--ivory)}
.uaia-tpl.uaia-hero .elementor-heading-title{color:var(--ivory)}

/* The CTA is amber, so its type flips to ink. */
.uaia-tpl.uaia-cta,
.uaia-tpl.uaia-cta .elementor-heading-title,
.uaia-tpl.uaia-cta .elementor-widget-text-editor,
.uaia-tpl.uaia-cta .elementor-widget-text-editor p{color:var(--on-light)!important}
.uaia-tpl.uaia-cta .u-eyebrow .elementor-heading-title{color:rgba(20,16,13,.62)}

/* Founder sits on ivory. */
.uaia-tpl.u-light,
.uaia-tpl.u-light .elementor-heading-title{color:var(--on-light)!important}
.uaia-tpl.u-light .elementor-widget-text-editor,
.uaia-tpl.u-light .elementor-widget-text-editor p{color:rgba(20,16,13,.72)!important}
.uaia-tpl .uaia-founder__quote{
	font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.85rem);
	line-height:1.3;letter-spacing:-.02em;
	border-top:2px solid var(--amber);padding-top:18px;
}

/* The Soft Landing checklist, as an icon list. */
.uaia-tpl .uaia-soft__list .elementor-icon-list-item{
	border-bottom:1px solid var(--line);padding:14px 0;align-items:flex-start;
}
.uaia-tpl .uaia-soft__list .elementor-icon-list-text{
	font-size:.94rem;line-height:1.55;color:var(--dim);
}

/* Stage kicker. Only the widget uses this now; the native template dropped
   the labels. The rule line that used to sit beside it is gone, because it was
   absolutely placed and collided with the heading underneath. */
.uaia-tpl .uaia-stage__num .elementor-heading-title{
	font-family:var(--font-body)!important;font-size:.74rem;font-weight:700;
	letter-spacing:.16em;text-transform:uppercase;color:var(--amber-ink)!important;
	margin-bottom:6px;
}
.uaia-tpl .uaia-stage__num::after{display:none}

/* Native sections stack on their own, since Elementor handles the breakpoint. */
@media(max-width:900px){
	.uaia-tpl .e-con-inner,
	.uaia-tpl .e-con{--flex-direction:column}
}

/* ============================================================================
   CHAPTER STATUS BANNER
   Shown at the top of any chapter that is not live. Someone arriving expecting
   an airport pickup from a chapter that does not run one yet is the worst
   failure this site could have, so this is deliberately loud.
   ========================================================================== */
.uaia-status{position:relative;z-index:3;padding:18px 0}
.uaia-status--forming{background:var(--amber)}
.uaia-status--soon{background:var(--clay)}

.uaia-status__inner{
	display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.uaia-status__badge{
	flex:none;
	font-family:var(--font-display);font-weight:800;
	font-size:clamp(1.05rem,2.4vw,1.5rem);letter-spacing:-.02em;
	background:var(--ink);color:var(--ivory);
	padding:9px 18px;border-radius:var(--r-pill);
	white-space:nowrap;
}
.uaia-status--soon .uaia-status__badge{background:var(--ink);color:var(--ivory)}
.uaia-status__line{
	flex:1 1 320px;margin:0;
	font-size:.95rem;line-height:1.5;color:rgba(20,16,13,.86);font-weight:500;
}
.uaia-status--soon .uaia-status__line{color:rgba(246,240,230,.94)}
.uaia-status__cta{flex:none}
.uaia-status--soon .uaia-status__cta{background:var(--light-surface);color:var(--on-light)}

/* Sticky, so it stays visible as someone reads down a chapter that is not
   open yet. It is easy to scroll past a banner and miss the point entirely. */
@media(min-width:901px){
	.uaia-status{position:sticky;top:0}
}
@media(max-width:640px){
	.uaia-status{padding:14px 0}
	.uaia-status__inner{gap:12px}
	.uaia-status__cta{width:100%;text-align:center;justify-content:center}
}

/* ============================================================================
   CHAPTER ROWS: STATUS BY COLOUR, PLUS A JOIN BUTTON
   Status was carried by a small pill that is easy to miss when scanning eight
   rows. The row itself now carries the colour, so the three states separate
   before you read a word.
   ========================================================================== */
.uaia-row{position:relative;isolation:isolate}

/* A stretched link makes the whole row clickable without wrapping the button
   in an anchor, which would be invalid and break keyboard navigation. */
.uaia-row__link{position:absolute;inset:0;z-index:1}
.uaia-row__link:focus-visible{outline:2px solid var(--amber);outline-offset:-3px}
.uaia-row__join{position:relative;z-index:2}

/* Open: sage edge, brightest. A chapter you can join today. */
.uaia-row--live{border-left:3px solid var(--sage);background:linear-gradient(90deg,rgba(126,146,112,.10),transparent 42%)}
.uaia-row--live:hover{background:linear-gradient(90deg,rgba(126,146,112,.18),transparent 52%)}

/* Forming: amber edge. Being built. */
.uaia-row--forming{border-left:3px solid var(--amber);background:linear-gradient(90deg,rgba(242,164,19,.09),transparent 42%)}
.uaia-row--forming:hover{background:linear-gradient(90deg,rgba(242,164,19,.16),transparent 52%)}

/* Opening soon: clay edge, dimmest, and the row is visibly quieter. */
.uaia-row--soon{border-left:3px solid var(--clay);background:linear-gradient(90deg,rgba(210,85,31,.07),transparent 40%)}
.uaia-row--soon:hover{background:linear-gradient(90deg,rgba(210,85,31,.13),transparent 50%)}
.uaia-row--soon .uaia-row__city,
.uaia-row--soon .uaia-row__served{opacity:.72}

/* The join button. Weighted by status, so an open chapter is the obvious
   action and an unopened one does not compete with it. */
.uaia-row__join{
	justify-self:end;align-self:center;
	font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.01em;
	padding:9px 16px;border-radius:var(--r-pill);white-space:nowrap;
	text-decoration:none;transition:transform .25s var(--ease),background .25s var(--ease);
	min-height:40px;display:inline-flex;align-items:center;
}
.uaia-row--live .uaia-row__join{background:var(--sage);color:var(--on-light)}
.uaia-row--forming .uaia-row__join{background:var(--amber);color:var(--on-light)}
.uaia-row--soon .uaia-row__join{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(246,240,230,.34)}
.uaia-row__join:hover{transform:translateY(-1px)}
.uaia-row--soon .uaia-row__join:hover{background:rgba(246,240,230,.1)}

@media(max-width:760px){
	.uaia-row__join{grid-column:1/-1;justify-self:stretch;justify-content:center;margin-top:10px}
	.uaia-row__go{display:none}
}

/* The light modifiers used by the hero and Soft Landing templates. These were
   referenced by the section templates but never defined, so the eyebrow and
   lead fell back to base colours that are too dim over a photograph. */
.uaia-tpl .u-eyebrow--light .elementor-heading-title{color:var(--amber-ink)!important;opacity:1}
.uaia-tpl .u-lead--light,
.uaia-tpl .u-lead--light p{
	color:rgba(246,240,230,.9)!important;
	font-size:clamp(1rem,1.25vw,1.12rem)!important;
	line-height:1.6!important;
}
.uaia-tpl .u-lead,
.uaia-tpl .u-lead p{font-size:clamp(1rem,1.2vw,1.1rem)!important;line-height:1.62!important}

/* Card body text inside a template, so a card is not left with base sizing. */
.uaia-tpl .uaia-item__text p,
.uaia-tpl .uaia-stage__text p{font-size:.9rem!important;line-height:1.6!important}
.uaia-tpl .uaia-quote__text p{
	font-family:var(--font-display)!important;font-weight:500!important;
	font-size:1.02rem!important;line-height:1.42!important;
	color:var(--ivory)!important;letter-spacing:-.015em;
}
.uaia-tpl .uaia-founder__quote p{
	font-family:var(--font-display)!important;
	font-size:clamp(1.3rem,2.4vw,1.85rem)!important;line-height:1.3!important;
	color:var(--on-light)!important;
}

/* ============================================================================
   ELEMENTOR GLOBAL OVERRIDES

   Elementor's kit stylesheet does not hardcode colours or fonts. It reads CSS
   variables. Its default kit therefore paints headings with its own blue and
   buttons with its own green, and sets its own font stack, no matter how many
   theme rules are written, because its stylesheet loads last.

   Overriding the variables themselves is the reliable fix: every Elementor
   rule that references them now resolves to UAIA values. This works whether or
   not the client has ever opened Site Settings.
   ========================================================================== */
:root,
body.uaia,
.uaia-block,
.uaia-tpl,
.elementor-widget-container{
	--e-global-color-primary:var(--ivory);
	--e-global-color-secondary:var(--dim);
	--e-global-color-text:var(--dim);
	--e-global-color-accent:var(--amber);

	--e-global-typography-primary-font-family:'Bricolage Grotesque';
	--e-global-typography-primary-font-weight:700;
	--e-global-typography-secondary-font-family:'Bricolage Grotesque';
	--e-global-typography-secondary-font-weight:600;
	--e-global-typography-text-font-family:'Archivo';
	--e-global-typography-text-font-weight:400;
	--e-global-typography-accent-font-family:'Archivo';
	--e-global-typography-accent-font-weight:600;
}

/* Sections on ivory need the opposite. */
.uaia-tpl.u-light,
.uaia-tpl.uaia-cta{
	--e-global-color-primary:var(--ink);
	--e-global-color-secondary:rgba(20,16,13,.72);
	--e-global-color-text:rgba(20,16,13,.72);
}

/* Any Elementor heading or text inside a UAIA section uses the theme faces,
   regardless of what the kit says. */
.uaia-block .elementor-heading-title,
.uaia-tpl .elementor-heading-title{font-family:var(--font-display)!important}
.uaia-block .elementor-widget-text-editor,
.uaia-tpl .elementor-widget-text-editor,
.uaia-block .elementor-button,
.uaia-tpl .elementor-button{font-family:var(--font-body)!important}

/* ============================================================================
   REPAIR: STRAY LETTER FROM A CORRUPTED SAVE

   An earlier version of the repair tool ran wp_unslash over stored Elementor
   JSON, which strips the backslash from every escape sequence. A stored
   newline became a literal n and now sits at the end of every text block.

   The data fix is in the setup screen, but a site that has already been
   damaged should not have to wait for someone to run it, so the stray
   character is also hidden at render time. Harmless once the data is clean.
   ========================================================================== */
.elementor-widget-text-editor p:last-child:empty{display:none}

/* The stage kicker labels were removed from the template, but the layout is
   stored in Elementor's data, so a page saved before that still holds them.
   Hidden here so they go the moment the theme is uploaded, with no re-import.

   Scoped to the heading WIDGET, which is how the template rendered them. The
   stages widget puts the same class on a plain span, so its own kicker is
   untouched and still works. */
.elementor-widget-heading.uaia-stage__num{display:none!important}

/* ============================================================================
   CHAPTER ROWS, REWORKED

   Three faults were visible at once: the join button added in 3.5.0 had no
   grid column of its own, so the arrow wrapped to a second line and the
   subdomain ran underneath the button; the status read as a circle because a
   pill with a four letter word inside it is a circle; and the status colour
   was a hairline on the left edge that nobody would notice.
   ========================================================================== */

/* Status chip. The wrapper is a plain grid cell; the pill inside carries the
   look, and it works at any word length rather than turning into a circle. */
.uaia-row__status{
	display:flex;align-items:center;justify-self:start;
	width:auto;min-width:0;height:auto;padding:0;margin:0;
	background:none;border:0;border-radius:0;
}
.uaia-row__status .uaia-pill{
	display:inline-flex;align-items:center;gap:7px;
	padding:5px 11px 5px 9px;border-radius:6px;border:0;
	font-family:var(--font-body);font-size:.67rem;font-weight:700;
	letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;line-height:1.2;
}
.uaia-row__status .uaia-pill::before{
	content:"";width:7px;height:7px;border-radius:50%;flex:none;background:currentColor;
}
.uaia-pill--live{background:rgba(126,146,112,.2);color:var(--sage-ink)}
.uaia-pill--forming{background:rgba(242,164,19,.18);color:var(--amber-ink)}
.uaia-pill--soon{background:rgba(210,85,31,.16);color:var(--terra-ink)}

/* Colour the whole row, not a hairline. This is what makes the three states
   readable while scanning a list of eight. */
.uaia-row{border-left:4px solid transparent;transition:background .3s var(--ease)}
.uaia-row--live{border-left-color:var(--sage);background:linear-gradient(90deg,rgba(126,146,112,.13),rgba(126,146,112,.02) 55%,transparent)}
.uaia-row--forming{border-left-color:var(--amber);background:linear-gradient(90deg,rgba(242,164,19,.12),rgba(242,164,19,.02) 55%,transparent)}
.uaia-row--soon{border-left-color:var(--clay);background:linear-gradient(90deg,rgba(210,85,31,.10),rgba(210,85,31,.02) 50%,transparent)}
.uaia-row--live:hover{background:linear-gradient(90deg,rgba(126,146,112,.22),rgba(126,146,112,.05) 60%,transparent)}
.uaia-row--forming:hover{background:linear-gradient(90deg,rgba(242,164,19,.20),rgba(242,164,19,.05) 60%,transparent)}
.uaia-row--soon:hover{background:linear-gradient(90deg,rgba(210,85,31,.18),rgba(210,85,31,.04) 55%,transparent)}

/* The subdomain must not run under the button. */
.uaia-row__url{
	min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
	font-size:.78rem;
}

/* The button sits in its own column and never stretches. */
.uaia-row__join{justify-self:end;align-self:center;margin:0}

/* The arrow is decorative next to a real button, so it goes on smaller
   screens rather than competing for space. */
@media(max-width:1100px){
	.uaia-row{grid-template-columns:76px minmax(92px,auto) minmax(130px,1fr) 1.3fr auto;}
	.uaia-row__url{display:none}
	.uaia-row__go{display:none}
}
@media(max-width:900px){
	.uaia-row{grid-template-columns:64px 1fr auto;gap:12px 14px;padding:16px 14px}
	.uaia-row__status{grid-column:2;grid-row:1;justify-self:start}
	.uaia-row__city{grid-column:2;grid-row:2}
	.uaia-row__served{grid-column:2;grid-row:3;font-size:.8rem}
	.uaia-row__join{grid-column:3;grid-row:1/span 3;align-self:center}
}
@media(max-width:560px){
	.uaia-row{grid-template-columns:1fr}
	.uaia-row .u-shot{display:none}
	.uaia-row__status,.uaia-row__city,.uaia-row__served{grid-column:1}
	.uaia-row__join{grid-column:1;grid-row:auto;justify-self:stretch;justify-content:center;margin-top:12px}
}

/* ============================================================================
   LEGACY BUTTON CLASSES ON SAVED PAGES

   The templates used .u-btn until 3.5.1. That class styles an anchor directly,
   and Elementor puts a widget's classes on the WRAPPER, so a page saved before
   3.5.1 still renders a full width pill with a smaller button inside it.

   Renaming the class fixed new pages. This neutralises the old one on pages
   already saved, so nobody has to rebuild a page to get a working button.
   ========================================================================== */
.elementor-widget.u-btn,
.elementor-widget.u-btn--amber,
.elementor-widget.u-btn--ink,
.elementor-widget.u-btn--outline{
	background:none!important;box-shadow:none!important;
	padding:0!important;min-height:0!important;border-radius:0!important;
	display:block!important;width:auto!important;
}
.elementor-widget.u-btn--amber .elementor-button{background:var(--amber)!important;color:var(--on-light)!important}
.elementor-widget.u-btn--ink .elementor-button{background:var(--ink)!important;color:var(--ivory)!important}
.elementor-widget.u-btn--outline .elementor-button{
	background:transparent!important;color:var(--ivory)!important;
	box-shadow:inset 0 0 0 1px rgba(246,240,230,.4)!important;
}
.elementor-widget.u-btn .elementor-button{
	font-family:var(--font-body)!important;font-weight:600!important;font-size:.9rem!important;
	border-radius:var(--r-pill)!important;padding:15px 26px!important;min-height:52px;
	display:inline-flex;align-items:center;justify-content:center;border:0!important;
}

/* Soft Landing mosaic: four photographs, two of them taller, so it reads as a
   composition rather than a stack of two panels. */
.uaia-soft__mosaic .uaia-tpl__shot img{aspect-ratio:1;object-fit:cover}
.uaia-soft__mosaic .uaia-soft__tall img{aspect-ratio:3/4}
.uaia-soft__mosaic .e-con{align-items:stretch}

/* A chapter with no featured image keeps its grid cell, so every row in the
   list stays aligned, but the empty box is not drawn. Collapsing the column
   per row would make rows with and without a photograph disagree. */
.uaia-row__shot:empty{background:none!important;border:0!important;box-shadow:none!important}

/* Boards with thumbnails switched off lose the first column, nothing else. */
.uaia-board--nothumbs .uaia-row,
.uaia-board--nothumbs .uaia-board__legend{grid-template-columns:minmax(92px,auto) minmax(150px,1.2fr) 1.4fr minmax(110px,auto) auto 30px}
@media(max-width:1100px){
	.uaia-board--nothumbs .uaia-row,
	.uaia-board--nothumbs .uaia-board__legend{grid-template-columns:minmax(92px,auto) minmax(130px,1fr) 1.3fr auto}
}
@media(max-width:900px){
	.uaia-board--nothumbs .uaia-row{grid-template-columns:1fr auto}
}

/* The legend above the rows must have the same number of columns as a row,
   or the headings sit over the wrong content. */
.uaia-board__legend{
	grid-template-columns:76px minmax(92px,auto) minmax(150px,1.2fr) 1.4fr minmax(110px,auto) auto 30px;
	gap:20px;
}
@media(max-width:1100px){
	.uaia-board__legend{grid-template-columns:76px minmax(92px,auto) minmax(130px,1fr) 1.3fr auto}
}

/* Emphasis inside a heading. The forced ivory colour has to be beaten by
   something more specific, or the accent word is invisible. */
.uaia-tpl .elementor-heading-title .u-accent,
.uaia-block .elementor-heading-title .u-accent,
.uaia-tpl h1 .u-accent,
h1 .u-accent,
h2 .u-accent{color:var(--amber-ink)!important}
.uaia-tpl.u-light .elementor-heading-title .u-accent{color:var(--terra-ink,#D2551F)!important}

/* ============================================================================
   ELEMENTOR EDITOR CANVAS

   The editor preview does not always carry the body classes the front end has,
   so anything scoped to body.uaia is missing there. Headings and card text
   then inherit Elementor's own colours against the theme's dark panels and
   become invisible, which reads as content that failed to load.

   These rules are scoped to the editor only and never reach a visitor.
   ========================================================================== */
body.elementor-editor-active,
body.elementor-editor-preview{
	background:var(--ink);
	color:var(--dim);
}
body.elementor-editor-active .elementor-heading-title,
body.elementor-editor-preview .elementor-heading-title{
	font-family:var(--font-display);
	color:var(--ivory);
}
body.elementor-editor-active .elementor-widget-text-editor,
body.elementor-editor-preview .elementor-widget-text-editor{
	font-family:var(--font-body);
	color:var(--dim);
}

/* Sections on ivory keep dark type in the editor as well. */
body.elementor-editor-active .uaia-tpl.u-light .elementor-heading-title,
body.elementor-editor-preview .uaia-tpl.u-light .elementor-heading-title,
body.elementor-editor-active .uaia-tpl.uaia-cta .elementor-heading-title,
body.elementor-editor-preview .uaia-tpl.uaia-cta .elementor-heading-title{color:var(--on-light)}

/* An empty widget is invisible in the editor, which makes a section look
   broken when it is simply not filled in yet. Show what it is instead. */
body.elementor-editor-active .elementor-widget-heading .elementor-heading-title:empty::before{
	content:"Heading";opacity:.45;font-style:italic;
}
body.elementor-editor-active .elementor-widget-text-editor .elementor-widget-container:empty::before{
	content:"Text";opacity:.45;font-style:italic;
}

/* ============================================================================
   SEARCH AND 404

   Grouped by what a result is, because "the Killeen chapter" and "how to get
   an SSN" are different kinds of answer and a mixed list hides both.
   ========================================================================== */
.uaia-search{padding-block:clamp(60px,9vw,110px)}
.uaia-search__head{margin-bottom:clamp(36px,5vw,60px)}
.uaia-search__head h1{
	margin:0 0 20px;font-family:var(--font-display);
	font-weight:700;letter-spacing:-.03em;line-height:1.08;
	font-size:clamp(1.9rem,4.4vw,3rem);
}
.uaia-search__group{margin-bottom:clamp(34px,4.6vw,54px)}
.uaia-search__group h2{
	display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
	margin:0 0 18px;padding-bottom:12px;
	border-bottom:1px solid var(--line);
	font-family:var(--font-display);font-weight:700;
	letter-spacing:-.02em;font-size:1.3rem;
}
.uaia-search__group h2 span{
	font-family:var(--font-body);font-size:.7rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink);
}
.uaia-search__list{display:grid;gap:10px}
.uaia-search__hit{
	display:block;padding:18px 20px;text-decoration:none;
	border-radius:var(--r-md);
	background:var(--ink-2);border:1px solid var(--line);
	transition:transform .25s ease,border-color .25s ease;
}
.uaia-search__hit:hover{transform:translateY(-2px);border-color:rgba(246,240,230,.3)}
.uaia-search__hit strong{
	display:block;font-family:var(--font-display);
	font-weight:700;letter-spacing:-.015em;font-size:1.05rem;color:var(--ivory);
}
.uaia-search__hit span{
	display:block;margin-top:5px;font-size:.9rem;line-height:1.55;color:var(--dim);
}
.uaia-search__hit em{
	display:block;margin-top:7px;font-style:normal;
	font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--dimmer);
}
.uaia-search__none{
	padding:clamp(40px,6vw,70px) clamp(24px,4vw,44px);
	border-radius:var(--r-lg);text-align:center;
	background:var(--ink-2);border:1px dashed rgba(246,240,230,.22);
}
.uaia-search__none h2{
	margin:0 0 12px;font-family:var(--font-display);
	font-weight:700;letter-spacing:-.02em;font-size:clamp(1.4rem,3vw,2rem);
}
.uaia-search__none p{
	margin:0 auto 24px;max-width:52ch;font-size:1rem;line-height:1.62;color:var(--dim);
}
.uaia-search__routes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.uaia-404__routes{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
	gap:14px;margin:clamp(34px,5vw,52px) auto 0;max-width:min(58rem,100%);
}
.uaia-404__routes a{
	display:block;padding:24px 22px;text-decoration:none;text-align:left;
	border-radius:var(--r-md);
	background:var(--ink-2);border:1px solid var(--line);
	transition:transform .25s ease,border-color .25s ease;
}
.uaia-404__routes a:hover{transform:translateY(-3px);border-color:var(--amber)}
.uaia-404__routes strong{
	display:block;margin-bottom:6px;font-family:var(--font-display);
	font-weight:700;letter-spacing:-.02em;font-size:1.08rem;color:var(--ivory);
}
.uaia-404__routes span{display:block;font-size:.88rem;line-height:1.5;color:var(--dim)}
.uaia-404__search{margin-top:clamp(28px,4vw,44px)}

@media(max-width:640px){
	.uaia-404__routes{grid-template-columns:1fr}
	.uaia-search__routes .uaia-btn{width:100%}
}


/* ============================================================================
   MOVED FROM style.css

   Everything below was written into style.css across versions 3.26 to 3.32
   and none of it ever reached the site: the theme loads only this file, and
   style.css is read by WordPress for the theme's name and nothing else. That
   is why both logos showed at full size, and why centring on a phone, asked
   for twice, never applied.
   ========================================================================== */

/* ============================================================================
   THE LOGO

   Two versions in the page, one per mode, so switching needs no reload. The
   supplied logo has dark brown letters on white, which on the dark site are
   close to invisible; the second version has ivory letters and every accent
   exactly as supplied.
   ========================================================================== */
.uaia-logo--art{
	display:inline-flex;align-items:center;flex:none;line-height:0;
	/* The old text logo set a colour here; the artwork carries its own. */
}
.uaia-logo__art{display:block;width:auto;max-width:100%;height:auto}
.uaia-logo--header .uaia-logo__art{height:40px}
/* The footer logo's link is exactly as wide as the logo. Left to size itself,
   it filled the whole column, because the footer makes every link an
   inline block and the image's width was a percentage of that same link;
   the logo then sat at the left of a full width box, and centring the
   column's text could not move it. */
.uaia-footer .uaia-logo--footer{display:block;width:min(280px,100%);padding:0}
.uaia-logo--footer .uaia-logo__art{height:auto;width:100%}

.uaia-logo__art--onlight{display:none}
html[data-theme="light"] .uaia-logo__art--ondark{display:none}
html[data-theme="light"] .uaia-logo__art--onlight{display:block}

@media (max-width: 720px){
	.uaia-logo--header .uaia-logo__art{height:34px}
}

/* ============================================================================
   THE SWITCH
   ========================================================================== */
.uaia-mode{
	display:inline-grid;place-items:center;flex:none;
	width:44px;height:44px;padding:0;
	border-radius:50%;cursor:pointer;
	background:transparent;color:var(--ivory);
	border:1px solid var(--line);
	transition:border-color .2s ease,background .2s ease;
}
.uaia-mode:hover{border-color:var(--amber)}
.uaia-mode:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* The icon shows the mode you would switch TO, which is the convention and
   also what the button's label says. */
.uaia-mode__icon--moon{display:none}
html[data-theme="light"] .uaia-mode__icon--sun{display:none}
html[data-theme="light"] .uaia-mode__icon--moon{display:block}

/* ============================================================================
   THE HEADER OVER THE HOME PHOTOGRAPH

   On the front page the header is transparent and sits on a photograph under
   a dark scrim. That scrim is part of the photograph, so it stays dark in
   both modes, and the header over it has to keep light text and the light
   logo, or it is dark on dark. Once somebody scrolls, the header takes its
   own background and follows the page like everything else.
   ========================================================================== */
html[data-theme="light"] .uaia-header:not(.uaia-header--solid):not(.is-fixed){
	--ivory:#F6F0E6;
	--dim:rgba(246,240,230,.72);
	--dimmer:rgba(246,240,230,.52);
	--line:rgba(246,240,230,.22);
}
html[data-theme="light"] .uaia-header:not(.uaia-header--solid):not(.is-fixed) .uaia-logo__art--ondark{display:block}
html[data-theme="light"] .uaia-header:not(.uaia-header--solid):not(.is-fixed) .uaia-logo__art--onlight{display:none}
html[data-theme="light"] .uaia-header:not(.uaia-header--solid):not(.is-fixed) .uaia-mode__icon--sun{display:none}
html[data-theme="light"] .uaia-header:not(.uaia-header--solid):not(.is-fixed) .uaia-mode__icon--moon{display:block}

/* ============================================================================
   CENTRED ON A PHONE

   Everything, under the switch the theme already had: Appearance, Customise,
   UAIA Layout. That switch and its 43 rules covered the theme's own parts;
   these extend it to the blocks the plugins add, so there is one mechanism
   and one place to turn it off rather than two that disagree.

   The centring is inherited from the page root, so anything added later is
   centred without anybody remembering to add it. What follows the inherit
   is the small set of things that inheriting text-align does not fix:
   flex and grid rows, blocks that were pinned left by a margin, and accent
   borders that pointed at a left edge which no longer exists.
   ========================================================================== */
@media (max-width: 720px) {

	/* One declaration does most of the work. */
	body.uaia-center-mobile,
	body.uaia-center-mobile .uaia-page,
	body.uaia-center-mobile .uaia-entry,
	body.uaia-center-mobile .uaia-cp,
	body.uaia-center-mobile .uaia-hub,
	body.uaia-center-mobile .uaia-ctl,
	body.uaia-center-mobile .uaia-lead,
	body.uaia-center-mobile .uaia-guide {
		text-align: center;
	}

	/* Rows become centred stacks. */
	body.uaia-center-mobile .uaia-cp__actions,
	body.uaia-center-mobile .uaia-ctl__waiting,
	body.uaia-center-mobile .uaia-ev,
	body.uaia-center-mobile .uaia-state__pick,
	body.uaia-center-mobile .uaia-oc,
	body.uaia-center-mobile .uaia-savebar,
	body.uaia-center-mobile .uaia-soft__who,
	body.uaia-center-mobile .uaia-cities__state ul,
	body.uaia-center-mobile .uaia-ch__doors,
	body.uaia-center-mobile .uaia-form__submit,
	body.uaia-center-mobile .uaia-lead__panel form {
		justify-content: center;
		align-items: center;
	}
	body.uaia-center-mobile .uaia-soft__who,
	body.uaia-center-mobile .uaia-ctl__item {
		flex-direction: column;
		text-align: center;
	}

	/* Anything holding itself to a measure centres that measure, or it
	   reads as centred text in a left aligned column. */
	body.uaia-center-mobile .uaia-cp__served,
	body.uaia-center-mobile .uaia-cp__note,
	body.uaia-center-mobile .uaia-cp__lead,
	body.uaia-center-mobile .uaia-cp__intro,
	body.uaia-center-mobile .uaia-ctl__sub,
	body.uaia-center-mobile .uaia-cities__intro,
	body.uaia-center-mobile .uaia-ann__inner,
	body.uaia-center-mobile .uaia-mq__q,
	body.uaia-center-mobile .uaia-hb__hard,
	body.uaia-center-mobile .uaia-state,
	body.uaia-center-mobile .uaia-next li,
	body.uaia-center-mobile p, body.uaia-center-mobile li, body.uaia-center-mobile blockquote, body.uaia-center-mobile figure, body.uaia-center-mobile .uaia-form__field {
		margin-inline: auto;
	}

	body.uaia-center-mobile /* A left accent border points at an edge the text no longer starts at,
	   so it moves to the top where it still means something. */
	body.uaia-center-mobile .uaia-cp .uaia-ev,
	body.uaia-center-mobile .uaia-ctl__item,
	body.uaia-center-mobile .uaia-ch__guide.has-note,
	body.uaia-center-mobile .uaia-ann,
	body.uaia-center-mobile .uaia-mq,
	body.uaia-center-mobile .uaia-co,
	body.uaia-center-mobile .uaia-soft,
	body.uaia-center-mobile .uaia-loop {
		border-left-width: 1px;
		border-top-width: 3px;
		border-top-style: solid;
	}

	/* Form fields fill the column, so their labels centre over them rather
	   than floating at one end. */
	body.uaia-center-mobile .uaia-form__field,
	body.uaia-center-mobile .uaia-form__field label,
	body.uaia-center-mobile .uaia-form__hint,
	body.uaia-center-mobile .uaia-form__check,
	body.uaia-center-mobile .uaia-form__check label,
	body.uaia-center-mobile .uaia-form__privacy {
		text-align: center;
	}
	body.uaia-center-mobile .uaia-form__check label {
		display: inline-flex;
		align-items: center;
		gap: 9px;
	}

	/* Lists lose their markers, which sit outside a centred line and drag
	   the text off centre. */
	body.uaia-center-mobile .uaia-entry ul,
	body.uaia-center-mobile .uaia-entry ol,
	body.uaia-center-mobile .uaia-guide ul,
	body.uaia-center-mobile .uaia-guide ol,
	body.uaia-center-mobile .uaia-kept,
	body.uaia-center-mobile .uaia-hb__does {
		list-style: none;
		padding-left: 0;
	}

	/* Tables and code are the only things left alone: a centred table cell
	   does not line up with the one above it, and centred code is unreadable
	   in a way that is not a matter of taste. */
	body.uaia-center-mobile table, body.uaia-center-mobile th, body.uaia-center-mobile td, body.uaia-center-mobile pre, body.uaia-center-mobile code {
		text-align: left;
	}
}

/* ============================================================================
   INNER PAGES

   The Hub, Soft Landing, Chapters, Gallery, About and Contact.

   Every section is a full width Elementor container. Width cannot be set on
   the container itself, because the theme's force full setting overrides any
   max width on every Elementor wrapper with !important. So the content is
   centred with padding instead, which that setting does not touch: on a wide
   screen the padding grows to leave exactly the site's --wrap in the middle,
   and on a narrow one it falls back to the site's gutter. The result lines up
   with the header, the footer and the homepage to the pixel.
   ========================================================================== */
.uaia-page-hero,
.uaia-page-section,
.uaia-page-close{
	padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)))!important;
	box-sizing:border-box;
}

/* The top: a heading and one sentence, set on the same measure as the rest.
   No eyebrow label, because the menu already said where you are. */
.uaia-page-hero{
	padding-block:clamp(52px,7vw,96px) clamp(26px,3.4vw,42px)!important;
	border-bottom:1px solid var(--line);
}
.uaia-tpl.uaia-page-hero h1.elementor-heading-title{
	font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.04;max-width:18ch;
}
.uaia-page-hero__lead,
.uaia-page-hero__lead p{
	font-size:clamp(1.02rem,1.5vw,1.16rem)!important;line-height:1.6;max-width:56ch;
}
.uaia-page-hero .elementor-widget:not(:first-child){margin-top:clamp(12px,1.6vw,18px)}

/* The sections between: one rhythm, the same as the chapter pages. */
.uaia-page-section{padding-block:var(--section-y)!important}

/* The Hub caps itself at 72rem, which inside a page section would sit inset
   from everything else on the page. Here the section already sets the width. */
.uaia-page-section .uaia-hub{max-width:none}

/* Written content carried over from the page, on a reading measure. */
.uaia-prose,
.uaia-prose .elementor-widget-container{max-width:68ch}
.uaia-tpl .uaia-prose h2{
	margin:clamp(26px,3vw,38px) 0 10px;
	font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
	font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1.15;color:var(--ivory);
}
.uaia-tpl .uaia-prose h2:first-child{margin-top:0}
.uaia-tpl .uaia-prose p{margin:0 0 14px}
.uaia-tpl .uaia-prose a{color:var(--amber-ink);text-underline-offset:3px}

/* How it works, as numbered rows rather than boxes: a numeral, the step, and
   what it means, with hairlines between. On a wide screen the step and its
   explanation sit side by side and use the full measure; on a phone they
   stack. */
.uaia-tpl .uaia-steps__heading h2.elementor-heading-title{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.uaia-steps{
	list-style:none;margin:clamp(18px,2.4vw,28px) 0 0;padding:0;
	border-bottom:1px solid var(--line);
}
.uaia-steps__item{
	display:grid;grid-template-columns:3rem minmax(0,1fr);gap:clamp(12px,2vw,20px);
	align-items:baseline;padding:clamp(20px,2.6vw,30px) 0;
	border-top:1px solid var(--line);
}
.uaia-steps__n{
	font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,2.2vw,1.8rem);
	line-height:1;color:var(--amber-ink);font-variant-numeric:tabular-nums;
}
.uaia-tpl .uaia-steps__title{
	margin:0;font-family:var(--font-display);font-weight:700;
	font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.25;letter-spacing:-.01em;
	color:var(--ivory);
}
.uaia-tpl .uaia-steps__text{margin:8px 0 0;font-size:.98rem;line-height:1.64;color:var(--dim);max-width:60ch}
@media (min-width: 900px){
	.uaia-steps__item > div{
		display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
		gap:clamp(24px,4vw,64px);align-items:baseline;
	}
	.uaia-tpl .uaia-steps__text{margin-top:0}
}

/* The close: one line and one button, on the soft band. */
.uaia-page-close{
	padding-block:clamp(40px,5vw,64px)!important;
	background:var(--ink-2);border-top:1px solid var(--line);
	align-items:center!important;text-align:center;
}
.uaia-tpl.uaia-page-close h2.elementor-heading-title{
	font-size:clamp(1.5rem,3vw,2.2rem);max-width:26ch;margin-inline:auto;
}
.uaia-page-close .elementor-widget-button{margin-top:clamp(14px,2vw,20px)}

@media (max-width: 720px){
	body.uaia-center-mobile .uaia-steps__item{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:8px}
	body.uaia-center-mobile .uaia-steps__text{margin-inline:auto}
}

/* On a phone, under the theme's centring switch: the measured blocks centre
   their boxes as well as their text, or centred words sit in a box pinned to
   the left edge. */
@media (max-width: 720px){
	body.uaia-center-mobile .uaia-page-hero h1.elementor-heading-title,
	body.uaia-center-mobile .uaia-page-hero__lead,
	body.uaia-center-mobile .uaia-page-hero__lead p,
	body.uaia-center-mobile .uaia-prose,
	body.uaia-center-mobile .uaia-steps{margin-inline:auto}
}

/* On the Hub page, the page's own heading already says what this is. The
   Hub's built in heading and introduction would say it again straight
   underneath, so inside the page they give way. The search, the tiers and
   the guides are untouched, and the Hub placed anywhere else keeps both. */
.uaia-page-hub .uaia-hub__heading,
.uaia-page-hub .uaia-hub__intro{display:none}


/* ============================================================================
   SECTION SPACING, HERO HEIGHT AND BUTTON PAIRS

   The homepage sections built from containers carry their spacing (96 and
   90 pixels) and the hero its height (88% of the screen) as saved Elementor
   settings, so the stylesheet has to override them to change them without
   rebuilding the page. These rules find the homepage sections by position
   as well as by class, so they work whether or not those sections' classes
   have been repaired. They are limited to the homepage and the theme's own
   sections: a page built by hand in Elementor keeps its own spacing.
   ========================================================================== */

/* Homepage sections after the hero. Containers holding a UAIA widget are
   skipped, because the widget spaces itself and would otherwise be doubled. */
body.home #uaia-main [data-elementor-type="wp-page"] > .e-con:not(:first-child):not(:has([data-widget_type^="uaia_"])),
#uaia-main .e-con.uaia-block:not(.uaia-hero){
	padding-block:var(--section-y)!important;
}

/* The hero leaves the photo strip in view. It still grows to fit its
   content, so on a short screen nothing is cut off. */
body.home #uaia-main [data-elementor-type="wp-page"] > .e-con:first-child,
#uaia-main .e-con.uaia-hero{
	--min-height:calc(100vh - var(--marquee-h));
	min-height:calc(100vh - var(--marquee-h))!important;
	min-height:calc(100svh - var(--marquee-h))!important;
	/* Less below the buttons, so the strip gains that space too. The top
	   stays, because the header sits over it. */
	padding-bottom:clamp(26px,2.6vw,40px)!important;
}
/* The widget hero drops its minimum below 900 pixels, so this stays above it. */
@media (min-width: 901px){
	.uaia-hero{min-height:min(calc(100vh - var(--marquee-h)),880px)}
	@supports (height:100svh){
		.uaia-hero{min-height:min(calc(100svh - var(--marquee-h)),880px)}
	}
}

/* Two or more buttons in a row sit beside each other rather than stacked.
   Anything else in the same column, such as the paragraph above them, keeps
   its own full line. On a narrow screen they wrap onto a second line. */
#uaia-main .e-con:has(> .elementor-widget-button + .elementor-widget-button),
#uaia-main .e-con-inner:has(> .elementor-widget-button + .elementor-widget-button){
	flex-direction:row!important;flex-wrap:wrap!important;
	align-items:center!important;align-content:flex-start;
	column-gap:12px!important;
}
#uaia-main .e-con:has(> .elementor-widget-button + .elementor-widget-button) > .elementor-widget:not(.elementor-widget-button),
#uaia-main .e-con-inner:has(> .elementor-widget-button + .elementor-widget-button) > .elementor-widget:not(.elementor-widget-button){
	flex:0 0 100%!important;
}
body #uaia-main .e-con:has(> .elementor-widget-button + .elementor-widget-button) > .elementor-widget-button,
body #uaia-main .e-con-inner:has(> .elementor-widget-button + .elementor-widget-button) > .elementor-widget-button{
	width:auto!important;max-width:100%!important;flex:0 0 auto!important;
	/* The full width setting centres every widget with automatic side
	   margins, which would push a pair of buttons to opposite sides. */
	margin-inline:0!important;
}
@media (max-width: 720px){
	body.uaia-center-mobile #uaia-main .e-con:has(> .elementor-widget-button + .elementor-widget-button),
	body.uaia-center-mobile #uaia-main .e-con-inner:has(> .elementor-widget-button + .elementor-widget-button){
		justify-content:center!important;
	}
}

/* ============================================================================
   INNER PAGES, SECOND DESIGN

   Photographs held inside the page margins with rounded corners, text beside
   photographs, rows of photo cards, one contrasting band, live numbers, and
   a closing photograph. Grids carry !important because Elementor's own
   container rules have the same weight and would otherwise win or lose on
   the order the stylesheets happen to load in.

   Text laid over a photograph uses --light-surface, which stays light in both
   modes, because the photograph is always darkened behind it. The band uses
   --inverse-bg behind --inverse-text, which swap in light mode, so it is
   light on the dark site and dark on the light one.
   ========================================================================== */
.uaia-ip{
	padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)))!important;
	padding-block:var(--section-y)!important;
	box-sizing:border-box;gap:0!important;
}

/* The opening. */
.uaia-ip-hero{padding-top:clamp(14px,1.6vw,22px)!important}
.uaia-ip-hero__card,
.uaia-ip-cta{
	position:relative;overflow:hidden;isolation:isolate;
	border-radius:var(--r-lg);background-color:var(--night);
	justify-content:flex-end!important;align-items:flex-start!important;
	padding:clamp(26px,4vw,56px)!important;gap:clamp(12px,1.4vw,16px)!important;
}
.uaia-ip-hero__card{min-height:clamp(420px,54vh,560px)}
.uaia-ip-hero--compact .uaia-ip-hero__card{min-height:clamp(300px,38vh,380px)}
/* The dark layer over the photograph.

   Elementor draws every container's own overlay on this same ::before layer,
   and switches it off unless its variable --background-overlay is set, with a
   rule that loads after this one and weighs the same. Setting that variable
   is Elementor's own way of saying "draw the layer", and the extra weight
   below means the order the stylesheets load in cannot remove it. */
.uaia-ip-hero__card,
.uaia-ip-cta{--background-overlay:'';--overlay-opacity:1;--overlay-mix-blend-mode:normal}
#uaia-main .uaia-ip-hero__card::before,
#uaia-main .uaia-ip-cta::before{
	content:""!important;display:block!important;position:absolute!important;
	inset:0!important;z-index:0;pointer-events:none;
	opacity:1!important;mix-blend-mode:normal!important;border-radius:inherit;
	background:
		linear-gradient(90deg,rgba(20,16,13,.9) 0%,rgba(20,16,13,.72) 45%,rgba(20,16,13,.5) 100%),
		linear-gradient(0deg,rgba(20,16,13,.5) 0%,rgba(20,16,13,0) 60%)!important;
}
.uaia-ip-hero__card > *,
.uaia-ip-cta > *{position:relative;z-index:1}
.uaia-tpl .uaia-ip-hero__card .uaia-ip-hero__title .elementor-heading-title{
	color:var(--light-surface)!important;
	font-size:clamp(2.3rem,5vw,4.1rem);line-height:1.02;max-width:15ch;
}
.uaia-tpl .uaia-ip-hero__card .uaia-ip-hero__lead,
.uaia-tpl .uaia-ip-hero__card .uaia-ip-hero__lead p{
	color:rgba(246,240,230,.84)!important;
	font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.6;max-width:46ch;margin:0;
}
.uaia-ip-hero__card .uaia-btn--outline .elementor-button,
.uaia-ip-cta .uaia-btn--outline .elementor-button{
	color:var(--light-surface)!important;background:transparent!important;
	box-shadow:inset 0 0 0 1.5px rgba(246,240,230,.55)!important;
}

/* Text beside a photograph. */
.uaia-ip-split{
	display:grid!important;
	grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
	gap:clamp(28px,5vw,72px)!important;align-items:center!important;
}
.uaia-ip-split--flip{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.uaia-ip-split__text{gap:clamp(14px,1.6vw,18px)!important;justify-content:center!important}
.uaia-tpl .uaia-ip-split__title .elementor-heading-title,
.uaia-tpl .uaia-ip-head__title .elementor-heading-title{
	font-size:clamp(1.8rem,3.3vw,2.6rem);line-height:1.08;
}
.uaia-tpl .uaia-ip-split__title .elementor-heading-title{max-width:17ch}
.uaia-tpl .uaia-ip-split__body,
.uaia-tpl .uaia-ip-split__body p{font-size:1rem;line-height:1.72}
.uaia-tpl .uaia-ip-split__body p{margin:0 0 14px}
.uaia-tpl .uaia-ip-split__body p:last-child{margin-bottom:0}
.uaia-tpl .uaia-ip-split__body h2{
	margin:clamp(22px,2.6vw,30px) 0 10px;font-family:var(--font-display);font-weight:700;
	font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.12;letter-spacing:-.02em;color:var(--ivory);
}
.uaia-tpl .uaia-ip-split__body h2:first-child{margin-top:0}
.uaia-tpl .uaia-ip-split__body a{color:var(--amber-ink);text-underline-offset:3px}
.uaia-ip-split__media{position:relative}
.uaia-ip-split__photo img,
.uaia-ip-split__photo .elementor-widget-container img{
	display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r-lg);
}
.uaia-ip-contact .uaia-ip-split__photo img{aspect-ratio:4/5}

/* A short line laid over the corner of a photograph. */
body #uaia-main .uaia-ip-split__media > .elementor-widget.uaia-ip-note{
	position:absolute;left:clamp(12px,2vw,22px);bottom:clamp(12px,2vw,22px);
	width:auto!important;max-width:min(80%,340px)!important;margin:0!important;
	padding:13px 18px;border-radius:var(--r-md);
	background:var(--glass);border:1px solid var(--line);
	-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.uaia-tpl .uaia-ip-note,
.uaia-tpl .uaia-ip-note p{margin:0;font-size:.92rem;line-height:1.5;color:var(--ivory)!important}
.uaia-tpl .uaia-ip-note a{color:var(--amber-ink);font-weight:600}

/* A short list with a tick on each line. */
.uaia-ip-checks .elementor-icon-list-items{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.uaia-ip-checks .elementor-icon-list-item{position:relative;padding-left:32px;line-height:1.5}
.uaia-ip-checks .elementor-icon-list-item::before{
	content:"";position:absolute;left:0;top:.08em;width:21px;height:21px;border-radius:50%;
	background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2314100D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.uaia-ip-checks .elementor-icon-list-icon{display:none}
.uaia-tpl .uaia-ip-checks .elementor-icon-list-text{color:var(--ivory)!important;font-weight:500}

/* A centred heading over cards. */
.uaia-ip-head{align-items:center!important;text-align:center;gap:10px!important;margin-bottom:clamp(22px,3vw,36px)}
.uaia-tpl .uaia-ip-head__intro,
.uaia-tpl .uaia-ip-head__intro p{max-width:56ch;margin:0 auto}

/* Photo cards. */
.uaia-ip-cards{
	display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
	gap:clamp(14px,1.8vw,22px)!important;
}
.uaia-ip-card{
	background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
	padding:10px 10px clamp(18px,2vw,24px)!important;gap:10px!important;
	transition:transform .35s var(--ease),box-shadow .35s ease;
}
.uaia-ip-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.uaia-ip-card__photo img{
	display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
	border-radius:calc(var(--r-lg) - 8px);
}
.uaia-ip-card > .uaia-ip-card__title,
.uaia-ip-card > .uaia-ip-card__text{padding-inline:12px}
.uaia-ip-card > .uaia-ip-card__title{margin-top:6px}
.uaia-tpl .uaia-ip-card__title .elementor-heading-title{font-size:1.18rem;line-height:1.25}
.uaia-tpl .uaia-ip-card__text,
.uaia-tpl .uaia-ip-card__text p{margin:0;font-size:.95rem;line-height:1.6}

/* The contrasting band. */
.uaia-ip-band{
	background:var(--inverse-bg);color:var(--inverse-text);border-radius:var(--r-lg);
	padding:clamp(28px,4.4vw,60px)!important;gap:clamp(22px,3vw,36px)!important;
}
.uaia-ip-band__head{gap:10px!important;max-width:42rem}
.uaia-tpl .uaia-ip-band .elementor-heading-title{color:var(--inverse-text)!important}
.uaia-tpl .uaia-ip-band__title .elementor-heading-title{font-size:clamp(1.8rem,3.3vw,2.6rem);line-height:1.08}
.uaia-tpl .uaia-ip-band .elementor-widget-text-editor,
.uaia-tpl .uaia-ip-band .elementor-widget-text-editor p{
	color:color-mix(in srgb,var(--inverse-text) 72%,transparent)!important;margin:0;
}
.uaia-ip-steps{
	display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
	gap:12px!important;
}
.uaia-ip-step{
	background:color-mix(in srgb,var(--inverse-text) 5%,var(--inverse-bg));
	border:1px solid color-mix(in srgb,var(--inverse-text) 12%,transparent);
	border-radius:var(--r-md);padding:clamp(18px,2vw,22px)!important;gap:8px!important;
}
.uaia-tpl .uaia-ip-band .uaia-ip-step__n,
.uaia-tpl .uaia-ip-band .uaia-ip-step__n p{
	font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1;
	color:var(--terra)!important;font-variant-numeric:tabular-nums;
}
.uaia-tpl .uaia-ip-step__title .elementor-heading-title{font-size:1.06rem;line-height:1.25}
.uaia-tpl .uaia-ip-band .uaia-ip-step__text p{font-size:.92rem;line-height:1.55}

/* Numbers, counted live. */
.uaia-ip-numbers{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
	margin:0;border-block:1px solid var(--line);
}
/* Each count sits in the middle of its column, between the dividers. */
.uaia-ip-numbers__item{
	display:flex;flex-direction:column-reverse;gap:6px;
	align-items:center;text-align:center;
	padding:clamp(20px,2.6vw,30px) clamp(12px,2vw,24px);
	border-left:1px solid var(--line);
}
.uaia-ip-numbers__item:first-child{border-left:0}
.uaia-ip-numbers dd{
	margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
	font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;color:var(--amber-ink);
}
.uaia-ip-numbers dt{font-size:.9rem;color:var(--dim)}

/* The close. */
.uaia-ip-cta{min-height:clamp(260px,28vw,340px)}
.uaia-tpl .uaia-ip-cta .uaia-ip-cta__title .elementor-heading-title{
	color:var(--light-surface)!important;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.08;max-width:20ch;
}

/* Contact: the form is its own panel, so its column is left plain. */
.uaia-ip-contact{align-items:start!important}
.uaia-ip-contact__form .uaia-panel{max-width:none}
.uaia-tpl .uaia-ip-contact__body > .elementor-widget-container > p,
.uaia-tpl .uaia-ip-contact__body > p{font-size:1rem;line-height:1.7}

/* Embedded pieces sit on the measure without adding their own width. */
.uaia-ip .uaia-hub{max-width:none}

@media (max-width: 900px){
	.uaia-ip-split,
	.uaia-ip-split--flip{grid-template-columns:minmax(0,1fr)}
	.uaia-ip-split .uaia-ip-split__media{order:-1}
	.uaia-ip-contact .uaia-ip-split__media{order:2}
	.uaia-ip-numbers__item:nth-child(odd){border-left:0}
	.uaia-ip-numbers__item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width: 720px){
	body.uaia-center-mobile .uaia-ip-hero__card,
	body.uaia-center-mobile .uaia-ip-cta{align-items:center!important;text-align:center}
	body.uaia-center-mobile .uaia-tpl .uaia-ip-hero__card .uaia-ip-hero__title .elementor-heading-title,
	body.uaia-center-mobile .uaia-tpl .uaia-ip-hero__card .uaia-ip-hero__lead p,
	body.uaia-center-mobile .uaia-tpl .uaia-ip-split__title .elementor-heading-title,
	body.uaia-center-mobile .uaia-tpl .uaia-ip-cta .uaia-ip-cta__title .elementor-heading-title{margin-inline:auto}
	body.uaia-center-mobile .uaia-ip-split__text,
	body.uaia-center-mobile .uaia-ip-card,
	body.uaia-center-mobile .uaia-ip-step,
	body.uaia-center-mobile .uaia-ip-band__head{text-align:center;align-items:center!important}
	body.uaia-center-mobile .uaia-ip-checks .elementor-icon-list-items{justify-content:center;text-align:left;width:max-content;max-width:100%;margin-inline:auto}
	body.uaia-center-mobile .uaia-ip-numbers__item{align-items:center;text-align:center}
	.uaia-ip-hero__card{min-height:clamp(380px,62vh,520px)}
}

/* With two buttons the opening becomes a wrapping row (see BUTTON PAIRS), and
   in a row "to the end" means to the right. The words and buttons go to the
   bottom left instead. */
#uaia-main .uaia-ip-hero__card:has(> .elementor-widget-button + .elementor-widget-button){
	justify-content:flex-start!important;align-content:flex-end!important;
}
@media (max-width: 720px){
	body.uaia-center-mobile #uaia-main .uaia-ip-hero__card:has(> .elementor-widget-button + .elementor-widget-button){justify-content:center!important}
}