/* custom-cakes.css
   Reconciled onto the site's design system on 2 September 2026, when 29 pages
   designed outside were merged in. Three kinds of rule were removed; the full
   list is in the commit, not here.

     1. Rules that re-styled SHARED shell components. This stylesheet loads
        AFTER the site stylesheet, so each one silently overrode the site-wide header,
        footer or nav ON THIS PAGE ONLY, while shell.mjs check called the page
        clean because the MARKUP was identical. A markup checker cannot see a
        stylesheet. That went for CLASS selectors and, in a second pass, for
        bare ELEMENT selectors too: one page stylesheet said nav{display:none}
        below 700px and was hiding the site's primary navigation.
     2. Rules for markup that no longer exists: the chrome this page arrived
        with, and its own hero.
     3. Document-level rules that fought palesas.css, which owns them.

   Colours are tokens now.

   THE SHARED STYLESHEET IS `style.css`, NOT `assets/css/palesas.css`. Two
   sentences of this banner said palesas.css, which inc/enqueue.php has not
   loaded for a long time: it enqueues get_stylesheet_uri(), which is style.css.
   `palesas.css` is a ~2000-line near-duplicate carrying its own full :root
   token block, enqueued by nothing. Following the old wording meant editing a
   dead file and watching the change do nothing, which is l-263 exactly, and it
   is how l-260 deleted the cart, wishlist and search CSS off the live site.
   Corrected 10 September 2026 after the review gate caught it.

   Two things have already broken this banner, both worth knowing. It once
   PASTED THE REMOVED SELECTOR LIST INTO ITSELF, and that list held a star next
   to a slash, which closed the comment early and swallowed the next real rule.
   Then a sweep that counted braces without skipping comments read this prose
   as a selector and deleted words out of it. A tool that parses CSS must strip
   comments FIRST, and no generated text belongs inside one.

   ---------------------------------------------------------------------------
   VISUAL PASS, Tony, 10 September 2026.

   His brief: the layout and structure are good, but the page still looks
   amateur, important information is not visible enough, the hierarchy is poor,
   and "the form must stand out, it looks buried and doesn't scream I am here
   come fill me up". Tony's call this session: change the LOOK, keep every
   section exactly where it is.

   The four causes, all measured on the live page rather than guessed at:

     1. EVERYTHING WAS THE SAME SIZE. Body copy ran 12 to 15px across the whole
        page (notes 12, occasions 13, journey 14, ledes 15, form labels 12,
        form controls 13). At 1440px that reads as a phone layout stretched
        wide. Nothing was loud, so nothing was important. The type scale below
        is the single biggest change in this pass.
     2. EVERYTHING SAT ON WHITE, ON WHITE. Section, card and input backgrounds
        were all #ffffff, separated only by a 1px #ebe8e2 hairline, and neither
        --pk-shadow nor --pk-shadow-sm was used anywhere on the page. Cards had
        no surface of their own to sit on.
     3. THE RHYTHM WAS FLAT. Every section got the same 64px. The page had no
        cadence, so the enquiry form got no more room than a decorative band.
     4. THE FORM WAS AN AFTERTHOUGHT. Unframed, on white, 12px labels, raw
        native controls, and control heights of 42 / 44 / 44 / 46px that did
        not line up. Its required asterisks each sat alone on their own
        396px-wide line, because .cakes-form label was display:grid and every
        child of it became a row.

   THE ONE IDEA. The page is cream and white from top to bottom. So the form
   does not have to shout to be seen: it only has to be the one thing on the
   page built differently. The CTA band and the enquiry section are now a
   single continuous deep-berry finale, and the form is the one raised white
   card floating in it. That makes it simultaneously the darkest ground, the
   highest contrast and the only elevated surface on the page.

   Three things in here are deliberate and must not be "tidied":
     - The journey step numbers stay BERRY on gold, not white. The reason is
       measured and recorded further down.
     - The 639px occasion-card row layout is Tony's decision of 8 September
       and is carried through untouched.
     - The gallery caption gradient is pixel-sampled, not eyeballed. Left alone.
   --------------------------------------------------------------------------- */

