/*------------------------------------*\
    Palace Shopping — brand layer

    Loads after main.css and owns everything that is specific to the
    Palace Shopping design: tokens, the pointed shape motif, the chevrons,
    and every component in the templates.
\*------------------------------------*/


/**********
TOKENS
**********/

:root {
    /* Palette sampled from the supplied artwork */
    --navy: #3A5F72;
    --navy-dark: #2C4B5B;
    --navy-tint: #E4EAEE;
    --teal: #6bc2bb;
    --teal-light: #B2DCD8;
    --teal-pale: #E3F2F0;
    --pink: #EAC7DB;
    --pink-light: #F5E6EE;
    --coral: #EF715B;
    --red: #CC1819;
    --off-white: #F1F0EE;
    --white: #fff;
    --line: #DCE3E7;

    --text: #3A5F72;
    --text-muted: #5A7686;
    --ink: #1D2427;

    /* The article and information pages set body copy in black rather than
       the navy the rest of the site uses. Headings and ledes stay navy. */
    --copy-black: #000;

    --container: 1140px;
    --container-wide: 1266px;


    --radius: 8px;
    --radius-lg: 16px;
    --radius-pill: 12px;

    --gap: 30px;
    --section-space: 90px;

    /* Header spacing. --header-gap is the space between the bottom of the logo
       and the top of the asset below it; the design showed 58.5px and the
       client asked for a quarter off it, which is where 44px comes from.

       --nav-baseline-offset is the distance from a nav link's baseline to the
       bottom of its box (its descender plus the 5px padding and 3px underline
       the links carry). The right-hand column is pulled down by that much, so
       the nav's baseline lands on the bottom edge of the logo rather than the
       nav's box doing. Nudge this one number if the supplied logo artwork
       turns out to carry its own transparent padding. */
    --header-top: 58px;
    --header-gap: 44px;
    --nav-baseline-offset: 16px;


    --shadow-card: 0 2px 14px rgba(58, 95, 114, 0.07);
}


/**********
BASE
**********/

/*
 * font-weight is set here on purpose. The starter's style.css carries
 *   body { font: 300 11px/1.4 'Helvetica Neue', ... }
 * and a font shorthand sets the weight as well as the family, size and
 * line-height. The three below were already overriding it, but the weight was
 * not, so a stray 300 was inheriting into every piece of body copy on the site
 * and everything that did not set its own weight rendered Light instead of
 * Regular. That is what made the bold-against-light contrast read wrong.
 */
