/* AUV block theme styles.
 * Derived from the legacy site's style.css / w_auv.css (root font-size 10px => 1rem = 10px).
 * Loaded on BOTH the front end and the editor (see functions.php) so the editing
 * view matches the published page - Gutenberg reference section 33.
 */

:root{
--navy:#0b1f44; --gold:#d7970c; --grey:#f1f1f1; --muted:#989898; --text:#707070;
  /* EB Garamond is the closest free analogue to MinionPro-Bold (both Renaissance old-style) */
  --display:"MinionPro-Bold","EB Garamond",Georgia,serif;
  --body:"Quicksand",sans-serif;
  font-family:var(--body); color:var(--navy); font-size:18px; line-height:1.6;
  background:#fff;
}

.auv-landing{font-family:var(--body);color:var(--navy);font-size:18px;line-height:1.6;background:#fff}
/* Host-theme shims removed: in the block theme, alignfull + theme.json
   handle full-width layout natively. */

.auv-landing *{box-sizing:border-box}
.auv-landing p{margin:0}
.auv-landing img{max-width:100%;height:auto;display:block}
.auv-landing figure{margin:0}
.auv-wrap{max-width:1385px;margin:0 auto;padding:0 40px}

/* ============ HEADER ============ */
.site-header{background:#fff;border-bottom:1px solid #eee}
.header-top{padding:10px 0 7px;text-align:right}
.header-top .auv-wrap{display:flex;justify-content:flex-end;gap:24px;align-items:center}
.header-top p{color:#0b1f44b8;font-size:12px;font-weight:500;line-height:1.2}
.header-top .lang{color:var(--navy);font-weight:700;font-size:14px}
.header-top .lang.is-active-lang{color:var(--gold)}
.header-bottom .auv-wrap{display:flex;justify-content:space-between;align-items:center;padding-top:14px;padding-bottom:14px}
.site-logo{font-family:var(--display);font-size:30px;font-weight:800;color:var(--navy);letter-spacing:.5px}
.site-logo span{color:var(--gold)}
.site-logo{flex:0 0 auto;white-space:nowrap}
.main-nav{display:flex;gap:30px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:1 1 auto}
.main-nav p{font-size:15px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.4px;cursor:pointer}
.main-nav p:hover{color:var(--gold)}

/* ============ HERO ============ */
.auv-landing .auv-herostrip{background:var(--navy);position:relative;overflow:hidden}
.auv-landing .auv-herostrip .hero-media{max-width:1184px;margin-left:auto;margin-right:0}
/* margin-right:0 is required: Gutenberg layout CSS sets margin-inline:auto on
   children, which centred the image instead of pushing it right as the original does. */
.auv-landing .auv-herostrip .hero-media img{width:100%;height:660px;object-fit:cover}
.auv-landing .banner-welcome-to{position:absolute;bottom:8%;left:80px;max-width:815px;z-index:2}
.auv-landing .banner-welcome-to__content{background:#fff;padding:34px 40px;margin-bottom:10px}
.auv-landing .content__wrapper{max-width:570px}
.auv-landing .hero-eyebrow{font-family:var(--display);font-size:63px;line-height:1;color:var(--navy);font-weight:700;margin-bottom:4px}
.auv-landing .hero-title{font-family:var(--display);font-size:25px;line-height:1.25;color:var(--gold);font-weight:700;margin:0 0 18px}
.auv-landing .hero-copy{font-size:18px;color:var(--navy);margin-bottom:22px}

/* ============ SHARED ============ */
.auv-landing .auv-section-title{font-family:var(--display);font-size:60px;line-height:1.15;color:var(--navy);text-align:center;font-weight:700;margin:0 0 24px}
.auv-landing .auv-section-title.is-gold{color:var(--gold)}
.auv-landing .auv-section-intro{max-width:920px;margin:0 auto 50px;text-align:center;font-size:18px;color:var(--navy)}
.auv-landing .wp-block-button__link{background:var(--gold);color:#fff;border-radius:5px;font-family:var(--body);font-size:15px;font-weight:700;padding:11px 28px;text-decoration:none;display:inline-block}
.auv-landing .wp-block-button__link:hover{background:var(--navy)}

/* ============ ABOUT ============ */
.auv-landing .about-auv{margin:100px 0}
.auv-landing .about-auv .auv-about-content{display:flex;gap:60px;align-items:center;flex-wrap:wrap}
.auv-landing .about-auv .auv-right{flex:1 1 480px;max-width:610px}
.auv-landing .about-auv .auv-left{flex:1 1 380px;position:relative}
.auv-landing .about-auv .block-main-title{font-family:var(--display);font-size:60px;line-height:1;color:var(--gold);font-weight:700;margin-bottom:36px}
.auv-landing .about-auv .block-list-item{font-size:18px;font-weight:500;color:var(--navy);margin-bottom:30px}
.auv-landing .about-auv .block-img img{box-shadow:0 3px 6px rgb(0 0 0/16%);width:100%;height:420px;object-fit:cover}
/* rotated gold caption on the right edge, as in the original.
   Uses writing-mode rather than rotate(): transform-origin on a long string
   swung the label out of its section and over the hero. */
.auv-landing .about-auv .auv-left{padding-right:52px}
.auv-landing .about-auv .img-note{
  position:absolute;top:50%;right:0;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;color:var(--gold);font-family:var(--display);
  font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  white-space:nowrap;max-height:100%;overflow:hidden;
}
.auv-landing .about-auv .img-note::after{
  content:"";position:absolute;left:50%;bottom:-70px;width:1px;height:58px;background:var(--gold)
}

/* ============ NEWS - asymmetric grid, first card spans 2 rows ============ */
.auv-landing .events-news{background:var(--grey);padding:96px 0}
.auv-landing .news-wrapper{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:15px}
.auv-landing .block-news{position:relative;width:100%;background:#fff;overflow:hidden}
.auv-landing .block-news:first-child{grid-row:1/3}
.auv-landing .block-news:first-child img{height:70%;min-height:330px}
.auv-landing .block-news:first-child .news-desc{padding:14px 40px 15px;background:#fff}
.auv-landing .block-news:first-child .news-desc .time{padding-top:10px;color:var(--navy);font-weight:300;font-size:14px}
.auv-landing .block-news:first-child .news-desc .title{font-size:20px}
.auv-landing .block-news img{width:100%;height:190px;object-fit:cover;transition:transform .5s ease}
.auv-landing .block-news:hover img{transform:scale(1.05)}
.auv-landing .block-news .news-desc{padding:14px 20px 18px}
.auv-landing .block-news .news-desc .title{font-family:var(--body);font-weight:700;font-size:16px;color:var(--navy);line-height:1.4}
.auv-landing .block-news .news-desc .time{color:var(--muted);font-size:13px;margin-bottom:4px}

/* ============ ACADEMIC FOCUS - small centred image, uppercase title ============ */
.auv-landing .academics-auv{padding:100px 0}
.auv-landing .list-item-auv{display:flex;gap:30px;flex-wrap:wrap;justify-content:center}
.auv-landing .content-items{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 240px;max-width:300px;margin:10px}
.auv-landing .content-items figure{width:36%;margin:0 auto 40px}
.auv-landing .content-items img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.auv-landing .content-items .card-title{color:var(--navy);font-family:var(--display);font-size:20px;line-height:1.7;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.auv-landing .content-items .card-text{color:var(--text);font-size:16px}

/* ============ WHY AUV ============ */
.auv-landing .index-earth{padding:150px 0;background:var(--navy);color:#fff;position:relative;overflow:hidden}
.auv-landing .index-earth .auv-section-title{color:#fff;margin-bottom:100px}
.auv-landing .why-grid{display:flex;flex-wrap:wrap;position:relative}
.auv-landing .why-col{flex:0 0 50%;max-width:50%;position:relative;z-index:1}
/* Use the adjacent-sibling selector, NOT :last-child - .why-grid also contains the
   globe placeholder and the theme-injected .imp, so the 2nd column is never last. */
.auv-landing .why-col + .why-col{text-align:right}
.auv-landing .why-col + .why-col .why-text{margin-left:auto}
.auv-landing .why-col + .why-col .related-text::after{left:auto;right:60px}
.auv-landing .block{margin-bottom:48px;position:relative}
.auv-landing .related-text{font-family:var(--display);font-size:40px;color:var(--gold);font-weight:700;margin-bottom:8px;position:relative;display:inline-block}
.auv-landing .related-text::after{content:"";position:absolute;top:55%;left:60px;width:160px;height:1px;background:var(--gold)}
.auv-landing .why-text{color:#fff;font-size:18px;max-width:400px}
/* decorative globe ring, echoing the original animated globe */
.auv-landing .why-globe{position:absolute;top:50%;left:50%;width:340px;height:340px;transform:translate(-50%,-50%);border:1px solid rgba(215,151,12,.35);border-radius:50%;pointer-events:none}
.auv-landing .why-globe::before,.auv-landing .why-globe::after{content:"";position:absolute;inset:0;border:1px solid rgba(215,151,12,.22);border-radius:50%}
.auv-landing .why-globe::before{transform:scaleX(.45)}
.auv-landing .why-globe::after{transform:scaleY(.45)}

/* ============ GALLERY ============ */
.auv-landing .auv-gallery{margin-top:96px;padding-bottom:96px}
.auv-landing .auv-gallery .title-gallery{margin-bottom:60px}
.auv-landing .gallery-strip{display:flex;gap:12px}
.auv-landing .gallery-strip figure{flex:0 0 calc(25% - 9px)}
.auv-landing .gallery-strip figure{position:relative;overflow:hidden}
.auv-landing .gallery-strip img{width:100%;height:220px;object-fit:cover;transition:transform .5s ease}
.auv-landing .gallery-strip figure:hover img{transform:scale(1.06)}

/* ============ PARTNERS ============ */
.auv-landing .auv-partners{padding:100px 0;background:var(--grey)}
.auv-landing .title-valus{font-family:var(--display);font-size:60px;color:var(--gold);text-align:center;font-weight:700;margin-bottom:60px}
.auv-landing .partner-strip{display:flex;gap:60px;align-items:center;justify-content:center;flex-wrap:wrap}
/* Full colour, natural proportions. The greyscale treatment was mine and it flattened
   real university crests (Brown, UCLA, Berkeley) that are recognisable BY their colour.
   Sizing is capped by height only, so each logo keeps its own aspect ratio and width. */
.auv-landing .partner-strip figure{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
/* Matches the original exactly: img.academict-cvoer_s { width:180px; height:180px; object-fit:cover } */
.auv-landing .partner-strip img{width:180px;height:180px;object-fit:cover;filter:none;opacity:1;transition:transform .3s ease}
.auv-landing .partner-strip figure:hover img{transform:scale(1.06)}

/* ============ FOOTER ============ */
.site-footer{background:#0d1f3c;color:#fff;padding:70px 0 0}
.footer-cols{display:flex;gap:50px;flex-wrap:wrap}
.footer-col{flex:1 1 220px}
.site-footer .site-logo{color:#fff;font-size:26px}
.site-footer p{color:#ffffffcc;font-size:16px;margin-bottom:12px}
.site-footer .foot-label{color:var(--gold);font-family:var(--display);font-size:20px;font-weight:700;margin-bottom:16px;text-transform:uppercase}
.copyright{border-top:1px solid #ffffff1f;margin-top:50px;padding:22px 0;text-align:center}
.copyright p{color:#ffffff8c;font-size:14px;margin:0}
.auv-landing .wp-block-social-links{margin-top:8px}

/* ============ RESPONSIVE ============ */
/* nav runs out of room well before the tablet breakpoint - step it down first */
@media (max-width:1200px){
  .auv-landing .main-nav{gap:18px}
  .auv-landing .main-nav p{font-size:13px}
  .auv-landing .site-logo{font-size:26px}
}
@media (max-width:900px){
  .auv-landing .header-bottom .auv-wrap{flex-direction:column;align-items:flex-start;gap:10px}
  .auv-landing .main-nav{justify-content:flex-start}
}
@media (max-width:1024px){
  .auv-landing .hero-eyebrow{font-size:46px}
  .auv-landing .auv-section-title,.auv-landing .about-auv .block-main-title,.auv-landing .title-valus{font-size:42px}
  .auv-landing .banner-welcome-to{left:40px;bottom:6%}
  .auv-landing .auv-herostrip .hero-media img{height:520px}
  .auv-landing .gallery-strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .auv-landing .auv-wrap{padding:0 20px}
  .auv-landing .hero-eyebrow{font-size:34px}
  .auv-landing .hero-title{font-size:19px}
  .auv-landing .auv-section-title,.auv-landing .about-auv .block-main-title,.auv-landing .title-valus{font-size:30px}
  .auv-landing .banner-welcome-to{position:static;max-width:none;padding:0 20px;margin-top:-40px}
  .auv-landing .banner-welcome-to__content{padding:24px 20px}
  .auv-landing .auv-herostrip .hero-media img{height:300px}
  .auv-landing .news-wrapper{grid-template-columns:1fr}
  .auv-landing .block-news:first-child{grid-row:auto}
  .auv-landing .block-news:first-child img{min-height:0}
  .auv-landing .why-col{flex:0 0 100%;max-width:100%;text-align:left!important}
  .auv-landing .why-col + .why-col .why-text{margin-left:0}
  .auv-landing .why-col + .why-col .related-text::after{left:60px;right:auto}
  .auv-landing .why-globe{display:none}
  .auv-landing .index-earth,.auv-landing .academics-auv,.auv-landing .auv-partners{padding:56px 0}
  .auv-landing .about-auv{margin:56px 0}
  .auv-landing .about-auv .img-note{display:none}
  .auv-landing .main-nav{gap:16px}
  .auv-landing .main-nav p{font-size:13px}
}


/* ============================================================================
   DESIGN REFINEMENTS
   Adopted after comparing against a Hostinger Horizons draft of the same site.
   The legacy palette is a flat white/#f1f1f1 alternation; warm neutrals read
   considerably better against the navy/gold brand while staying faithful to it.
   Kept as a clearly-scoped override block so it is easy to revert.
   ========================================================================= */
:root{
  --cream:#efece7;      /* warm section background, replaces flat white   */
  --warm-grey:#d8d5d0;  /* warm band, replaces #f1f1f1                    */
  --navy-deepest:#050d1e; /* dramatic band for Why AUV                    */
}

.about-auv{background:var(--cream);padding:100px 0;margin:0}
.auv-landing .events-news{background:var(--warm-grey)}
.academics-auv{background:var(--cream)}
.auv-landing .index-earth{background:var(--navy-deepest)}
.auv-gallery{background:var(--cream);margin-top:0;padding-top:96px}
.auv-landing .auv-partners{background:var(--cream)}

/* ---- Scroll reveal (progressive enhancement) ----
   Elements are visible by default; .reveal is added by JS only when it runs,
   so the page is never blank if JS fails or is blocked. */
.js-reveal .reveal{opacity:0;transform:translateY(24px)}
.js-reveal .reveal.is-visible{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}

/* ---- Partner marquee ---- */
@keyframes auv-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

@media (prefers-reduced-motion: reduce){
    .js-reveal .reveal{opacity:1;transform:none}
}


/* ============================================================================
   HEADER: core/navigation + core/site-logo
   The earlier rules targeted <p> elements from the prototype. The real header
   template part uses Core blocks, which render <a> inside <ul><li>.
   ========================================================================= */
.site-header .auv-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
.header-top .auv-wrap{justify-content:flex-end;gap:24px}
.header-top p{margin:0}
.header-top p a{color:#0b1f44b8;font-size:12px;font-weight:500;text-decoration:none}
.header-top p a:hover{color:var(--gold)}

.main-nav{flex:1 1 auto}
.main-nav .wp-block-navigation__container,
.main-nav ul{display:flex;flex-wrap:wrap;gap:26px;justify-content:flex-end;align-items:center;list-style:none;margin:0;padding:0}
/* .site-header prefix needed: Core ships .wp-block-navigation .wp-block-navigation-item__content
   {color:inherit} at the same specificity, which otherwise wins on source order. */
.site-header .main-nav a,
.site-header .main-nav .wp-block-navigation-item__content{
  font-family:var(--body);font-size:14px;font-weight:700;color:var(--navy);
  text-transform:uppercase;letter-spacing:.4px;text-decoration:none;white-space:nowrap;
}
.site-header .main-nav a:hover,
.site-header .main-nav .wp-block-navigation-item__content:hover{color:var(--gold);text-decoration:none}
.main-nav .current-menu-item > a{color:var(--gold)}

.wp-block-site-logo{flex:0 0 auto}
.wp-block-site-logo img{max-height:64px;width:auto}

@media (max-width:1200px){ .main-nav ul{gap:16px} .main-nav a{font-size:12px} }
@media (max-width:900px){
  .site-header .auv-wrap{flex-direction:column;align-items:flex-start;gap:12px}
  .main-nav ul{justify-content:flex-start}
}


/* ============================================================================
   HERO SLIDER + MAP
   Slides are real core/image blocks (still editable/replaceable in Gutenberg);
   only the crossfade is scripted. Matches the source Swiper: 5s autoplay, loop.
   Without JS the first slide simply shows - no blank hero.
   ========================================================================= */
.auv-herostrip .hero-media{position:relative;height:660px;max-width:1184px;margin-left:auto;margin-right:0}
.auv-herostrip .hero-media figure{margin:0}
.auv-herostrip .hero-media img{width:100%;height:660px;object-fit:cover}
.js-slider .auv-herostrip .hero-media figure{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.js-slider .auv-herostrip .hero-media figure.is-active{opacity:1}

.hero-dots{position:absolute;left:0;right:0;bottom:18px;display:flex;gap:10px;justify-content:center;z-index:3}
.hero-dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);transition:background .3s}
.hero-dots button.is-active{background:var(--gold)}

.map_home{line-height:0}
.map_home iframe{display:block;width:100%;height:450px;border:0}

@media (max-width:1024px){ .auv-herostrip .hero-media,.auv-herostrip .hero-media img{height:520px} }
@media (max-width:768px){ .auv-herostrip .hero-media,.auv-herostrip .hero-media img{height:320px} }
@media (prefers-reduced-motion: reduce){
  .js-slider .auv-herostrip .hero-media figure{transition:none}
}


/* ============================================================================
   SPINNING GLOBE  (decorative, theme-injected - see assets/js/globe.js)
   Geometry lifted from the legacy style.css .world-globe* rules.
   The placeholder ring below shows until the globe boots, and stays as the
   fallback for reduced-motion / no-JS.
   ========================================================================= */
.index-earth .imp{
  position:absolute;top:50%;left:50%;width:100%;max-width:530px;height:100%;max-height:530px;
  transform:translate(-50%,-50%);pointer-events:auto;z-index:0;
}
.index-earth .impp{position:relative;width:100%;height:100%;overflow:hidden}
.index-earth .world{
  width:100%;height:100%;
  cursor:move;cursor:-moz-grab;cursor:-webkit-grab;cursor:grab;
}
.index-earth .world:active{cursor:grabbing;cursor:-webkit-grabbing}
.index-earth .world-globe{width:100%;height:100%;position:relative}
.index-earth .world-globe-pole{
  position:absolute;width:409px;height:400px;left:60px;top:63px;
  border-radius:50%;background-color:#000;
}
.index-earth .world-globe-doms-container{
  box-shadow:inset 20px 0 80px 6px #000;position:absolute;top:50%;left:50%;
}
.index-earth .world-globe-halo{position:absolute;left:0;top:0;width:100%;height:100%}

/* placeholder ring: hidden once the real globe is running */
.has-globe .why-globe{display:none}

@media (max-width:1024px){ .index-earth .imp{max-width:400px;max-height:400px} }
@media (max-width:768px){ .index-earth .imp{display:none} }

@media (max-width:768px){ .auv-landing .partner-strip img{width:130px;height:130px} }


/* ============================================================================
   CAROUSEL ARROWS  (gallery + partners)
   The source uses Swiper with .swiper-button-prev/next. This is the same idea on
   native overflow scrolling: no library, and the strip still scrolls by touch/trackpad
   if JavaScript never runs.
   ========================================================================= */
.auv-carousel{position:relative}
/* nowrap is essential: the strips set flex-wrap:wrap for their static layout, which
   makes items wrap to a second line instead of overflowing, so nothing can scroll. */
.auv-carousel__track{
  /* No scroll-snap: it re-snapped after every programmatic jump, which broke the
     seamless loop reposition. The arrows already step by an exact item width. */
  display:flex;flex-wrap:nowrap!important;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start!important;
}
.auv-carousel__track::-webkit-scrollbar{display:none}
.auv-carousel__track > *{flex-shrink:0}

.auv-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .25s ease;
}
.auv-nav:hover{background:var(--navy)}
.auv-nav:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.auv-nav[hidden]{display:none}
.auv-nav svg{width:22px;height:22px}
.auv-nav--prev{left:-8px}
.auv-nav--next{right:-8px}

@media (max-width:1024px){
  .auv-landing .gallery-strip figure{flex:0 0 calc(50% - 6px)}
}
@media (max-width:768px){
  .auv-landing .gallery-strip figure{flex:0 0 80%}
  .auv-nav{width:38px;height:38px}
  .auv-nav--prev{left:0} .auv-nav--next{right:0}
}

.auv-carousel__track > .is-clone{opacity:1!important;transform:none!important}

/* ============================================================================
   DIRECTION D — minimal, grand, in motion
   Scoped under .auvd so the previous landing styles stay intact; removing this
   block reverts the design. Rendered entirely by native Gutenberg blocks.
   ========================================================================= */
.auvd{--serif:'Instrument Serif',Georgia,serif;--sans:'Inter',system-ui,sans-serif;
  font-family:var(--sans);color:var(--navy);background:#fbfaf8;font-size:17px;line-height:1.65}
.auvd :where(p){margin:0}
.auvd img{display:block;max-width:100%}
.auvd .auvd-wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.auvd .auvd-eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.auvd .auvd-display{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,64px);line-height:1.06;letter-spacing:-.01em;color:var(--navy)}
.auvd .auvd-lede{font-size:19px;line-height:1.7;color:#5d6675;max-width:56ch}

/* ---- hero (core/cover) ---- */
.auvd .auvd-hero{min-height:88vh;overflow:hidden}
.auvd .auvd-hero .wp-block-cover__image-background{animation:auvd-drift 26s ease-in-out infinite alternate;will-change:transform}
@keyframes auvd-drift{from{transform:scale(1.06)}to{transform:scale(1.15) translate3d(-1.6%,-1.4%,0)}}
.auvd .auvd-hero .wp-block-cover__inner-container{max-width:1240px;margin:0 auto;padding:0 40px;width:100%}
.auvd .auvd-h1{font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(42px,7vw,104px);line-height:.98;letter-spacing:-.02em;max-width:16ch;margin-bottom:26px}
.auvd .auvd-h1 em{font-style:italic;color:var(--gold)}
.auvd .auvd-herolede{color:rgba(255,255,255,.82);font-size:20px;line-height:1.6;max-width:50ch;margin-bottom:36px}

/* ---- buttons ---- */
.auvd .wp-block-button__link{border-radius:100px;font-weight:600;font-size:13.5px;padding:13px 26px;background:var(--gold);color:#fff}
.auvd .auvd-wire .wp-block-button__link{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34)}
.auvd .auvd-navybtn .wp-block-button__link{background:var(--navy);color:#fff}

/* ---- statement ---- */
.auvd .auvd-statement{padding:130px 0}
.auvd .auvd-statement .wp-block-columns{gap:80px}
.auvd .auvd-statement .auvd-body p{color:#5d6675;font-size:18px;margin-bottom:20px}

/* ---- programmes ---- */
.auvd .auvd-programmes{padding:110px 0 130px;border-top:1px solid rgba(11,31,68,.12)}
.auvd .auvd-proghead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:56px}
.auvd .auvd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(11,31,68,.12);border:1px solid rgba(11,31,68,.12)}
.auvd .auvd-prog{background:#fbfaf8;padding:38px 32px 34px;min-height:210px;position:relative;transition:background .45s ease}
.auvd .auvd-prog:hover{background:#fff}
.auvd .auvd-n{font-family:var(--serif);font-size:15px;color:var(--gold);margin-bottom:44px}
.auvd .auvd-prog h3{font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.25;margin:0}
.auvd .auvd-more{max-height:0;overflow:hidden;opacity:0;color:#5d6675;font-size:14.5px;line-height:1.6;
  transition:max-height .5s ease,opacity .4s ease,margin .5s ease}
.auvd .auvd-prog:hover .auvd-more{max-height:130px;opacity:1;margin-top:12px}

/* ---- partners ---- */
.auvd .auvd-proof{padding:0 0 120px}
.auvd .auvd-proofinner{border-top:1px solid rgba(11,31,68,.12);padding-top:44px;display:flex;align-items:center;gap:52px;flex-wrap:wrap}
.auvd .auvd-prooflabel{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#5d6675;font-weight:600}
.auvd .auvd-logos{display:flex;gap:44px;align-items:center;flex-wrap:wrap}
.auvd .auvd-logos img{height:56px;width:auto;opacity:.85;transition:opacity .4s ease,transform .4s ease}
.auvd .auvd-logos img:hover{opacity:1;transform:translateY(-3px)}
.auvd .auvd-logos figure{margin:0}

/* ---- voice ---- */
.auvd .auvd-voice{background:var(--navy);padding:130px 0;position:relative;overflow:hidden}
.auvd .auvd-voice::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(215,151,12,.16),transparent 68%);top:-220px;right:-160px;
  animation:auvd-float 16s ease-in-out infinite alternate;pointer-events:none}
@keyframes auvd-float{to{transform:translate3d(-40px,36px,0) scale(1.12)}}
.auvd .auvd-quote{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,46px);
  line-height:1.28;letter-spacing:-.01em;color:#fff;margin-bottom:34px;text-align:center;max-width:960px;margin:0 auto 34px}
.auvd .auvd-cite{font-size:14px;color:rgba(255,255,255,.62);text-align:center}

/* ---- faq ---- */
.auvd .auvd-faq{padding:120px 0 140px}
.auvd .auvd-faq .wp-block-columns{gap:80px}
.auvd .wp-block-details{border-bottom:1px solid rgba(11,31,68,.12)}
.auvd .wp-block-details summary{cursor:pointer;padding:26px 40px 26px 0;position:relative;font-size:18px;font-weight:500;list-style:none}
.auvd .wp-block-details summary::-webkit-details-marker{display:none}
.auvd .wp-block-details summary::after{content:"";position:absolute;right:6px;top:34px;width:11px;height:11px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);transition:transform .35s ease}
.auvd .wp-block-details[open] summary::after{transform:rotate(-135deg)}
.auvd .wp-block-details p{color:#5d6675;font-size:16px;max-width:62ch;margin:0 0 26px}

/* ---- closer ---- */
.auvd .auvd-closer{background:#050d1e;padding:120px 0;text-align:center}
.auvd .auvd-closer h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.4vw,58px);line-height:1.08;color:#fff;margin-bottom:20px}
.auvd .auvd-closer p{color:rgba(255,255,255,.66);font-size:18px;margin-bottom:36px}

/* ---- sticky apply (injected by auv.js) ---- */
.auvd-apply{position:fixed;right:26px;bottom:26px;z-index:60;opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.auvd-apply.show{opacity:1;transform:none;pointer-events:auto}
.auvd-apply a{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:#fff;text-decoration:none;
  font-weight:600;font-size:14px;padding:15px 26px;border-radius:100px;box-shadow:0 10px 34px rgba(11,31,68,.28)}

@media (prefers-reduced-motion: reduce){
  .auvd .auvd-hero .wp-block-cover__image-background,.auvd .auvd-voice::before{animation:none}
}
@media (max-width:900px){
  .auvd .auvd-wrap{padding:0 22px}
  .auvd .auvd-grid{grid-template-columns:1fr}
  .auvd .auvd-more{max-height:130px;opacity:1;margin-top:12px}
  .auvd .auvd-statement,.auvd .auvd-faq{padding:70px 0}
  .auvd .auvd-hero{min-height:78vh}
  .auvd .auvd-voice,.auvd .auvd-closer,.auvd .auvd-programmes{padding:70px 0}
}

/* ---- Direction D header: transparent, overlaid on the hero -----------------
   The AUV logo is white type with gold rules, drawn for a dark ground - on the
   old white header it was invisible apart from the gold bars. Floating the
   header over the navy hero is both the intended look and what makes the logo
   legible. Scoped to .home so interior pages keep a solid header. ---------- */
.home .site-header{position:absolute;top:0;left:0;right:0;z-index:30;background:transparent;border-bottom:0}
.home .site-header .header-top{padding:14px 0 0}
.home .site-header .header-top p a{color:rgba(255,255,255,.72);font-size:12px}
.home .site-header .header-top p a:hover{color:var(--gold)}
.home .site-header .header-bottom .auv-wrap{padding-top:8px;padding-bottom:8px}
.home .wp-block-site-logo img{max-height:56px;width:auto}

.home .site-header .main-nav ul{gap:26px}
.home .site-header .main-nav a,
.home .site-header .main-nav .wp-block-navigation-item__content{
  color:rgba(255,255,255,.88);font-family:'Inter',system-ui,sans-serif;
  font-size:13.5px;font-weight:500;text-transform:none;letter-spacing:0;
}
.home .site-header .main-nav a:hover,
.home .site-header .main-nav .wp-block-navigation-item__content:hover{color:var(--gold)}

/* the hero already carries a dark overlay, so the header needs no scrim */
.home .auvd-hero{padding-top:120px}

@media (max-width:1200px){ .home .site-header .main-nav ul{gap:16px} .home .site-header .main-nav a{font-size:12.5px} }
@media (max-width:900px){
  .home .site-header{position:static;background:var(--navy)}
  .home .site-header .main-nav a,
  .home .site-header .main-nav .wp-block-navigation-item__content{color:rgba(255,255,255,.88)}
  .home .auvd-hero{padding-top:0}
}