*{box-sizing:border-box}


/* ===========================================================================
   1. SECTION RHYTHM AND HEADS
   =========================================================================== */

.cakes-section{padding:var(--pk-band) 0}

.cakes-section-head{text-align:center;max-width:680px;margin:0 auto 56px}

/* The eyebrow was falling through to the plain .pk-eyebrow base: 14px, grey,
   no star. The hero at the top of this same page uses the good one (12px,
   uppercase, tracked, berry, gold star). Two different eyebrow treatments on
   one page is exactly the kind of small inconsistency that reads as amateur
   without the visitor being able to say why. These now match the hero.
   Scoped to .cakes-section-head, never to the shared .pk-eyebrow, for the
   reason recorded against .pk-shero in style.css. */
.cakes-section-head .pk-eyebrow{
  color:var(--pk-primary);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.cakes-section-head .pk-eyebrow:before{
  content:"\2726";color:var(--pk-gold);font-size:17px;margin-right:10px;vertical-align:-1px;
}

.cakes-section-head h2{
  margin:14px 0 0;color:var(--pk-primary);
  font:700 clamp(28px,3.6vw,36px)/1.14 var(--pk-display);letter-spacing:-.02em;
}
.cakes-section-head h2 em{color:var(--pk-gold);font:400 1.15em/1 var(--pk-script);letter-spacing:0}
.cakes-section-head>p:last-child{
  margin:18px auto 0;max-width:600px;color:var(--pk-muted);
  font:400 17px/1.65 var(--pk-sans);
}


/* ===========================================================================
   2. INSPIRATION GALLERY
   =========================================================================== */

.cakes-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.cakes-gallery figure{
  position:relative;overflow:hidden;margin:0;
  border-radius:var(--pk-r);background:var(--pk-cream);
}
.cakes-gallery img{
  width:100%;aspect-ratio:4/5;display:block;object-fit:cover;
  transition:transform .5s var(--pk-ease);
}
@media (hover:hover) and (pointer:fine){
  .cakes-gallery figure:hover img{transform:scale(1.05)}
}

/* Was linear-gradient(transparent,rgba(55,22,32,.72)): too weak and too
   short. Sampling the PIXELS behind these six captions gave 1.55 to 2.11
   against a need of 4.5. A DOM contrast walk passes every one of them,
   because it finds the section colour behind the photograph rather than
   the photograph itself. Do not lighten this to "let the photo through". */
.cakes-gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 10px 12px;
  color:var(--pk-primary-fg);text-align:center;
  font:600 13px/1.3 var(--pk-display);letter-spacing:.01em;
  background:linear-gradient(rgba(31,10,20,0) 0%,rgba(31,10,20,.55) 34%,rgba(31,10,20,.96) 100%);
}

.cakes-centre{text-align:center;margin:36px 0 0}


/* ===========================================================================
   3. OCCASIONS
   =========================================================================== */

/* Cream ground, white cards. Two problems solved by one swap. The cards used
   to be #ffffff on a #ffffff section with a 1px #ebe8e2 hairline doing all the
   work, so at a glance there were no cards at all, just four columns of text.
   And the page ran white / white / white for three sections in a row, against
   DESIGN-SYSTEM A7's "alternating for rhythm" - so fixing the card in
   isolation left the band problem untouched. Inverting both at once gives the
   cards a real surface AND breaks the white run. */
.cakes-occasions{background:var(--pk-cream)}

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

.occasion-grid article{
  padding:32px 26px 30px;
  background:var(--pk-surface);
  border:1px solid transparent;
  border-radius:var(--pk-r-lg);
  text-align:center;
  box-shadow:var(--pk-shadow-sm);
}