body {
    color: var(--text);
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* main.css pins everything to 16px/120% — restore a real type scale */
p,
div,
a,
li,
dd,
dt,
label,
input,
select,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* normalize.css sets content-box on input[type="search"], which makes any
   width:100% field overflow its container once padding is added. The
   attribute selector is needed to match its specificity. */
input,
input[type="search"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
select,
textarea,
button {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

p {
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--navy);
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 0.5em;
}

h1 {
    font-size: 42px;
}

h2 {
    font-size: 34px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

h5,
h6 {
    font-size: 17px;
}

a {
    color: var(--navy);
}

a:hover {
    opacity: 1;
    color: var(--teal);
}

strong,
b {
    font-weight: 700;
}

img {
    display: block;
}

ul,
ol {
    padding-left: 1.2em;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/**********
LAYOUT UTILITIES
**********/

.container {
    max-width: var(--container);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: 860px;
}

.section {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}


.section--tight {
    padding-top: 50px;
    padding-bottom: 50px;
}

.section--grey {
    background-color: var(--off-white);
}

.section--teal {
    background-color: var(--teal);
    color: var(--white);
}

.section--navy {
    background-color: var(--navy);
    color: var(--white);
}

.section--pink {
    background-color: var(--pink);
}

.text-center {
    text-align: center;
}


/**********
THE BRAND SHAPES

Every polygon below was traced from the supplied artwork rather than
approximated, so the angles match the mockups exactly. Percentages are relative
to each shape's own box, which is sized to the proportions it occupies in the
1440px design.
**********/

.shape {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.shape--teal {
    background-color: var(--teal);
}

.shape--pink {
    background-color: var(--pink);
}

/* The two shapes supplied as artwork are applied as masks, so the fill stays a
   CSS token and the softly rounded tip of the original is preserved. */
.shape-mask {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}


/**********
ICONS

Inline Iconify glyphs (see foundation_icon): they inherit colour and scale with
the font size, so only the odd box size needs overriding.
**********/

.icon {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
}

/* simple-line-icons:location-pin is a tall, narrow glyph that fills its
   viewBox, so it reads a touch large next to the others. */
.icon--location {
    width: 1.1em;
    height: 1.1em;
}

/* Header utility items (Free WiFi, Sat Nav): larger than the body icons and
   picked out in navy against the teal bar. */
.icon--utility {
    width: 24px;
    height: 24px;
    color: var(--navy);
}

/* entypo:location-pin sits in a lot of empty viewBox, so the Sat Nav pin needs
   a bigger box to read at the same size as the wifi glyph beside it. */
.icon--pin.icon--utility {
    width: 27px;
    height: 27px;
    margin: 0 -3px;
}

/* famicons:wifi-outline is a wide, shallow glyph — only about half its viewBox
   is drawn — so it takes a larger box again to match the pin. */
.icon--wifi.icon--utility {
    width: 32px;
    height: 32px;
    margin: 0 -3px;
}


/**********
CHEVRONS
**********/

/*
The arrow is img/arrow-orange.png traced to a 196x212 viewBox, so an arrow is
always 49 wide for every 53 tall. Size a set of chevrons by setting --chev-w on
the .chevrons wrapper and nothing else - the height and the nesting both follow
from it.

Each arrow has its tip at 196 and its notch at 106, so an arrow laid 106/196
(0.541) of a width over the one before it would have tip touching notch. Nesting
by 0.40 stops short of that and leaves the same small, even gap between the
arrows whatever size they are drawn at.
*/

.chevrons {
    --chev-w: 18px;
    --chev-nest: 0.30;
    display: inline-flex;
    align-items: center;
    color: var(--coral);
    line-height: 0;
}

.chevrons__item {
    display: block;
    flex: none;
    width: var(--chev-w);
    height: calc(var(--chev-w) * 53 / 49);
}

.chevrons__item + .chevrons__item {
    margin-left: calc(var(--chev-w) * var(--chev-nest) * -1);
}

.chevrons--light {
    color: var(--white);
}

.chevrons--teal {
    color: var(--teal);
}

.chevrons--navy {
    color: var(--navy);
}

.chevrons--lg {
    --chev-w: 42px;
}

.chevrons--sm {
    --chev-w: 15px;
}
.parking-cards__inner .chevrons--sm {
    --chev-w: 13px;
}
.chevrons--md {
    --chev-w: 18px;
}
/*
A chevron inside a button is sized in em so it tracks the label and cannot be
blown up by whatever context the button is dropped into.
*/
.btn .chevrons {
    margin-top: 3px;
    --chev-w: 0.75em;
    color: currentColor;
}

.chevrons--inline {
    margin-left: 8px;
}


/**********
SLASHES
**********/

/*
The "////" motif that follows labels such as OPENING HOURS. Typed slashes in
the label's own font, tightened the same way as .eyebrow__slashes so the run
reads as one mark rather than four spaced characters.
*/
.slashes {
    letter-spacing: 0.5px;
    margin-right: 0.12em;
    color: var(--navy);
}

.slashes--teal {
    color: var(--teal);
}

.slashes--light {
    color: var(--white);
}

/* Inside a button the motif takes the button's own colour — .slashes' navy
   would be invisible on the navy fill. Covers .btn--light's navy text too. */
.btn .slashes {
    color: inherit;
}


/**********
HEADINGS
**********/

/*
The coral full stop used across every heading in the design.

Sized in em so it stays in proportion whatever heading it lands in, and
line-height 1 keeps the taller glyph box from adding to the heading's line
height - the stop grows, the layout does not move.
*/
.dot {
    color: var(--coral);
    font-size: 1.15em;
    line-height: 1;
}
.site-footer__col .dot,
.article-rows .dot,
.visit-contact__details .dot,
.info-blocks .dot,
.info-top .dot{
    color: var(--teal);
}
.visit-blocks .dot{
    color: var(--navy);
}

.heading-rule {
    display: block;
    width: 70px;
    height: 3px;
    background-color: var(--teal);
    border: 0;
    margin: 18px 0 0;
}

.text-center .heading-rule,
.heading-rule--center,
.page-intro .heading-rule,
.intro .heading-rule {
    margin-left: auto;
    margin-right: auto;
}

.heading-rule--coral {
    background-color: var(--coral);
}

.eyebrow {
    font-size: 14px;
    font-weight: 700;
    /* letter-spacing: 0.08em; */
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 14px;
}

.section--teal .eyebrow,
.section--navy .eyebrow {
    color: var(--navy);
}

/*
Labels read "COMMUNITY //// NEWS". The 0.08em tracking above spreads the words
correctly but pushes the slashes apart; this pulls just the slash run back
together. The margin puts back the space the negative tracking takes off the
end of the run.
*/
.eyebrow__slashes {
    letter-spacing: -0.12em;
    margin-right: 0.12em;
}

.lede {
    font-size: 19px;
}


/**********
BUTTONS
**********/

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 20px;
    border: 2px solid var(--navy);
    border-radius: var(--radius-pill);
    background-color: var(--navy);
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background-color 200ms, color 200ms, border-color 200ms;
}

.btn:hover {
    background-color: var(--navy-dark);
    border-color: var(--navy-dark);
    color: var(--white);
}

.btn--light {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--navy);
}

.btn--light:hover {
    background-color: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.btn--outline {
    background-color: transparent;
    color: var(--navy);
}

.btn--outline:hover {
    background-color: var(--navy);
    color: var(--white);
}

.btn--active {
    background-color: var(--navy);
    color: var(--white);
}

/* The squarer buttons on the shop page */
.btn--block {
    width: 100%;
    max-width: 200px;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--radius);
    border-width: 1px;
    font-size: 16px;
}
/*
 * Set at the same 18px as the plain .btn the "Parking — find out more" box
 * uses, so "Store plan" and the phone number read at that size too.
 *
 * The width goes back up to the 200px .btn--block is built at. These boxes are
 * border-box, so 185px left 159px of content once the 12px padding and the
 * border came off -- three short of the 162px "020 8367 1210" needs at 18px,
 * and the number wrapped onto a second line.
 */
.visit-contact__details .btn--block {
    max-width: 200px;
    font-size: 18px;
}

.btn--block i {
    font-size: 16px;
}

.btn--block .icon {
    width: 30px;
    height: 30px;
}

.btn--block .icon--location {
    width: 28px;
    height: 28px;
}


/**********
HEADER
**********/

/* No z-index here on purpose: the header must not create a stacking context,
   so its shape can sit behind the hero while the mobile menu stays on top. */
.site-header {
    position: relative;
    padding: 0;
    background-color: var(--white);
}

/*
 * The supplied artwork (img/home-bg.svg) rather than a drawn polygon. Fitting the
 * asset's silhouette against the mockup puts it at its own 1126x1053 with its left
 * corner at x 335 and its top 384px above the page, which covers 99.9% of the teal
 * the design shows -- so the asset is drawn at design scale and needs no resizing.
 *
 * Everything below is a percentage of the header's width, so the shape keeps the
 * design's proportions at any viewport instead of drifting away from the hero:
 *   width         1126 / 1440 = 78.194%
 *   visible depth  478 / 1440 = 33.194%   (as padding, which resolves against width)
 *   x offset       335 / 1440, expressed against the free space the background has
 *                  to slide in: 0.2326 / (1 - 0.78194) = 106.688%
 *   y offset      -384 / 1440 the same way: -0.26667 / (0.33194 - 0.73125) = 66.783%
 * The box stops at the design's 478px so the artwork cannot reach the section below.
 */
.site-header__shape {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 0;
    padding-top: 36.194%;
    pointer-events: none;
    background-image: url('../img/home-bg.svg');
    background-repeat: no-repeat;
    background-size: 78.194% auto;
    background-position: 106.688% 70.783%;
}

/*
 * Above the design width the artwork is left at its own size and its own width --
 * scaling it up to reach the right edge is what made it read as stretched, and
 * carrying it there on a flat fill made it a band rather than a shape. It is drawn
 * at the design's angle and the design's size, starting the same 248px right of
 * the container as in the mockup, and it ends where the artwork ends:
 *   left edge  = container + 248 = (100vw - 1266) / 2 + 248 = 50vw - 385
 * At 1440 that is the design exactly. Past roughly 1800px the artwork no longer
 * spans the rest of the viewport, so the header's right corner is plain white --
 * that is the trade for never distorting or inflating the shape.
 *
 * vw rather than % on purpose: percentages in background-position resolve against
 * the free space left over after the image, not the box, so a % here would drift
 * with the viewport instead of tracking the container.
 */
@media only screen and (min-width: 1441px) {
    .site-header__shape {
        padding-top: 478px;
        background-size: 1126px auto;
        background-position: calc(50vw - 385px) -384px;
    }
}

/*
 * The artwork is as deep as the design's hero, which is fine because a hero, page
 * banner or shop image paints over its lower half. A few templates have none --
 * search results, 404, a single vacancy -- so there the content is lifted above it
 * and the teal stays in the header band where it belongs.
 */
body:not(:has(.hero, .page-header, .shop-hero, .article-hero)) main {
    position: relative;
    z-index: 1;
    background-color: var(--white);
    /* Deep enough to clear the artwork even when the page has almost no content,
       capped at the design depth so it matches the frozen shape above 1440px. */
    min-height: min(33.194vw, 478px);
}

/*
 * Bottom-aligned rather than centred: the design lines the nav's baseline up
 * with the logo, which is a bottom edge relationship, not a centre one. The
 * right-hand column is then pulled down by --nav-baseline-offset (see the
 * token block) so it is the nav's baseline that meets the logo's bottom edge
 * and not the bottom of the link's box.
 */
.site-header__inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    padding-top: var(--header-top);
    padding-bottom: var(--header-gap);
    gap: 40px;
}

.site-header__logo {
    flex: 0 0 auto;
}

/* Both block so the link's box ends exactly where the artwork does — as an
   inline image it would carry a line box's descender space underneath, and the
   nav would line up with that rather than with the logo. */
.site-header__logo a {
    display: block;
}

.site-header__logo img {
    display: block;
    width: auto;
    max-width: 190px;
    max-height: 88px;
}

/* The header mark is the navy artwork; the 780px block knocks it out to
   white for the teal mobile bar. */

/* Text wordmark used until the real logo is uploaded in Site Options */
.wordmark {
    display: block;
    color: var(--navy);
    font-size: 32px;
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.wordmark span {
    display: block;
}

.site-header__right {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    /* Negative, so the column hangs below the logo's bottom edge by exactly
       the nav's descender-and-underline space. A margin rather than a
       transform: flex-end aligns margin boxes, so the header does not grow. */
    margin-bottom: calc(-1 * var(--nav-baseline-offset));
}

.site-header__utility {
    display: flex;
    align-items: center;
    gap: 22px;
}
.site-header__utility i{
    color: var(--navy);
}

.utility-items {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.utility-items li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
}

.utility-items a {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--white);
}

.utility-items a:hover {
    color: var(--navy);
}

.utility-items i {
    font-size: 18px;
}

/* Social icon lists */
.social-links {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-links a {
    display: block;
    color: var(--white);
    font-size: 28px;
    line-height: 1;
}
.site-header .social-links a{
     font-size: 24px;
}

.social-links a:hover {
    color: var(--navy);
}

.social-links--navy a {
    color: var(--navy);
}

.social-links--navy a:hover {
    color: var(--coral);
}


/**********
NAVIGATION
**********/

.site-nav ul {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav li {
    position: relative;
}

.site-nav a {
    position: relative;
    display: block;
    padding-bottom: 5px;
    border-bottom: 3px solid transparent;
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-nav a:hover {
    color: var(--white);
    border-bottom-color: transparent;
}

/* Animated underline: sweeps in from the left on hover */
.site-nav > ul > li > a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--coral);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 300ms ease;
}

.site-nav > ul > li > a:hover::after,
.site-nav > ul > li > a:focus-visible::after {
    transform: scaleX(1);
}

.site-nav .current-menu-item > a::after,
.site-nav .current_page_item > a::after,
.site-nav .current-menu-parent > a::after,
.site-nav .current-page-ancestor > a::after {
    transform: scaleX(1);
}

/* main.css appends a Font Awesome caret to parent items — keep it inline and white */
.site-nav .menu-item-has-children::after {
    color: var(--white);
    font-size: 10px;
    top: 0;
}

@media only screen and (min-width: 1141px) {
    .feature-band__actions > .chevrons{
        --chev-w: 70px !important;
        margin-right: -30%;
    }
    .site-nav .menu-item-has-children {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .site-nav .menu-item-has-children > a {
        padding-bottom: 5px;
    }
}

/* Sub menus */
.site-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    display: block;
    flex-direction: column;
    gap: 0;
    min-width: 210px;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--white);
    box-shadow: var(--shadow-card);
    transition: max-height 200ms;
}

.site-nav .menu-item-has-children.sub-menu-active > .sub-menu {
    max-height: 600px;
}

.site-nav .sub-menu li {
    width: 100%;
}

.site-nav .sub-menu a {
    padding: 12px 18px;
    border-bottom: 1px solid var(--navy-tint);
    color: var(--navy);
    font-size: 14px;
}

.site-nav .sub-menu a:hover {
    background-color: var(--off-white);
    border-bottom-color: var(--navy-tint);
}

/* Burger — hidden on desktop */
.burgerNavContainer {
    display: none;
}


/**********
HERO SLIDER
**********/

/* Sits above the header shape, whose diagonal bottom edge runs behind it and
   emerges as a teal wedge to the right of the slider — as in the design. */
.hero {
    position: relative;
    z-index: 2;
}

.hero__inner {
    position: relative;
}

.hero__slide {
    position: relative;
    display: block;
    overflow: hidden;
}

/*
 * The design's banner is 550px deep at the container's 1236px of inner width
 * (1266 less the container's 15px each side), so the ratio is written against
 * those two numbers rather than the asset's own — that way the slider is 550px
 * tall at the design width and stays proportional either side of it.
 *
 * Banner artwork should therefore be supplied at 1236 x 550, or 2472 x 1100
 * for retina. Anything at a different ratio is cropped to fit by object-fit.
 */
.hero__media {
    position: relative;
    aspect-ratio: 1236 / 550;
    background-color: var(--navy-tint);
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__media .hero__img--mobile {
    display: none;
}

.hero__caption {
    position: absolute;
    top: 50%;
    left: 8%;
    right: 8%;
    transform: translateY(-50%);
    max-width: 520px;
}

.hero__caption--center {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    text-align: center;
}

.hero__caption--right {
    left: auto;
    right: 8%;
    text-align: right;
}

.hero__caption h2 {
    margin: 0;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero__caption p {
    margin: 4px 0 0;
    font-size: 56px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hero__caption--light,
.hero__caption--light h2 {
    color: var(--white);
}

/* Keeps overlay text readable when it sits over a busy photograph */
.hero__caption--light h2,
.hero__caption--light p {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

.hero__caption--dark,
.hero__caption--dark h2 {
    color: var(--navy);
}

.hero__badge {
    position: absolute;
    top: 44%;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background-color: var(--red);
    color: var(--white);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
}

/**********
HOMEPAGE INTRO + PROMO CARDS
**********/

/*
 * The homepage intro is the same block as the one on the shop and information
 * pages: the heading takes h1's 42px so "Shopping in the heart of Enfield
 * Town." is set at the size "Explore our shops." is, and the paragraph under
 * it takes the 26px lede. Its weight is the body copy's regular rather than
 * .page-intro's 500 — that is what the supplied PSD shows for this paragraph.
 *
 * The block widens to .page-intro's 940px to carry the larger heading on one
 * line; at 760px the 42px setting wrapped.
 */
.intro {
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
}

.intro h2 {
    font-size: 42px;
    margin-bottom: 14px;
}

.intro .lede {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 400;
}

.promo-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
    margin-top: 55px;
}

/* A lone card (one box scheduled off) sits centred at its usual width rather
   than hanging in the left-hand column. */
.promo-cards:has(> .promo-card:only-child) {
    grid-template-columns: minmax(0, calc((100% - var(--gap)) / 2));
    justify-content: center;
}

/*
 * Each card is one supplied image and nothing else: the artwork carries its
 * own pink shape, lettering and chevrons, so the theme draws none of them.
 * Supply it at 1180 x 680, twice the design's 590 x 340, and it lands on the
 * card's ratio with nothing cropped away.
 */
.promo-card {
    position: relative;
    display: block;
    overflow: hidden;
}

.promo-card__media {
    aspect-ratio: 590 / 340;
    border: 1px solid #e5c8da;
}

.promo-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/**********
FEATURE BAND
**********/

.feature-band {
    position: relative;
    overflow: hidden;
    background-color: var(--teal-light);
}

/*
 * The supplied community news artwork (img/shape-community.png) is 374x336, and the
 * band it sits in is wider than that in proportion, so stretching the mask to the
 * full 52% squashed the diagonal. Instead the artwork is drawn at its own aspect
 * ratio against the full height of the band and pinned to the right of the region,
 * where its point belongs -- 52% is where the point sits in the 1440px design. The
 * strip left of it is filled with the same teal; the artwork's left edge is opaque
 * top to bottom, so the join is invisible.
 *
 * If the band ever grows tall enough that the artwork would be wider than the
 * region, justify-content keeps the point at 52% and the overflow goes off the left,
 * where .feature-band clips it.
 */
.feature-band__shape {
    top: 0;
    bottom: 0;
    left: 0;
    width: 47%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
}

.feature-band__shape::before,
.feature-band__shape::after {
    content: '';
    background-color: var(--teal);
}

.feature-band__shape::before {
    flex: 1 1 auto;
}

.feature-band__shape::after {
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 374 / 336;
    -webkit-mask-image: url('../img/shape-community.png');
    mask-image: url('../img/shape-community.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.feature-band__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    padding-top: 70px;
    padding-bottom: 70px;
}

.feature-band__content {
    max-width: 420px;
}

.feature-band__content h2,
.feature-band__content p {
    color: var(--white);
}

/*
The eyebrow is a <p>, so the blanket white above was catching it. It stays navy
on the bands like it is everywhere else. Must sit after that rule - the two
selectors have the same specificity.
*/
/*
 * "COMMUNITY //// NEWS" is set larger and heavier here than the eyebrow is
 * elsewhere — 25px Roboto Black, which is what the supplied PSD shows for it.
 * Scoped to the band so the news and article eyebrows keep their 14px.
 */
.feature-band__content .eyebrow {
    color: var(--navy);
    font-size: 24px;
    font-weight: 900;
}

/*
 * .eyebrow__slashes pulls the slash run back by 0.12em, which is right for the
 * 14px/700 eyebrow but overlaps the run into one solid mark at 25px Black —
 * the Black slash is far thicker. Here the correction only cancels the 0.08em
 * tracking the label carries, so the four slashes stay distinct as the design
 * shows them.
 */
.feature-band__content .eyebrow__slashes {
    letter-spacing: 0.5px;
    margin-right: 0.08em;
}

.feature-band__content h2 {
    font-size: 30px;
    margin-bottom: 18px;
}

/* A point up on the body copy and a weight heavier, per the client's note. */
.feature-band__text {
    font-size: 22px;
    font-weight: 400;
}

.feature-band__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    margin-top: 30px;
}

/*
The white arrows in the bands sit a step above the coral --lg (42px) ones.
Direct child only - the button sitting next to them carries its own chevron and
must keep the size it gets from .btn .chevrons.
*/
.feature-band__actions > .chevrons {
    --chev-w: 60px;
}

.feature-band__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}


/**********
SOCIAL SECTION
**********/

.social-section {
    position: relative;
    overflow: hidden;
}

/*
 * The supplied artwork (img/get-social-bg.svg), the same heptagon as the header in
 * pink. The mockup's pink is broken up by the Instagram cards, so the fit came from
 * the three boundary stretches that are genuinely the shape's own edges: it lands at
 * natural size with its left corner at x 559 and its top level with the section,
 * covering 99% of the pink the design shows.
 *
 *   width     1126 / 1440 = 78.194%
 *   x offset   559 / 1440 against the background's free space:
 *              0.38826 / (1 - 0.78194) = 178.058%
 * The y offset is zero, so the box can run the full height of the section and the
 * artwork simply ends where it ends -- no horizontal cut across the pink.
 */
.social-section__shape {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../img/get-social-bg.svg');
    background-repeat: no-repeat;
    background-size: 78.194% auto;
    background-position: 178.058% 30px;
}

/*
 * As with the header shape: past the design width the artwork holds its own size
 * rather than inflating with the viewport, and keeps the design's gap from the
 * container instead of its share of the screen.
 *   left edge = container + 472 = (100vw - 1266) / 2 + 472 = 50vw - 161
 * At 1440 that is the design's 559 exactly, so it meets the rule above with no
 * jump. vw, not %, because a percentage in background-position resolves against
 * the free space after the image rather than the box.
 */
@media only screen and (min-width: 1441px) {
    .social-section__shape {
        background-size: 1126px auto;
        background-position: calc(50vw - 161px) 30px;
    }
    body.home .section {
        padding-top: 70px;
    }
}

.social-section__inner {
    position: relative;
    z-index: 2;
}

.social-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.social-section__title {
    display: flex;
    align-items: end;
    gap: 14px;
    margin: 0;
    font-size: 38px;
}

.social-section__title i {
    color: var(--coral);
    font-size: 36px;
}

.social-section__follow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 8px;
}

.social-section__follow-label {
    color: var(--navy);
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/*
 * The Instagram assets are portrait 1080 x 1350, so the tile is 4:5.
 *
 * contain, not cover: the post is shown whole. cover fills the tile but trims
 * whatever does not fit the ratio, and anything square -- which is what the
 * placeholders still are -- lost its top and bottom to it. A post that is not
 * 4:5 now sits inside the tile against the white instead of being cut.
 *
 * No zoom on hover for the same reason: scaling the image past the tile would
 * crop it against overflow: hidden. The tile lifts its opacity instead.
 */
.social-grid__item {
    display: block;
    overflow: hidden;
    background-color: var(--white);
    aspect-ratio: 1080 / 1350;
}

.social-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 300ms;
}

.social-grid__item:hover img {
    opacity: 0.88;
}


/**********
BRAND STRIP
**********/

/* Nothing from the header should ever reach the strip or the footer. */
.brand-strip,
.site-footer {
    position: relative;
    z-index: 1;
}

.brand-strip {
    background-color: var(--off-white);
    padding: 26px 0;
}
body.eat .brand-strip{
    margin-top: 50px;
}

/*
 * The strip is an endless carousel and the band runs edge to edge -- there is no
 * container on the track, so it spans the viewport rather than stopping at the
 * 1266px content width. Swiper is set to slidesPerView: auto (js/palace.js) so
 * the row is sized by the slide width below instead of by a per-view count: the
 * logos keep the design pitch at every screen size and a wider screen simply
 * fits more of them in.
 */
.brand-strip__swiper {
    width: 100%;
    /* Otherwise a drag starts selecting the logos instead of moving the band. */
    user-select: none;
    -webkit-user-select: none;
}

/*
 * The design pitch, kept from the boxed strip it replaces: seven logos and six
 * 30px gaps across the 1236px content width is (1236 - 180) / 7 = 151px a logo.
 * Fixing it here is what holds the spacing and the mark size steady as the track
 * widens -- with a per-view count the slides would stretch with the screen and
 * the gaps would open up with them.
 */
.brand-strip__slide {
    display: flex;
    align-items: center;
    width: 151px;
    height: auto;
}

/*
 * The supplied logos are all the same 366x206 canvas with the mark centred in it
 * and transparent space around, so a cap on the image box under-sizes the mark by
 * whatever padding the artwork carries. Each item is instead given the design's
 * box -- the full width of its slide, 70px tall -- and object-fit letterboxes the
 * artwork inside it, which lands the marks at the design's size without stretching
 * anything and keeps a tighter-cropped upload from towering over its neighbours.
 */
.brand-strip__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

/*
 * pointer-events off the image is what makes the band easy to drag: without it a
 * press that lands on a logo starts the browser's own image drag and the gesture
 * never reaches Swiper. Clicks still land, because they fall through to the <a>.
 */
.brand-strip__item img {
    width: 100%;
    height: 70px;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}


/**********
FOOTER
**********/

.site-footer {
    background-color: var(--navy);
    color: var(--white);
    padding: 60px 0 70px;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr 2fr 1.2fr;
    gap: 60px;
    /* Stated rather than left to the default: the columns are only centred on
       phones (see the 780px block), and this makes sure that never reaches the
       multi-column layouts. */
    text-align: left;
}

.site-footer h2,
.site-footer h3 {
    color: var(--white);
    font-size: 20px;
    margin-bottom: 12px;
}

.site-footer p {
    font-size: 14px;
    line-height: 1.5;
}

.footer-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}



.footer-menu a {
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.footer-menu a:hover {
    color: var(--teal);
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 40px;
}

.site-footer__brand img {
    width: auto;
    max-width: 210px;
    max-height: 120px;
}

.site-footer__brand .wordmark {
    color: var(--white);
    font-size: 34px;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-legal a {
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.footer-legal a:hover {
    color: var(--teal);
}


/**********
PAGE HEADER (inner pages)
**********/

/* The teal comes from the single header shape, which reaches down past the
   header and emerges beside this image. */
.page-header {
    position: relative;
    z-index: 2;
}

/* Wider than the default container so the banner lines up with the logo and
   nav, which sit in a .container--wide. */
.page-header__media {
    position: relative;
    max-width: var(--container-wide);
    aspect-ratio: 1180 / 400;
    overflow: hidden;
}

.page-header__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-intro {
    max-width: 931px;
    margin: 0 auto;
    text-align: center;
}

.page-intro .lede {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 400;
}

/* Links in the intro copy ("our store plan") read as links, and the label is
   held together so it never breaks across two lines. */
.page-intro .lede a {
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.page-intro h1 {
    margin-bottom: 0;
}

.page-intro .heading-rule {
    margin-bottom: 26px;
}

.page-intro a {
    color: var(--teal);
    font-weight: 700;
}

.page-intro a:hover {
    color: var(--navy);
}

/*
 * Printed in place of the intro when a page has "Hide the heading and intro"
 * ticked. It is the white space the design leaves between a header image and
 * the content below it — without it a coloured section would run straight into
 * the banner. Matches .section--tight's padding so it sits on the same spacing
 * scale as the block it replaces.
 */
.page-spacer {
    height: 50px;
}


/**********
DIRECTORY FILTERS
**********/

.directory-filters {
    display: flex;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.directory-filters__field {
    position: relative;
}

.directory-filters select,
.directory-filters input[type="search"],
.directory-filters input[type="text"] {
    width: 260px;
    height: 58px;
    padding: 0 46px 0 22px;
    border: 1px solid var(--navy);
    border-radius: var(--radius);
    background-color: var(--white);
    color: var(--navy);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    appearance: none;
}

.directory-filters select:focus,
.directory-filters input:focus {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
}

.directory-filters__field i,
.directory-filters__caret {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: var(--navy);
    font-size: 15px;
    pointer-events: none;
}

.directory-filters__caret {
    display: block;
    flex: none;
    width: 22px;
    height: calc(22px * 196 / 212);
}

.directory-filters input[type="search"],
.directory-filters input[type="text"] {
    border-width: 1px;
    border-color: var(--navy);
    font-weight: 400;
    padding-left: 22px;
}

.directory-filters input::placeholder {
    color: #97A6AF;
    font-weight: 400;
}


/**********
DIRECTORY GRID
**********/

.shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.shop-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    aspect-ratio: 242 / 200;
    box-sizing: border-box;
    border: 1px solid var(--navy);
    border-radius: 50px;
    background-color: var(--white);
    overflow: hidden;
    transition: border-color 200ms, box-shadow 200ms;
}

.shop-card:hover {
    border-color: var(--navy-dark);
    box-shadow: var(--shadow-card);
}

.shop-card__logo {
    position: relative;
    z-index: 2;
    max-width: 95%;
    max-height: 74%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 250ms;
}

.shop-card__name {
    position: relative;
    z-index: 2;
    color: var(--navy);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    transition: opacity 250ms;
}

/* Hover reveals the shop's own image */
.shop-card__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 250ms;
}

.shop-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-card:hover .shop-card__media {
    opacity: 1;
}

.shop-card:hover .shop-card__logo,
.shop-card:hover .shop-card__name {
    opacity: 0;
}

.shop-card__arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border: 1px solid var(--white);
    border-radius: 50%;
    background-color: var(--teal);
    color: var(--white);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 250ms, transform 250ms;
}

.shop-card:hover .shop-card__arrow {
    opacity: 1;
    transform: scale(1);
}

.shop-card__arrow .chevrons {
    --chev-w: 15px;
    --chev-nest: 0.34;
}

.shop-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    background-color: var(--red);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Hidden by the JS filter */
.shop-card-wrap.is-hidden {
    display: none;
}

.no-results {
    padding: 40px 0;
    text-align: center;
    font-size: 18px;
}


/**********
SHOP SINGLE
**********/

.shop-hero,
.article-hero {
    position: relative;
    z-index: 2;
}

/*
 * The header already leaves --header-gap (44px) under the logo, and this adds
 * the rest of the space above the header images. Together they were 79px; the
 * client asked for a quarter off, so the pair now comes to 59px and this is
 * what is left after the header's share.
 */
.shop-hero__inner,
.article-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
    padding-top: 15px;
}

.shop-hero--single .shop-hero__inner,
.article-hero--single .article-hero__inner {
    grid-template-columns: 1fr;
}

.shop-hero__media,
.article-hero__media {
    aspect-ratio: 555 / 300;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--navy-tint);
}

.shop-hero--single .shop-hero__media,
.article-hero--single .article-hero__media {
    aspect-ratio: 1140 / 420;
}

/* Shop header images are designed to spec at 1100 x 800, so the box keeps
   that exact ratio and the artwork is never cropped. A lone image stays in
   one grid column rather than spanning the row, or the 11:8 box would be
   over 800px tall. */
.shop-hero--single .shop-hero__inner {
    grid-template-columns: repeat(2, 1fr);
}

/* Article hero pairs share the shop header ratio. A lone article hero keeps
   its own full width banner shape - see .article-hero--single above, which
   outranks this on specificity. */
.shop-hero__media,
.shop-hero--single .shop-hero__media,
.article-hero__media {
    aspect-ratio: 1100 / 800;
}

.shop-hero__media img,
.article-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-body,
.article-body {
    position: relative;
    overflow: hidden;
}
.shop-body p{
    color: var(--ink);
}
/*
 * The supplied heptagon (img/get-social-bg.svg, the same artwork the social
 * section uses) rather than a traced polygon, sitting in the lower right with
 * only its top-left corner in the page -- the rest runs off the right edge and
 * under the section below.
 *
 * The box is the clip: its bottom is the section's, so the artwork is placed at
 * the box's top-left corner at natural size and whatever falls outside is simply
 * not painted. That puts the artwork's upper-left vertex 185px above the section
 * bottom, which is where the design has it:
 *   box height  247 / 1126 = 0.2194   (vertex at 62 in the artwork, plus 185)
 * Up to the design width the artwork tracks the viewport like the other shapes,
 * then holds at its own size rather than inflating on wide monitors.
 */
.shop-body__shape,
.article-body__shape,
.article-highlights__shape {
    --shape-w: min(78.194vw, 1126px);
    right: 0;
    bottom: 0;
    left: 53.6%;
    height: calc(var(--shape-w) * 0.2194);
    background-image: url('../img/get-social-bg.svg');
    background-repeat: no-repeat;
    background-size: var(--shape-w) auto;
    background-position: left top;
}

.shop-body__inner,
.article-body__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    padding-top: 70px;
    padding-bottom: 90px;
}

.shop-body__main h1 {
    font-size: 34px;
    margin-bottom: 22px;
}

.shop-body__main .heading-rule {
    margin-top: 34px;
}

.shop-meta,
.article-meta {
    padding-left: 70px;
    border-left: 1px solid #454545;
}

/* Set at the same 25px Black as the "COMMUNITY //// NEWS" label — the two
   are the same slashed-eyebrow motif and the design sizes them alike. */
.shop-meta__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--navy);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.shop-meta__title .chevrons,
.shop-meta__title .slashes {
    color: var(--navy);
    font-weight: 900;
}

