/* =========================================================================
   uiux-design-template.php
   This template's own CSS, moved out of its inline <style> block(s) on the
   owner's instruction, 10 Sep 2026. Enqueued in <head> for this template only
   (inc/enqueue.php). Every rule is scoped to an id on this page, so it beats
   the section files printed later in the body exactly as it did inline.
   ========================================================================= */

/* Clearance for the seam card. CSS cannot measure the card, so the room for
it is set here, where both of its neighbours are known, rather than inside
the shared partial.

The hero side uses the identical expression the Shopify Development page
uses for the same card under the same partial, so the two pages hold the
same rhythm rather than each being tuned by eye: measured at 1440px the
card clears the last hero element by 93px here against 101px there, and the
8px is the card being one label-line taller on this page.

The Features side is NOT the reference's expression, deliberately. That
section's heading block carries about 28px of its own top offset that
section-about (the Shopify page's neighbour) does not, so copying the value
would open a gap 20px wider than the reference rather than matching it. One
step lower lands the measured gap on 117px against the reference's 113px. */
#uiux-hero { padding-bottom: calc(var(--section-pad-lg) + var(--space-8)); }
#features  { padding-top: calc(var(--section-pad) + var(--space-8)); }

/* Phones need considerably more than a proportional share of the desktop
   values, because the card is not a scaled-down version of itself there: it
   drops to one column, so it is four rows tall. Seam also drops its lift to
   40% at this width, so more of the card hangs below the join than above it,
   which is why the two values are no longer close to each other.

   The Features side carries --space-6 more than it used to. Without it the
   card's lower half landed ON this section's content rather than in its
   padding: measured overlaps were 13px at 375 to 480, and 28px at 320,
   where the card is at its tallest relative to the room above it. 32px
   clears the worst case and puts this expression in line with the Shopify
   Migration page, which runs the same card and measures clean at every
   width. The desktop value above is untouched: that one is one step lower
   than the reference on purpose, for the reason given in the note. */
@media (max-width: 767px) {
  #uiux-hero { padding-bottom: calc(var(--section-pad-lg) + var(--space-9) + var(--space-8)); }
  /* Stated rather than inherited: this page's desktop value is space-8,
     one step below the other six, and band mode cancels space-9. Left to
     the desktop line the card would sit 16px inside the section's own
     rhythm instead of on it. */
  #features  { padding-top: calc(var(--section-pad) + var(--space-9)); }
}

/* The six marks are drawn at #B6B6B6, which is the legacy design's grey and the
fill every icon in the `what-we-offer-icon-*` family carries. Against the
disc's warm ground that reads as a watermark rather than as a mark, and the
supplied design draws them in charcoal.

They ship through an <img>, so the parent's colour cannot reach inside them
and a filter is the only way to restyle them without touching the files. The
flat grey scales cleanly because the artwork is a single fill: 182 x 0.28 is
51, so this lands on #333333.

Scoped to this section rather than put in the partial: it is a fact about
this page's chosen assets, not about the component, and a card whose mark is
already the right colour must not be darkened.

The alternative is to recolour the six SVG files, which is cleaner and costs
no filter. It is not done here because they are shared theme assets and the
grey may be deliberate elsewhere in the family. Say the word and they get
recoloured properly and this block goes away. */
#explore-our-services .es-fgrid__icon img { filter: brightness(0.28); }