/* (0,4,1), to outrank `.js .reveal[data-stagger][data-settled] > *` at (0,4,0).
   This was written as a plain `.occasion-grid article{transition:...}`, which
   is (0,1,1) and therefore NEVER applied at any point in the element's life:
   the stagger rule governs until palesas.js sets data-settled at ~980ms, and
   the settled rule governs for ever after. style.css documents this exact
   escalation and names the five components whose press feedback was inert for
   want of it; this would have been the sixth.
   box-shadow is restated here with transform and opacity because a transition
   SHORTHAND replaces the inherited list rather than adding to it - dropping
   them would have cost the house press feedback to buy a hover shadow. All
   three share the 140ms press timing so the lift and the shadow stay in sync. */
.js .occasion-grid[data-stagger][data-settled] > article{
  transition:transform 140ms var(--pk-ease),opacity 140ms var(--pk-ease),box-shadow 140ms var(--pk-ease);
}
@media (hover:hover) and (pointer:fine){
  .occasion-grid article:hover{transform:translateY(-3px);box-shadow:var(--pk-shadow)}
}

.occasion-grid i{
  display:grid;place-items:center;
  width:60px;height:60px;margin:0 auto 18px;
  border-radius:50%;
  background:var(--pk-cream);
  color:var(--pk-gold);
}
/* 30 in 60, not 26 in 60. At 43% of the medallion the icons read as marks
   sitting in a circle; at 50% they read as the subject of it. */
.occasion-grid i svg{width:30px;height:30px}

/* min-height reserves the second line so all four paragraphs start on the same
   baseline. Two of the four headings wrap at every desktop width ("Christenings
   & baby showers" and "Corporate & special events") and two do not, so without
   it the row reads ragged: the cards are equal HEIGHT because the grid
   stretches them, which is why "they all line up" could never have failed as a
   check, while the content inside them did not line up at all. 2.5em is exactly
   two lines at the 1.25 line-height below. Reset in the 639px row layout,
   where the heading is beside the icon and never needs the reservation. */
.occasion-grid h3{
  margin:0;min-height:2.5em;
  color:var(--pk-primary);font:600 19px/1.25 var(--pk-display);letter-spacing:-.01em;
}
.occasion-grid p{margin:12px 0 0;color:var(--pk-muted);font:400 15px/1.6 var(--pk-sans)}


/* ===========================================================================
   4. JOURNEY
   =========================================================================== */

.cakes-journey{background:var(--pk-surface)}
.journey-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.journey-image{overflow:hidden;border-radius:var(--pk-r-lg)}
.journey-image img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}

.journey-steps{margin:0;padding:0;list-style:none}

/* Step spacing was 25px, which left the four steps notably shorter than the
   square image beside them and opened a dead gap under the list. Both columns
   are centred on each other, so the fix is to let the steps breathe until the
   two columns carry the same optical weight, not to shrink the image. */
.journey-steps li{
  position:relative;display:grid;grid-template-columns:52px 1fr;gap:20px;
  padding:0 0 34px;
}
.journey-steps li:last-child{padding-bottom:0}
.journey-steps li:not(:last-child):before{
  content:"";position:absolute;top:44px;left:25px;
  width:2px;height:calc(100% - 34px);
  background:var(--pk-gold-soft);opacity:.55;
}
.journey-steps span{
  display:grid;place-items:center;
  width:50px;height:50px;border-radius:50%;
  background:var(--pk-gold-soft);color:var(--pk-primary);
  font:700 16px var(--pk-display);
}

/* Berry on the gold, not white: white on --pk-gold-soft measures 2.31 and
   these are the step numbers of the whole journey section. Berry on the same
   fill is 4.89, the exact pair the token comment in palesas.css already
   names, so the gold circle is kept and only the ink changes. This survived
   the 10 September visual pass unchanged, on purpose. */

.journey-steps h3{margin:5px 0 6px;color:var(--pk-primary);font:600 19px/1.25 var(--pk-display);letter-spacing:-.01em}
.journey-steps p{margin:0;color:var(--pk-muted);font:400 15px/1.65 var(--pk-sans)}