.shop-meta__unit {
    margin-bottom: 22px;
    font-size: 15px;
    color: var(--text-muted);
}

.shop-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 34px;
}

/*
 * Opening hours list.
 *
 * A point up on the body copy, and the day and the time are set Bold against
 * Light rather than 800 against 500. The client's note was that the contrast
 * between the two weights did not match the artwork — at 800/500 the times sit
 * too close to the labels to read as the design's bold-and-light pairing.
 */
.hours {
    margin: 0;
    font-size: 18px;
}

.hours__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

/* The schedule reads black in the designs, not navy like the body copy. */
.hours dt {
    font-weight: 700;
    color: var(--ink);
}

.hours dd {
    margin: 0;
    color: var(--ink);
    font-weight: 400;
}

.hours__note {
    margin-top: 14px;
    font-size: 14px;
    color: var(--text-muted);
}


/**********
ARTICLE CARDS
**********/

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px var(--gap);
    align-items: start;
}

.article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.article-card:hover {
    color: inherit;
}

.article-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--navy-tint);
    border-radius: var(--radius-lg);
}

.article-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 350ms;
}

.article-card:hover .article-card__media img {
    transform: scale(1.04);
}

.article-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 20px 0 0;
}

.article-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal);
}

.article-card__meta .date {
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.article-card__title {
    margin: 0 0 10px;
    font-size: 21px;
    transition: color 200ms;
}

.article-card:hover .article-card__title {
    color: var(--teal);
}

.article-card__excerpt {
    margin: 0;
    font-size: 15px;
    color: var(--text-muted);
}

/* Single article */
.article-single__body {
    max-width: 780px;
    margin: 0 auto;
}

.article-single__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--teal);
}

