/* studio.gonglogic.com — only what the studio has that the theme does not.

   The studio's pages are built from the theme's own components (hero, section, pillar,
   step, cta-band, the form styles) inside the site's own layout, so this file is small
   on purpose: a price on a card, the figures on a piece of work, the frame around the
   enquiry form. It uses the theme's custom properties, never colours of its own — if
   something here needs a new colour, the brand needs it, and it belongs in the theme.

   Everything is prefixed st- so nothing can leak onto another page. */

/* ── Offers: five cards. Three and then two, the two sharing the row evenly. ───────── */
.st-offers { align-items: stretch; }
.st-offers > li { display: flex; }
.st-offer { display: flex; flex-direction: column; width: 100%; }
.st-offer .pillar__meta { margin-top: auto; padding-top: .9rem; }
@media (min-width: 48rem) {
    .pillars.st-offers { grid-template-columns: repeat(6, 1fr); }
    .st-offers > li { grid-column: span 2; }
    .st-offers > li:nth-child(n+4) { grid-column: span 3; }
}
.st-price { margin: 0 0 .7rem; line-height: 1.1; }
.st-price b { font-family: var(--font-heading, Outfit, sans-serif); font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.st-price__from { font-size: .82rem; opacity: .65; }
.st-offer__includes { margin: 0; font-size: .86rem; line-height: 1.5; opacity: .62; }
.st-note { margin: 1.75rem auto 0; max-width: 46rem; text-align: center; font-size: .92rem; opacity: .7; }

/* ── Work: a card led by its figure, the way a book is led by its cover. ──────────── */
.st-work > li { display: flex; }
.st-workcard { display: flex; flex-direction: column; width: 100%; }
.st-workcard .pillar__meta { margin-top: auto; padding-top: .9rem; }
.st-figure { display: flex; flex-direction: column; justify-content: flex-end; gap: .15rem; min-height: 7.5rem; margin: 0 0 1.1rem; padding: 1rem 1.1rem; border-radius: .7rem; background: var(--gradient-hero, #15151b); color: var(--color-paper, #f8f4ea); position: relative; overflow: hidden; }
.st-figure::after { content: ''; position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(to top, rgba(200, 150, 47, .22), transparent); pointer-events: none; }
.st-figure b { position: relative; z-index: 1; font-family: var(--font-heading, Outfit, sans-serif); font-size: 2.9rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--color-accent, #c8962f); font-variant-numeric: tabular-nums; }
.st-figure i { position: relative; z-index: 1; font-style: normal; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
@media (min-width: 48rem) { .pillars.st-work--two { grid-template-columns: repeat(2, 1fr); } }

/* ── A piece of work: figures, then the story in three numbered parts. ───────────── */
.st-crumbs { margin: 0 0 1.75rem; font-size: .9rem; opacity: .75; }
.st-crumbs a { color: inherit; }
.st-facts { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 2.5rem; }
.st-fact { flex: 1 1 11rem; max-width: 16rem; padding: 1.1rem 1.25rem; border-radius: .9rem; background: var(--gradient-hero, #15151b); color: var(--color-paper, #f8f4ea); }
.st-fact dt { font-family: var(--font-heading, Outfit, sans-serif); font-size: 2.6rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--color-accent, #c8962f); font-variant-numeric: tabular-nums; }
.st-fact dd { margin: .4rem 0 0; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.st-story { display: grid; gap: 2rem; max-width: 46rem; }
.st-story__part { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 1rem; }
.st-story__num { grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-heading, Outfit, sans-serif); font-weight: 700; background: var(--color-ink, #15151b); color: var(--color-accent, #c8962f); }
.st-story__title { margin: .35rem 0 .5rem; font-size: 1.35rem; }
.st-story__text { margin: 0; font-size: 1.05rem; line-height: 1.65; }
.st-demo { margin: 2.25rem 0 0; }
.st-demo__link { font-weight: 600; }

/* ── Ask: the words beside the form on a wide screen, above it on a narrow one. ──── */
.st-ask { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 60rem) { .st-ask { grid-template-columns: 5fr 6fr; gap: 3.5rem; } }
.st-ask__intro .section__title { margin-top: .4rem; }
.st-ask__intro .section__lead { margin-left: 0; text-align: left; }
.st-ask__mail { margin: 1.25rem 0 0; font-size: .95rem; }
/* The theme already draws a form as a card (.page form). This only removes the page
   wrapper's own spacing so that card sits level with the words beside it. */
.st-ask__form { margin: 0; padding: 0; }
.st-ask__form form { margin: 0; max-width: none; }
.st-ask__form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
/* The theme styles text fields and has never had a drop-down to style: without this the
   one <select> on the site is the browser's grey default between two brand fields. */
.st-ask__form select {
    width: 100%; box-sizing: border-box; appearance: none; -webkit-appearance: none;
    padding: .85rem 2.75rem .85rem 1rem; font: inherit; color: inherit; cursor: pointer;
    border: 1px solid var(--color-grey-400, #a89e88); border-radius: .625rem;
    background: var(--color-white, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2334322c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 1rem center / 1rem;
}
.st-ask__form select:focus-visible { outline: none; border-color: var(--color-accent, #c8962f); box-shadow: var(--shadow-glow, 0 0 0 4px rgba(200, 150, 47, .3)); }
.st-ask__form .message.good { font-weight: 600; }

/* The hero's stats are short phrases here, not counts; let them wrap as phrases. */
.hero--studio .hero__stats { flex-wrap: wrap; justify-content: center; row-gap: .5rem; }

/* Anchors (What I do, How it works…) land below the sticky header, not under it. */
#offers, #how, #work, #ask { scroll-margin-top: 5rem; }