/* ===========================================================================
   5. NOTES: lead-time and delivery
   ===========================================================================
   This strip carries the single most decisive fact on the page. A visitor who
   needs a cake on Saturday cannot order one, and the sentence that tells them
   so was set at 12px grey inside a thin tinted band, quieter than the
   decorative gallery captions above it. It is promoted here.

   The big line is a .note-figure and it repeats words the paragraph beside it
   already says, so the markup marks it aria-hidden: it exists to make the
   number VISIBLE, not to add content. Nothing here invents a fact; this is the
   same copy, set properly. */

.cakes-notes{padding:var(--pk-band) 0;background:var(--pk-surface)}

/* The gold rule is a CLIPPED BAR, not a border-top.
   It was `border-top:3px solid gold` over `border:1px` sides, which the design
   hook caught and was right about: around a 16px radius the browser mitres 3px
   into 1px, so each top corner rendered a tapering wedge. A filled rectangle
   has no mitre, and the container already clips it to the radius. */
.cakes-notes>.pk-wrap{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--pk-cream-deep);
  border-radius:var(--pk-r-lg);
  background:var(--pk-cream);
  overflow:hidden;
}
.cakes-notes>.pk-wrap:before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--pk-gold);
}
.cakes-notes article{display:flex;gap:20px;padding:32px 30px}
.cakes-notes article+article{border-left:1px solid var(--pk-cream-deep)}
.cakes-notes i{
  flex:none;display:grid;place-items:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--pk-surface);color:var(--pk-gold);
}
.cakes-notes i svg{width:26px;height:26px}
.cakes-notes h3{
  margin:0;color:var(--pk-muted);
  font:600 12px var(--pk-sans);letter-spacing:.09em;text-transform:uppercase;
}
.cakes-notes .note-figure{
  margin:6px 0 8px;color:var(--pk-primary);
  font:700 clamp(23px,2.3vw,29px)/1.05 var(--pk-display);letter-spacing:-.025em;
}
.cakes-notes p{margin:0;color:var(--pk-fg);font:400 15px/1.6 var(--pk-sans)}


/* ===========================================================================
   6. THE FINALE: CTA band and enquiry, one continuous berry ground
   ===========================================================================
   These are two sections in the markup and they stay two sections. Visually
   they are now one closing act: the CTA band opens it, the form card is its
   subject. Before this pass the band was a berry stripe sitting directly on
   top of a white form section, so the loudest surface on the page was a
   150px-tall advert for the form immediately above the form, and it took the
   emphasis the form needed. Same colour on both, and the competition stops:
   the band's "Start your cake enquiry" arrow now points straight down at the
   card instead of at a section that looked like the page had ended. */

.cakes-cta,
.cakes-enquiry{background:var(--pk-primary);color:var(--pk-primary-fg)}

.cakes-cta{padding:84px 0 0}
.cakes-cta>.pk-wrap{min-height:0;display:flex;align-items:center;justify-content:center;gap:30px}
/* ALL of these are `.cakes-cta .pk-wrap > x`, not `.cakes-cta > x`.
   `.cakes-cta`'s only child is the .pk-wrap; the span and the div are its
   grandchildren. Three rules here were written as `>` against the section and
   therefore never applied to anything: the div's text-align, the span's size
   and colour, and the rule at the 767px breakpoint that claims to hide the
   sparkle on phones. The sparkle looked acceptable anyway because an unstyled
   entity happens to render at body size, which is exactly why nobody noticed.
   Found on 10 September 2026 only after the entity was swapped for an <svg>,
   which has no intrinsic size and rendered at 0x0. */
.cakes-cta .pk-wrap>div{text-align:center}
/* Was `font:40px/1 Georgia,serif` on a bare &#10022; entity: a FOURTH typeface,
   rendering in whatever the visitor's system serif happens to be, at the
   largest glyph size on the page, on its loudest surface. product.css,
   baking-classes.css and single-class.css have each already removed exactly
   this on their own pages and say so in their banners. The template banner for
   this pass claimed the entities had all been replaced; this one had not. */