.article-event-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin: 34px 0;
    padding: 26px 30px;
    border-radius: var(--radius-lg);
    background-color: var(--off-white);
}

.article-event-details h4 {
    margin: 0 0 4px;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.article-event-details p {
    margin: 0;
    font-weight: 700;
}


/**********
WHAT'S NEW LISTING

The design lists articles as wide rows rather than a card grid: events on a pale
teal panel, news on the off white one, each with the round chevron badge in the
bottom right corner.
**********/

/* The design has no intro above the groups; when one is set, close the gap. */
.section--tight + .article-listing {
    padding-top: 20px;
}

.article-listing__group + .article-listing__group {
    margin-top: 80px;
}

.article-listing__title {
    margin-bottom: 0;
    font-size: 40px;
}

.article-listing .heading-rule {
    margin-bottom: 34px;
}

.article-rows {
    display: grid;
    gap: 30px;
}

.article-row {
    position: relative;
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 40px;
    align-items: center;
    padding: 28px 130px 28px 28px;
    border-radius: var(--radius-lg);
    background-color: var(--off-white);
    color: inherit;
    text-decoration: none;
    transition: background-color 250ms;
}

.article-row--event {
    background-color: var(--teal-pale);
}

.article-row:hover {
    color: inherit;
    background-color: var(--navy-tint);
}

.article-row--event:hover {
    background-color: var(--teal-light);
}

.article-row__media {
    aspect-ratio: 400 / 282;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--navy-tint);
}

.article-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 350ms;
}

.article-row:hover .article-row__media img {
    transform: scale(1.04);
}

.article-row__body {
    padding: 6px 0;
}

.article-row__title {
    margin: 0 0 14px;
    font-size: 34px;
}

.article-row__when {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 18px;
    color: var(--text-muted);
}

.article-row__when i,
.article-row__when .icon {
    color: var(--teal);
}

.article-row__when strong {
    color: var(--navy);
}

.article-row__excerpt {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
    color: #000;
}

.article-row__link {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    transition: color 200ms;
}

.article-row:hover .article-row__link {
    color: var(--teal);
}

.article-row__arrow {
    position: absolute;
    right: 34px;
    bottom: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--teal);
    color: var(--white);
    transition: transform 250ms;
}

.article-row__arrow .chevrons {
    --chev-w: 16px;
}

.article-row:hover .article-row__arrow {
    transform: scale(1.08);
}


/**********
ARTICLE SINGLE

Events run two columns with the details panel beside the copy; news articles run
one column with the photo highlights grid underneath.
**********/

.article-body__inner--single {
    grid-template-columns: 1fr;
}

/* The design sets the copy in from the container - 85px off the left, a little
   less off the right - while the photo highlights below stay full width. */
.article-body__inner--single .article-body__main {
    padding-left: 85px;
    padding-right: 45px;
}

.article-body__main h1 {
    font-size: 34px;
    margin-bottom: 22px;
}

.article-body__main .lede,
.article-body__content {
    font-size: 18px;
    line-height: 1.3;
    color: var(--copy-black);
}

.article-body__main .lede {
    margin-bottom: 23px;
}

.article-body__content p {
    margin-bottom: 23px;
}

.article-body__main .heading-rule {
    margin-top: 34px;
}

.article-body__content p:last-child {
    margin-bottom: 0;
}

.article-body__cta,
.article-body__shop {
    margin-top: 26px;
    margin-bottom: 0;
}

.article-body__shop a {
    color: var(--teal);
    font-weight: 700;
}

.article-body__shop a:hover {
    color: var(--navy);
}

/* Details panel */
.article-meta__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--navy);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.article-meta__when {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--copy-black);
}

.article-meta__when i,
.article-meta__when .icon {
    color: var(--navy);
}

.article-meta__when strong {
    color: inherit;
}

.article-meta__location {
    margin: 0;
    font-size: 18px;
    color: var(--copy-black);
}

.article-meta__subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0 14px;
    color: var(--teal);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.article-meta__list {
    margin: 0;
    padding-left: 18px;
    font-size: 18px;
    line-height: 1.3;
    color: var(--copy-black);
}

.article-meta__list li {
    margin-bottom: 0;
}

/* Photo highlights */
.article-highlights {
    position: relative;
    overflow: hidden;
    padding-top: 0;
}

/* The gallery sits over the shape, which shows through in the gutters. */
.article-highlights > .container {
    position: relative;
    z-index: 2;
}

.article-highlights__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    color: var(--teal);
    font-size: 28px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.gallery-grid.gallery-grid--pairs {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
}

.gallery-grid.gallery-grid--pairs a {
    aspect-ratio: 555 / 380;
    border-radius: var(--radius-lg);
}


/**********
LEASING CARDS

Measured off the design: a 940px card, centred, hairline navy border, a teal
label over a row of the agent logo and one column per contact. The contact
columns sit on a shared baseline so an entry with no name lines up with the
bottom of one that has.
**********/

.leasing-card {
    max-width: 940px;
    margin: 0 auto;
    padding: 38px 40px 56px;
    border: 1px solid var(--navy);
    border-radius: var(--radius-lg);
}

.leasing-card + .leasing-card {
    margin-top: 40px;
}

.leasing-card__label {
    margin: 0 0 40px;
    color: var(--teal);
    font-size: 24px;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
}

.leasing-card__body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: center;
}

.leasing-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.leasing-card__logo img {
    width: auto;
    max-width: 100%;
    max-height: 64px;
}

.leasing-contact {
    align-self: end;
    font-size: 16px;
    line-height: 1.45;
    text-align: center;
    color: var(--copy-black);
}

.leasing-contact__name {
    margin: 0;
    font-weight: 700;
}

.leasing-contact__line {
    margin: 0;
}

.leasing-contact a {
    color: inherit;
}

.leasing-contact a:hover {
    color: var(--teal);
}

/* The website is the one link the design picks out. */
.leasing-contact__web {
    color: var(--teal) !important;
    font-weight: 700;
    text-decoration: underline;
}

.leasing-contact__web:hover {
    color: var(--navy);
}

/**********
JOB CARDS

Same 940px bordered card as the leasing contacts, with the retailer logo beside
the role. Measured off the design: 26px title with a teal stop, 16px black copy
and the apply link picked out in teal.
**********/

/* The design leaves only a short gap between the heading and the first card. */
.section--tight + .job-list {
    padding-top: 0;
}

.job-card {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 56px;
    align-items: start;
    max-width: 940px;
    margin: 0 auto;
    padding: 50px;
    border: 1px solid var(--navy);
    border-radius: var(--radius-lg);
}

.job-card + .job-card {
    margin-top: 40px;
}

/* The logo fills its column, which is the width the design draws it at. The
   height cap keeps a tall or square logo from stretching the row. */
.job-card__logo img {
    width: 100%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
}

.job-card__title {
    margin: 0 0 14px;
    font-size: 26px;
}

/* The design gives this card a teal stop rather than the usual coral. */
.job-list .dot {
    color: var(--teal);
}
.feature-band__content h2 .dot{
    color: var(--white);
}

.job-card__text {
    font-size: 16px;
    line-height: 1.5;
    color: var(--copy-black);
}

.job-card__text p {
    margin: 0 0 13px;
}

.job-card__text p:last-child {
    margin-bottom: 0;
}

.job-card__apply {
    margin: 20px 0 0;
    font-size: 16px;
}

.job-card__apply a {
    color: var(--teal);
    font-weight: 700;
    text-decoration: underline;
}

.job-card__apply a:hover {
    color: var(--navy);
}

.job-card__date {
    margin: 14px 0 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--copy-black);
}

/**********
BLOCK LABELS

The small teal (or navy) uppercase label with chevrons that opens a block:
"GETTING HERE ////", "PARKING HOURS ////", "PALACE EXCHANGE ////".
**********/

.block-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
}

.block-label--teal {
    color: var(--teal);
}

.block-label--navy {
    color: var(--navy);
}

h4.block-label {
    margin-bottom: 12px;
    font-size: 18px;
}


/**********
INFORMATION BLOCKS

Shared by Visit, Information and Parking: a navy heading with the coral stop and
a run of small body copy underneath.
**********/

/* A point up on the 16px it was built at, which lands it on the body copy size
   the rest of the site uses. Shared by Visit, Information and Parking. */
.info-block {
    margin-bottom: 34px;
    font-size: 17px;
    color: var(--copy-black);
}

.info-block:last-child {
    margin-bottom: 0;
}

.info-block h3 {
    margin: 0 0 10px;
    font-size: 26px;
}

.info-block p:last-child {
    margin-bottom: 0;
}

/* Sub-labels inside the editor content, e.g. "PALACE GARDENS CAR PARK" */
.info-block .entry-content h4 {
    margin: 22px 0 8px;
    color: var(--teal);
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.info-block .entry-content ul {
    padding-left: 18px;
}


/**********
VISIT
**********/

.visit-contact__inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: start;
}

.visit-contact__details .btn--block {
    margin-top: 14px;
}

.visit-contact__map {
    position: relative;
    min-height: 320px;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius);
    /* Sits behind the map while it loads. */
    background-color: var(--navy-tint);
}

.visit-contact__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    border-radius: var(--radius);
}