.cakes-cta .pk-wrap>span{flex:none;color:var(--pk-gold-soft);align-self:center;display:grid;place-items:center}
.cakes-cta .pk-wrap>span svg{width:34px;height:34px}
.cakes-cta h2{margin:0;font:700 clamp(28px,3.6vw,36px)/1.14 var(--pk-display);letter-spacing:-.02em}
.cakes-cta p{margin:10px 0 0;color:var(--pk-gold-soft);font:400 31px/1 var(--pk-script)}

/* .cakes-enquiry also carries .cakes-section, which is the same specificity,
   so this must stay AFTER it in source order. The same override is repeated
   inside each media query below, because .cakes-section is re-declared there
   and a later rule would otherwise win. */
.cakes-enquiry{padding:56px 0 104px}

.cakes-enquiry .cakes-section-head{margin-bottom:40px}
.cakes-enquiry .cakes-section-head .pk-eyebrow{color:var(--pk-gold-soft)}
.cakes-enquiry .cakes-section-head .pk-eyebrow:before{color:var(--pk-gold-soft)}
.cakes-enquiry .cakes-section-head h2{color:var(--pk-primary-fg)}
/* --pk-gold-soft is the token FOR gold on berry. Measured: #d3a33f on #6e1937
   is 4.8896, which clears AA for normal text, so it is safe on the 12px
   eyebrow above as well as on the display em below and the script line in the
   CTA band. It is NOT safe to assume that of --pk-gold (#a87e2c) on this
   ground, which is why only the -soft token appears on berry anywhere here.
   This comment previously claimed gold-soft was "used here only on the Great
   Vibes em", two lines under a rule putting it on a 12px eyebrow. The contrast
   was fine; the comment was false, which is worse than no comment, because it
   is the kind the next person trusts instead of re-measuring. */
.cakes-enquiry .cakes-section-head h2 em{color:var(--pk-gold-soft)}
.cakes-enquiry .cakes-section-head>p:last-child{color:var(--pk-primary-soft)}


/* --- The card ------------------------------------------------------------- */

.cakes-form-card{
  max-width:900px;margin:0 auto;
  padding:48px 48px 44px;
  background:var(--pk-surface);
  border-radius:var(--pk-r-xl);
  box-shadow:var(--pk-shadow);
}


/* --- Fields ---------------------------------------------------------------
   The control treatment here follows .pk-cfield in style.css (the contact
   form): custom select arrow, real placeholder colour, one control height, a
   focus ring rather than a bare outline, and the 16px floor on small screens.
   That pattern already existed and this form was duplicating a weaker version
   of it with none of those. It is not imported directly because .pk-cfield
   also carries the contact page's own metrics; what is shared is the idiom. */