/* Until a real embed is pasted in, the pink panel from the design. */
.visit-contact__map-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 320px;
    border-radius: var(--radius);
    background-color: var(--pink);
    color: var(--navy);
    font-size: 19px;
    font-weight: 700;
}

.visit-contact__map-placeholder:hover {
    background-color: var(--pink-light);
    color: var(--navy);
}

/* "LIDL PALACE EXCHANGE CAR PARK //// SAT NAV EN2 6TS" */
.satnav-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.satnav-list li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--teal);
    font-size: 15px;
    font-weight: 900;
    /* letter-spacing: 0.04em; */
    text-transform: uppercase;
}

/* The design sets the car park navy and only the slashes and the sat nav code
   teal, so the row reads as a name followed by its code. */
.satnav-list__name {
    color: var(--navy);
}

.visit-blocks__action {
    margin-top: 26px;
    margin-bottom: 0;
}


/**********
INFORMATION PAGE
**********/

.info-top__inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
}

/* Matches .info-block h3 — "Centre opening hours." is set at the same size as
   "Toilets & baby change." and the rest of the information headings. */
.info-top__hours h3 {
    margin: 0 0 18px;
    font-size: 26px;
}

.info-hours + .info-hours {
    margin-top: 24px;
}

.info-hours .hours {
    font-size: 15px;
}

.info-top__media {
    position: relative;
}

.info-top__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}


/**********
PARKING PAGE
**********/

/* Wider than the 931px the other pages use, so "the other by Lidl." is not left
   hanging on a line of its own. Scoped to this page so the intro wrapping the
   other templates were signed off with is left alone. */
.page-template-page-parking .page-intro {
    max-width: 1040px;
}

.parking-cards__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
}

/* The divider between the two car parks in the design. */
.carpark + .carpark {
    padding-left: 60px;
    border-left: 1px solid var(--line);
}

/* Matches .info-block h3, so the car park names are set at the same size as
   "Disabled & Parent Parking." and the other information headings. */
.carpark h3 {
    margin: 0 0 12px;
    font-size: 26px;
}

/* 18px to match h4.block-label — the small teal labels above the hours lists on
   the Information page — so the two pages' small teal type is one size. */
.carpark__satnav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    color: var(--teal);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Black, not the body copy's navy — the design sets these facts in black. It
   colours the bullet markers as well as the text, since a marker takes the
   colour of its list item.

   17px to match .info-block, so these bullets are the same size as the ones in
   the Additional Info blocks further down the page. */
.carpark__facts {
    margin: 0 0 15px;
    padding-left: 18px;
    font-size: 17px;
    color: var(--copy-black);
}

.carpark__facts li {
    margin-bottom: 6px;
}

/* The height restriction is the emphasised line. It keeps the bold but no
   longer overrides the colour, so it stays black like the rest of the list --
   navy-on-bold read lighter than the plain line above it. */
.carpark__facts li:last-child {
    font-weight: 700;
}

/* The collapsible hours and tariffs panel. The top margin gives the box a clear
   gap below the height restriction line rather than sitting straight under it. */
.accordion--carpark {
    max-width: none;
    margin: 44px 0 0;
    border: 1px solid var(--navy);
    border-radius: var(--radius);
}

.accordion--carpark .accordion__item {
    border-bottom: 0;
}

.accordion--carpark .accordion__trigger {
    padding: 14px 18px;
    font-size: 15px;
}

.accordion--carpark .accordion__panel-inner {
    padding: 4px 18px 20px;
    font-size: 15px;
}

.carpark__note {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}

.carpark__tariffs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 22px;
}

.tariff-list {
    margin: 0;
}

.tariff-list__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.tariff-list dt {
    min-width: 52px;
    color: var(--text);
}

.tariff-list dd {
    margin: 0;
    font-weight: 700;
    color: var(--navy);
}

/**********
VACANCIES
**********/

.vacancy-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vacancy-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    padding: 26px 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--white);
}

.vacancy-card h2 {
    margin: 0 0 6px;
    font-size: 22px;
}

.vacancy-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: var(--text-muted);
}

.vacancy-card__meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}


/**********
FLEXIBLE SECTIONS
**********/

.section-embed__frame iframe,
.section-embed__frame > * {
    width: 100%;
    min-height: 420px;
    border: 0;
    display: block;
}

.image-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}

.image-text--left .image-text__media {
    order: -1;
}

.image-text__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.section--teal .image-text__content h2,
.section--teal .image-text__content p,
.section--navy .image-text__content h2,
.section--navy .image-text__content p {
    color: var(--white);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.gallery-grid a {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 1;
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms;
}

.gallery-grid a:hover img {
    transform: scale(1.05);
}

/* Accordion */
.accordion {
    max-width: 860px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
}

.accordion__item {
    border-bottom: 1px solid var(--line);
}

.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 20px 0;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--navy);
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.accordion__trigger .chevrons {
    --chev-w: 16px;
    flex: none;
    transition: transform 250ms;
}

.accordion__item.is-open .accordion__trigger .chevrons {
    transform: rotate(90deg);
}

.accordion__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms ease;
}

.accordion__panel-inner {
    padding: 0 0 22px;
}


/**********
CONTENT + SMALL PIECES
**********/

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 1.4em;
}

.entry-content h2:first-child,
.entry-content h3:first-child {
    margin-top: 0;
}

.entry-content ul,
.entry-content ol {
    margin: 0 0 1em;
}

.entry-content li {
    margin-bottom: 6px;
}

.entry-content a {
    color: var(--teal);
    font-weight: 700;
}

.entry-content a:hover {
    color: var(--navy);
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.entry-content table,
table.tariff {
    width: 100%;
    max-width: 560px;
    margin: 0 0 1.4em;
    border-collapse: collapse;
    font-size: 16px;
}

.entry-content th,
.entry-content td,
table.tariff th,
table.tariff td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.entry-content thead th,
table.tariff thead th {
    border-bottom-width: 2px;
    border-bottom-color: var(--navy);
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

table.tariff td + td,
table.tariff th + th {
    text-align: right;
    white-space: nowrap;
}

table.tariff tbody tr:last-child td {
    border-bottom: 0;
}

/* Tables scroll rather than push the page wide on small screens */
.entry-content {
    overflow-x: auto;
}

.entry-content blockquote {
    margin: 1.5em 0;
    padding: 4px 0 4px 26px;
    border-left: 3px solid var(--teal);
    font-size: 20px;
}

/*
 * The About us column is set a size up on the rest of the footer and a weight
 * heavier, per the client's note — the quick links and legal row are unchanged.
 */
.site-footer__about,
.site-footer__about p {
    font-size: 16px;
    font-weight: 500;
}

.site-footer__about p {
    margin-bottom: 0.6em;
}

.shop-body__terms {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.shop-body__terms a {
    color: var(--teal);
    font-weight: 700;
}

.store-plan {
    text-align: center;
}

.store-plan__image {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--white);
}

.store-plan__image img {
    width: 100%;
    height: auto;
    max-height: 788px;
    object-fit: contain;
}

.store-plan__download {
    margin-top: 30px;
}

.notice {
    display: inline-block;
    padding: 12px 18px;
    border-radius: var(--radius);
    background-color: var(--off-white);
    font-weight: 700;
}

.notice--closed {
    background-color: var(--pink-light);
}

.article-single__cta,
.article-single__shop,
.article-single__back {
    margin-top: 26px;
}

.article-single__back a,
.article-single__shop a {
    color: var(--teal);
    font-weight: 700;
}

.article-single__content + .gallery-grid {
    margin-top: 34px;
}

.feature-band--navy {
    background-color: var(--navy);
}

/* The fill sits on the pseudo-elements now, so the variants recolour those. */
.feature-band--navy .feature-band__shape::before,
.feature-band--navy .feature-band__shape::after {
    background-color: var(--navy-dark);
}

.feature-band--pink {
    background-color: var(--pink-light);
}

.feature-band--pink .feature-band__shape::before,
.feature-band--pink .feature-band__shape::after {
    background-color: var(--pink);
}

.feature-band--pink .feature-band__content h2,
.feature-band--pink .feature-band__content p {
    color: var(--navy);
}

.feature-band--pink .btn--light {
    background-color: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.feature-band--pink .chevrons--light {
    color: var(--white);
}

.skip-link:focus {
    position: fixed !important;
    top: 10px;
    left: 10px;
    z-index: 100;
    width: auto;
    height: auto;
    clip: auto;
    padding: 12px 20px;
    background-color: var(--navy);
    color: var(--white);
    font-weight: 700;
}

#editLink {
    padding: 20px 0 40px;
    font-size: 14px;
}


/**********
COOKIE NOTICE
**********/

#siteCookie {
    background-color: var(--navy);
}

#siteCookie p,
#siteCookie a {
    font-size: 14px;
}

#siteCookie a {
    color: var(--teal);
    text-decoration: underline;
}


/**********
PAGINATION
**********/

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 50px;
}

.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--navy);
    font-weight: 700;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background-color: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}


/**********
MOTION
**********/

/*
 * Small movement, after the details on the Gallions site. Everything here hangs
 * off .motion on <html>, which functions.php adds in the head unless the visitor
 * has asked their system for reduced motion -- without it the site is exactly as
 * built, and static.
 */

.motion {
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * Reveals. js/palace.js watches these as the page scrolls and adds .is-revealed
 * to each one as it comes into view, staggering the ones that arrive together
 * through --reveal-delay. Keep this list in step with REVEAL in js/palace.js
 * (the brand strip slides are revealed as one group there, not one by one).
 *
 * Until it is revealed an element is held back by opacity alone, so nothing in
 * the layout moves. The rise is an animation rather than a transition so it
 * cannot override the cards' own hover transitions, and fill-mode backwards
 * hands the element straight back to its normal styles once it has played.
 * Screen only, so a page printed half-scrolled does not come out blank.
 */
@media screen {
    .motion :is(
        .promo-card,
        .shop-card-wrap,
        .article-card,
        .article-row,
        .social-grid__item,
        .feature-band__content,
        .feature-band__media,
        .image-text__media,
        .gallery-grid a,
        .brand-strip__slide,
        .heading-rule,
        .page-intro h1,
        .page-intro .lede,
        .image-text__content,
        .social-section__head,
        .info-top__media,
        .info-block,
        .job-card,
        .leasing-card,
        .vacancy-card,
        .carpark,
        .accordion:not(.accordion--carpark) .accordion__item,
        .satnav-list li,
        .visit-contact__details,
        .visit-contact__map,
        .store-plan__image,
        .shop-meta,
        .shop-actions,
        .article-meta,
        .section-embed__frame,
        .site-footer__col,
        .social-section__shape,
        .shop-body__shape,
        .article-body__shape,
        .article-highlights__shape
    ):not(.is-revealed) {
        opacity: 0;
    }
}

.motion .is-revealed {
    animation: reveal-rise 550ms var(--ease-out) var(--reveal-delay, 0ms) backwards;
}

/* The Store Directory / What's New boxes grow into place as well as rise. */
.motion .promo-card.is-revealed {
    animation-name: reveal-grow;
    animation-duration: 650ms;
}

/* The strip is only 70px of logo, so they lift a short way. */
.motion .brand-strip__slide.is-revealed {
    --reveal-rise: 18px;
}

/* The teal rule under a heading draws out from its start. */
.motion .heading-rule {
    transform-origin: left center;
}

.motion :is(.text-center, .page-intro, .intro) .heading-rule,
.motion .heading-rule--center {
    transform-origin: center;
}

.motion .heading-rule.is-revealed {
    animation-name: reveal-draw;
    animation-duration: 450ms;
}

@keyframes reveal-rise {
    from {
        opacity: 0;
        transform: translateY(var(--reveal-rise, 40px));
    }
}

@keyframes reveal-grow {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.94);
    }
}

/* The pink shapes drift in from the right edge they run off, slowly. */
.motion :is(.social-section__shape, .shop-body__shape, .article-body__shape, .article-highlights__shape).is-revealed {
    animation-name: reveal-slide;
    animation-duration: 900ms;
}

@keyframes reveal-draw {
    from {
        transform: scaleX(0);
    }
}

@keyframes reveal-slide {
    from {
        opacity: 0;
        transform: translateX(80px);
    }
}

/*
 * Page, shop and article header images settle into place as the page opens --
 * they start a touch enlarged and ease back to their own size. The boxes all
 * clip already, so only the image moves. The second of a pair follows on.
 */
.motion :is(.hero__media, .page-header__media, .shop-hero__media, .article-hero__media) img {
    animation: banner-settle 1000ms var(--ease-out) backwards;
}

/* The homepage banner box does not clip on its own, so it does here. */
.motion .hero__media {
    overflow: hidden;
}

/*
 * On the homepage banner a typed caption then rises in over the image and the
 * badge pops. Both are positioned with transform, so these move them with the
 * separate translate and scale properties, which stack on top of it.
 */
.motion .hero__caption {
    animation: hero-caption-in 700ms var(--ease-out) 250ms backwards;
}

.motion .hero__badge {
    animation: hero-badge-in 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 550ms backwards;
}

@keyframes hero-caption-in {
    from {
        opacity: 0;
        translate: 0 30px;
    }
}

@keyframes hero-badge-in {
    from {
        opacity: 0;
        scale: 0;
    }
}

.motion :is(.shop-hero__media, .article-hero__media) + :is(.shop-hero__media, .article-hero__media) img {
    animation-delay: 100ms;
}

@keyframes banner-settle {
    from {
        opacity: 0.6;
        transform: scale(1.08);
    }
}

/* Social icons in the header and footer lift a little under the pointer. */
.motion .social-links a {
    transition: color 200ms, transform 200ms var(--ease-out);
}

.motion .social-links a:hover {
    transform: translateY(-3px);
}

/*
 * The full stop. On the homepage's "Shopping in the heart..." it bounces twice
 * and rests, over and over; a page heading's stop does the same three times as
 * the page opens and then settles. Hovering an article lifts its title's stop,
 * as Gallions does on its What's On.
 *
 * It moves on top rather than transform: transform needs the span made an
 * inline-block, and an inline-block is a place the line can wrap -- the stop
 * could drop onto a line of its own. A relative offset leaves it inline.
 */
.motion .dot {
    position: relative;
    top: 0;
}

.motion .intro h2 .dot {
    animation: dot-bounce 2.4s ease-in-out 600ms infinite;
}

.motion .page-intro h1 .dot {
    animation: dot-bounce 2.4s ease-in-out 600ms 3;
}

.motion :is(.article-row, .article-card):hover .dot {
    animation: dot-hop 600ms ease-in-out infinite;
}

@keyframes dot-bounce {
    0%, 40%, 100% { top: 0; }
    12%           { top: -0.3em; }
    24%           { top: 0; }
    32%           { top: -0.12em; }
}

@keyframes dot-hop {
    0%, 100% { top: 0; }
    50%      { top: -0.25em; }
}

/* Promo boxes zoom on hover, the same as the event rows on What's New. */
.motion .promo-card__media {
    overflow: hidden;
}

.motion .promo-card__media img {
    transition: transform 700ms var(--ease-out);
}

.motion .promo-card:hover .promo-card__media img {
    transform: scale(1.05);
}

/* A button's own chevron edges forward on hover. */
.motion .btn .chevrons {
    transition: transform 250ms var(--ease-out);
}

.motion .btn:hover .chevrons {
    transform: translateX(4px);
}

/*
 * The community band. While it is on screen (.is-inview, from js/palace.js) the
 * big white arrows nudge forward one after the other, and the photo enlarges as
 * the band scrolls up the page -- --band-progress runs 0 to 1 from the band
 * entering at the bottom of the screen to leaving at the top. The same band is
 * used by the CTA section on other pages, so it picks this up there too.
 */
.motion .feature-band.is-inview .feature-band__actions > .chevrons .chevrons__item {
    animation: chev-nudge 2.2s ease-in-out infinite;
}

.motion .feature-band.is-inview .feature-band__actions > .chevrons .chevrons__item + .chevrons__item {
    animation-delay: 120ms;
}

@keyframes chev-nudge {
    0%, 45%, 100% { transform: translateX(0); }
    18%           { transform: translateX(14px); }
    30%           { transform: translateX(-2px); }
}

.motion .feature-band__media {
    overflow: hidden;
    border-radius: var(--radius-lg);
    transition: transform 500ms var(--ease-out);
}

/* The whole photo grows on hover, over the scroll zoom going on inside it. */
.motion .feature-band__media:hover {
    transform: scale(1.06);
}

.motion .feature-band__media img {
    display: block;
    transform: scale(calc(1 + var(--band-progress, 0) * 0.12));
    will-change: transform;
}

/*
 * The brand strip. Besides the band moving and the logos rising in, the logo
 * under the pointer grows while the rest fade back -- the strip's own way of
 * showing what is about to be clicked.
 */
.motion .brand-strip__item img {
    transition: opacity 250ms, transform 250ms var(--ease-out);
}

.motion .brand-strip__swiper:hover .brand-strip__item img {
    opacity: 0.5;
}

.motion .brand-strip__swiper:hover .brand-strip__item:hover img {
    opacity: 1;
    transform: scale(1.08);
}


/**********
RESPONSIVE — 1140px and below
**********/