.cakes-form{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* Right-aligned on purpose. Left-aligned it sat directly above FULL NAME at
   the same x and in a similar grey, so it read as a broken first label rather
   than as a note about the form. */
.cakes-form__legend{
  grid-column:1/-1;margin:0;text-align:right;
  color:var(--pk-muted);font:500 12px var(--pk-sans);letter-spacing:.05em;
}
.cakes-form__legend b{color:var(--pk-pink-ink)}

.cakes-field{display:grid;gap:9px;align-content:start}
.cakes-field--wide{grid-column:1/-1}

/* flex, not grid. As a grid the <b>*</b> and the <small>(optional)</small>
   each became their own full-width row, so every asterisk on this form sat
   alone on a 396px line beneath its own label, four times over. That single
   rule was the most visible piece of the "looks amateur" report. */
.cakes-field label{
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  color:var(--pk-fg);
  font:700 12px/1.2 var(--pk-sans);letter-spacing:.07em;text-transform:uppercase;
}
/* ~4.63 on white, so it clears AA for normal text on its own. The old value
   was --pk-pink (3.74), which the design system already restricts to fills
   and decoration. The asterisk is aria-hidden in the markup and its meaning
   is carried by the required attribute and the Required legend; the colour is
   there to be scannable, not to be the only signal. */
.cakes-field label b{color:var(--pk-pink-ink);font-weight:700}
.cakes-field label small{
  color:var(--pk-muted);font-weight:500;font-size:11px;
  letter-spacing:.03em;text-transform:none;
}

.cakes-field input,
.cakes-field select,
.cakes-field textarea{
  width:100%;height:48px;padding:0 15px;
  border:1px solid var(--pk-cream-deep);border-radius:var(--pk-r);
  background:var(--pk-surface);color:var(--pk-fg);
  font:400 15px var(--pk-sans);
  outline:none;
  transition:border-color .25s var(--pk-ease),box-shadow .25s var(--pk-ease);
}
.cakes-field textarea{height:auto;min-height:150px;padding:14px 15px;line-height:1.6;resize:vertical}

.cakes-field input::placeholder,
.cakes-field textarea::placeholder{color:var(--pk-muted);opacity:1}

.cakes-field select{
  appearance:none;padding-right:42px;cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6" fill="none" stroke="%236a6a6a" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;background-position:right 16px center;background-size:17px;
}
/* Neither select is required, so :invalid never fires on them and the
   "Select an option" line rendered in full body colour, reading as a real
   answer the visitor had already given. */
.cakes-field select:has(option[value=""]:checked){color:var(--pk-muted)}

.cakes-field input:focus,
.cakes-field select:focus,
.cakes-field textarea:focus{
  border-color:var(--pk-primary);
  box-shadow:0 0 0 3px rgba(110,25,55,.10);
}
/* outline:none above would otherwise remove the site-wide keyboard ring. */
.cakes-field input:focus-visible,
.cakes-field select:focus-visible,
.cakes-field textarea:focus-visible{outline:2px solid var(--pk-primary);outline-offset:1px}

.cakes-field__hint{margin:0;color:var(--pk-muted);font:400 13px/1.45 var(--pk-sans)}

/* The file control was the rawest thing on the page: the operating system's
   own "Choose File / No file chosen", in the OS font, inside a rounded box
   styled for text inputs. */
.cakes-field--file input[type=file]{
  height:auto;padding:9px 15px 9px 9px;
  color:var(--pk-muted);font:400 14px var(--pk-sans);cursor:pointer;
}
.cakes-field--file input[type=file]::file-selector-button{
  margin-right:14px;padding:10px 18px;
  border:0;border-radius:var(--pk-pill);
  background:var(--pk-cream);color:var(--pk-primary);
  font:600 12px var(--pk-sans);letter-spacing:.05em;
  cursor:pointer;
  transition:background-color .2s var(--pk-ease);
}
@media (hover:hover) and (pointer:fine){
  .cakes-field--file input[type=file]:hover::file-selector-button{background:var(--pk-cream-deep)}
}


/* --- Footer and messages --------------------------------------------------- */

.cakes-form__footer{
  grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:6px;padding-top:28px;border-top:1px solid var(--pk-border);
}
/* .pk-btn already carries the house hover lift and the scale(.97) press, so
   this only sizes it. Rebuilding the button here is what left .cakes-submit,
   .cakes-outline-btn and .cakes-light-btn in this file styling markup that
   had stopped existing; all three are gone now. */
.cakes-form__submit{min-height:54px;padding:0 34px;font-size:14px;font-weight:600}
.cakes-form__reply{margin:0;color:var(--pk-muted);font:400 14px/1.5 var(--pk-sans)}

/* Neither branch had any styling at all: on submit the whole card was
   replaced by one unstyled paragraph on a berry ground. */
.cakes-form__message{
  display:flex;align-items:flex-start;gap:14px;
  margin:0;padding:22px 26px;
  border-radius:var(--pk-r);
  font:400 16px/1.6 var(--pk-sans);
}
.cakes-form__message svg{flex:none;width:22px;height:22px;margin-top:2px}
.cakes-form__message--ok{background:var(--pk-ok-bg);color:var(--pk-ok)}
.cakes-form__message--bad{background:var(--pk-warn-bg);color:var(--pk-primary)}


/* ===========================================================================
   7. RESPONSIVE
   =========================================================================== */

@media(max-width:980px){
  .cakes-gallery{grid-template-columns:repeat(3,1fr);row-gap:16px}
  .cakes-form-card{padding:40px 36px 36px}
}

/* Four occasion cards used to hold to 767px. They no longer can: the headings
   are 19px and the body 15px now, so at 768 each card was ~165px wide and
   "Christenings & baby showers" broke over three lines above a six-line
   paragraph. Two columns from 900px down. Below 640px Tony's compact row
   layout takes over, and that is untouched. */
@media(max-width:900px){
  .occasion-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:767px){
  .cakes-section{padding:var(--pk-band-sm) 0}
  .cakes-section-head{margin-bottom:38px}
  .journey-layout{grid-template-columns:1fr;gap:34px}
  .journey-image img{aspect-ratio:16/9}
  .cakes-notes>.pk-wrap{grid-template-columns:1fr}
  .cakes-notes article+article{border-left:0;border-top:1px solid var(--pk-cream-deep)}
  .cakes-cta{padding:56px 0 0}
  .cakes-cta>.pk-wrap{padding:0;flex-direction:column;gap:16px}
  .cakes-cta .pk-wrap>span{display:none}
  /* repeated here because .cakes-section is re-declared above in this same
     query and would otherwise win on source order */
  .cakes-enquiry{padding:44px 0 72px}
  .cakes-form{grid-template-columns:1fr}
}

@media(max-width:639px){
  .cakes-gallery{grid-template-columns:repeat(2,1fr);gap:10px}

/* Occasion cards, phone width. Tony, 8 September 2026: "too big, make them
   smaller and clean, quick to read and scan." At 390px each of the four was
   an icon-over-heading-over-two-line-paragraph card, ~190px tall, centred,
   stacked full width: four screens' worth of vertical scroll to read a list
   of four words (Birthdays, Weddings, Christenings, Corporate). The desktop
   and tablet grids above are untouched; only this is a same-size icon+
   heading+text card repeated four times, the layout the craft floor names
   as the lazy default, and it is exactly what made this slow to scan.
   Rebuilt as a compact row: icon left, title and one line of context to its
   right, so the whole set reads in one glance instead of four scrolls. No
   markup change - i/h3/p are already siblings in that order, so an explicit
   grid placement (icon spans both text rows) does the work.
   Carried through the 10 September visual pass unchanged. */
  .occasion-grid{grid-template-columns:1fr;gap:8px}
  .occasion-grid article{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;padding:14px 16px;text-align:left}
  .occasion-grid i{grid-column:1;grid-row:1/3;width:44px;height:44px;margin:0}
  .occasion-grid i svg{width:21px;height:21px}
  .occasion-grid h3{grid-column:2;grid-row:1;min-height:0;font-size:16px;line-height:1.25}
  .occasion-grid p{grid-column:2;grid-row:2;margin-top:3px;font-size:13.5px;line-height:1.45}

  .cakes-notes article{padding:24px 22px}
  .cakes-form-card{padding:28px 22px 26px;border-radius:var(--pk-r-lg)}
  .cakes-form__footer{align-items:stretch;flex-direction:column;gap:14px}
  .cakes-form__submit{width:100%}
  .cakes-form__reply{text-align:center}
}

/* 16px is not a taste choice: iOS Safari zooms the viewport on focus for any
   control under 16px and does not zoom back out, so the visitor has to pinch
   to reach Send. style.css already carries a site-wide floor at this width;
   it is restated here so this form does not depend on the order the two
   stylesheets happen to load in. */
@media(max-width:479px){
  .cakes-field input,
  .cakes-field select,
  .cakes-field textarea{font-size:16px}
}

/* This file had no reduced-motion block at all.

   It drops MOVEMENT only, and deliberately leaves the transitions alone.
   style.css's press block says why: "a press response is confirmation that a
   tap landed, not decoration", so killing the transition here would take the
   tap feedback with it. The first version of this block also tried to do that
   via `.occasion-grid article{transition:none}`, which is (0,1,1) and could
   never have won against (0,4,0) anyway - a promise in a comment that the
   cascade was never going to keep. */
@media (prefers-reduced-motion:reduce){
  .occasion-grid article:hover{transform:none}
  .cakes-gallery figure:hover img{transform:none}
}