@media only screen and (max-width: 1140px) {
    :root {
        --section-space: 60px;
        --gap: 20px;
    }
    .site-header__inner {
        min-height: 0;
        padding-top: 18px;
        padding-bottom: 18px;
        align-items: flex-start;
    }
    /* Below the design width the header goes to a flat teal block. */
    .site-header__shape {
        height: 100%;
        padding-top: 0;
        background-color: var(--teal);
        background-image: none;
    }
    .site-header__logo {
        position: relative;
        z-index: 20;
    }
    /* The header is a solid teal block at this width, so the page banner needs
       a gap under it rather than butting straight up against the bar. */
    .page-header {
        padding-top: 22px;
    }
    .site-header__logo img {
        max-height: 58px;
        max-width: 140px;
    }
    .wordmark {
        font-size: 24px;
    }
    .site-header__right {
        gap: 0;
        /* The desktop baseline pull does not apply here — the mobile header is
           top-aligned and has no visible nav to line up. */
        margin-bottom: 0;
    }
    /* The 52px of padding here used to clear the absolutely-positioned burger.
       The burger is a flex item in the row now, so the gap does that instead. */
    .site-header__utility {
        padding-right: 0;
    }
    
    .utility-items {
        gap: 14px;
    }
    .utility-items li span {
        display: none;
    }
    /* Mobile menu panel */
    .burgerNavContainer {
        display: flex;
        align-items: center;
        /* Stretches to the height of the header row, so the button centres on
           the logo whatever depth it happens to be. */
        align-self: stretch;
        position: relative;
        z-index: 40;
        /* The bars are hard-edged, so sitting on the container's 15px gutter
           they read tighter to the screen edge than the logo does at the same
           inset. This holds the button clear of it across the whole burger
           range; the phone size is trimmed back in the 780px block. */
        margin-right: 20px;
    }
    /* In the row now, not pinned to the top of the page. */
    #burgerNav {
        position: relative;
        top: auto;
        right: auto;
        height: 36px;
    }
    #burgerNav .innerBurger span {
        background-color: var(--white);
    }
    /* Translated rather than positioned off-screen, so it cannot create a
       horizontal scrollbar while closed. */
    .site-nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 30;
        width: 100%;
        height: 100vh;
        padding: 110px 24px 40px;
        overflow-y: auto;
        background-color: var(--navy);
        transform: translateX(100%);
        transition: transform 300ms;
    }
    .site-nav.navActive {
        transform: translateX(0);
    }
    .site-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .site-nav a {
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        font-size: 19px;
    }
    .site-nav a:hover {
        border-bottom-color: rgba(255, 255, 255, 0.18);
    }
    .site-nav > ul > li > a::after {
        display: none;
    }
    .site-nav .current-menu-item > a {
        color: var(--teal);
        border-bottom-color: rgba(255, 255, 255, 0.18);
    }
    .site-nav .sub-menu {
        position: static;
        min-width: 0;
        box-shadow: none;
        background: none;
    }
    .site-nav .sub-menu a {
        padding-left: 18px;
        border-bottom-color: rgba(255, 255, 255, 0.18);
        color: var(--white);
        font-size: 16px;
    }
    .site-nav .sub-menu a:hover {
        background: none;
    }
    .site-nav .menu-item-has-children::after {
        top: 20px;
        right: 4px;
    }
    body.fix {
        overflow: hidden;
    }
    /* Layout */
    .shop-body__shape,
    .article-body__shape,
    .article-highlights__shape,
    .social-section__shape,
    .feature-band__shape {
        display: none;
    }
    .feature-band {
        background-color: var(--teal);
    }
    .feature-band__inner,
    .shop-body__inner,
    .article-body__inner,
    .image-text {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .image-text--left .image-text__media {
        order: 0;
    }
    .shop-meta,
    .article-meta {
        padding-left: 0;
        padding-top: 34px;
        border-left: 0;
        border-top: 1px solid var(--text-muted);
    }
    .shop-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Visit, Information and Parking stack below the design width. */
    .visit-contact__inner,
    .info-top__inner,
    .parking-cards__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .carpark + .carpark {
        padding-left: 0;
        padding-top: 40px;
        border-left: 0;
        border-top: 1px solid var(--line);
    }
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .site-footer__brand {
        grid-column: 1 / -1;
        align-items: flex-start;
        text-align: left;
    }
    .footer-legal {
        justify-content: flex-start;
    }
    .hero__caption p {
        font-size: 40px;
    }
    .hero__caption h2 {
        font-size: 24px;
    }
    h1,
    .intro h2 {
        font-size: 34px;
    }
    h2 {
        font-size: 28px;
    }
    .article-listing__group + .article-listing__group {
        margin-top: 60px;
    }
    .article-row {
        grid-template-columns: 300px 1fr;
        gap: 30px;
        padding: 22px 100px 22px 22px;
    }
    .article-row__title {
        font-size: 27px;
    }
    .article-row__when,
    .article-row__excerpt {
        font-size: 16px;
    }
    .article-row__arrow {
        right: 26px;
        bottom: 26px;
        width: 50px;
        height: 50px;
    }
    .article-listing__title {
        font-size: 32px;
    }
    .article-body__inner--single .article-body__main {
        padding-left: 0;
        padding-right: 0;
    }
    .article-body__main h1 {
        font-size: 30px;
    }
    .gallery-grid.gallery-grid--pairs {
        grid-template-columns: repeat(2, 1fr);
    }
}


/**********
RESPONSIVE — 780px and below
**********/

@media only screen and (max-width: 780px) {

    #post-278 .section--tight:not(:last-child) {
        padding-bottom:0;
    }
    :root {
        --section-space: 46px;
    }
    body {
        font-size: 16px;
    }
    /* The social and utility icons lose their labels at this width, so the
       phone header is just the mark and the menu button. */
    .site-header__utility {
        display: none;
    }
    /* Less of an inset than the tablet range: the bar is narrow here and the
       burger is the only thing on the right of it. */
    .burgerNavContainer {
        margin-right: 10px;
    }
    /* Teal bar down here, so the mark goes white. */
    .site-header__logo .wordmark {
        color: var(--white);
    }
    /* Same mark as the desktop header, knocked out to white rather than
       swapped for a second file. brightness(0) flattens the navy to black and
       invert(1) takes it to white; transparency is untouched, so the shape is
       identical to the desktop mark. */
    .site-header__logo .logo-img--responsive {
        filter: brightness(0) invert(1);
    }
    /* Intro copy is pulled in from the gutter so the last word of the heading
       and of the paragraph below it fall to the next line. */
    .intro {
        padding-left: 28px;
        padding-right: 28px;
    }
    h1,
    .intro h2 {
        font-size: 28px;
    }
    h2 {
        font-size: 24px;
    }
    .promo-cards,
    .shop-grid,
    .card-grid,
    .social-grid,
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .promo-cards,
    .promo-cards:has(> .promo-card:only-child) {
        grid-template-columns: 1fr;
        margin-top: 34px;
    }
    /* "Hide on mobile" on a promo card. */
    .promo-card--hide-mobile {
        display: none;
    }
    .shop-hero__inner,
    .article-hero__inner {
        grid-template-columns: 1fr;
        padding-top: 20px;
    }
    .article-hero__media,
    .article-hero--single .article-hero__media {
        aspect-ratio: 16 / 10;
    }
    /* Shop header images keep their 1100 x 800 spec ratio at every width. */
    .shop-hero--single .shop-hero__inner {
        grid-template-columns: 1fr;
    }
    /* Stacked, a second header image pushes the page's title most of a screen
       down, so shops and articles show only their first one on a phone. Hidden
       rather than dropped from the markup, which also stops it downloading. */
    .shop-hero__media:not(:first-child),
    .article-hero__media:not(:first-child) {
        display: none;
    }
    .shop-hero__media,
    .shop-hero--single .shop-hero__media {
        aspect-ratio: 1100 / 800;
    }
    .directory-filters {
        gap: 14px;
    }
    .directory-filters select,
    .directory-filters input[type="search"],
    .directory-filters input[type="text"] {
        width: 100%;
        height: 52px;
    }
    .directory-filters__field {
        width: 100%;
    }
    /* The banner runs edge to edge on phones, so the slider drops the
       container gutters. */
    .hero__inner {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    /* Square, to match the 800 x 800 mobile banner asset, so none of its
       artwork or lettering is cropped off the sides. */
    .hero__media {
        aspect-ratio: 1 / 1;
    }
    .hero__media .hero__img--mobile {
        display: block;
    }
    .hero__media .hero__img--desktop.has-mobile {
        display: none;
    }
    .hero__caption p {
        font-size: 32px;
    }
    .hero__badge {
        width: 60px;
        height: 60px;
        font-size: 14px;
    }
    .social-section__head {
        margin-bottom: 22px;
    }
    .social-section__title {
        font-size: 28px;
    }
    /* Two logos to a view on a phone, so the marks come up in size rather than
       three small ones sharing the width. 26px is the track's spaceBetween. */
    .brand-strip__slide {
        width: calc(50% - 13px);
    }
    .brand-strip__item img {
        height: 76px;
    }
    /* One column, so the three blocks centre on it. */
    .site-footer__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .site-footer__brand {
        align-items: center;
        text-align: center;
    }
    .footer-legal {
        justify-content: center;
    }
    /* Green band: copy in from the edge, with the eyebrow and body copy a step
       down from their desktop sizes. */
    .feature-band__inner {
        padding-left: 30px;
        padding-right: 30px;
    }
    .feature-band__content .eyebrow {
        font-size: 22px;
    }
    .feature-band__text {
        font-size: 20px;
    }
    .feature-band__actions {
        flex-wrap: wrap;
        gap: 16px;
    }
    .vacancy-card {
        padding: 20px;
    }
    .carpark__tariffs {
        grid-template-columns: 1fr;
    }
    .block-label {
        font-size: 21px;
    }
    /* Parking on the Visit page: the car park names and their sat nav codes go
       up a couple of points, which reads better against the copy above them. */
    .satnav-list li {
        font-size: 17px;
    }
    /* The Parking page's own sat nav lines need no bump here — they are set at
       18px throughout to match the Information page's small teal labels. */
    .page-intro .lede,
    .intro .lede {
        font-size: 21px;
    }
    .info-block h3 {
        font-size: 22px;
    }
    .leasing-card {
        padding: 28px 22px 36px;
    }
    .job-card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 22px 32px;
    }
    .job-card__title {
        font-size: 22px;
    }
    .leasing-card__body {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .leasing-contact {
        align-self: auto;
    }
    /* Rows stack, so the badge moves up beside the copy. */
    .article-row {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 20px 24px;
    }
    .article-row__media {
        aspect-ratio: 16 / 10;
    }
    .article-row__title {
        font-size: 24px;
    }
    .article-row__when,
    .article-row__excerpt {
        font-size: 16px;
    }
    .article-row__arrow {
        position: static;
        margin-top: 16px;
        width: 44px;
        height: 44px;
    }
    .article-highlights__title {
        font-size: 19px;
    }
}


/**********
RESPONSIVE — 480px and below
**********/

@media only screen and (max-width: 480px) {
    .card-grid,
    .gallery-grid,
    .gallery-grid.gallery-grid--pairs {
        grid-template-columns: 1fr;
    }
    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* The directory stays two across on a phone rather than dropping to one:
       a tighter gap and a smaller box are what make the pair fit, so the whole
       list can be scanned in half the scrolling. */
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .shop-card {
        padding: 14px;
        border-radius: 32px;
    }
    .shop-card__name {
        font-size: 16px;
    }
}