/* ============================================================
   Home page — hero, AI band, steps, section heads.
   ============================================================ */

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.section-head h2 { margin-top: var(--sp-2); }
@media (max-width: 560px) { .section-head { flex-direction: column; align-items: flex-start; } }

/* ---- Hero ---- */
.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(2rem, 5vw, 4rem); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(49,160,203,.20), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(27,36,23,.05), transparent 60%);
}
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-7); align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__art { order: -1; } }

.hero__copy .display { margin: var(--sp-4) 0 var(--sp-5); }
.hero .hl { position: relative; white-space: nowrap; }
.hero .hl::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .08em; height: .38em; z-index: -1;
  background: var(--accent); border-radius: 4px; transform: rotate(-1.2deg);
}
.hero__cta { margin-bottom: var(--sp-4); }
.hero__segs { gap: .5rem; margin-bottom: var(--sp-4); }
.hero__segs .pill { background: var(--surface); cursor: pointer; transition: border-color var(--dur), color var(--dur), transform var(--dur); }
.hero__segs .pill:hover { border-color: var(--accent-strong); color: var(--accent-deep); transform: translateY(-1px); }
.hero__trust { font-size: var(--fs-300); color: var(--ink-3); display: flex; align-items: center; gap: .5rem; }
.hero__trust span { color: var(--accent-strong); letter-spacing: 1px; }

/* hero art: floating apparel cards */
.hero__art { position: relative; aspect-ratio: 1 / 1; max-width: 480px; margin-inline: auto; width: 100%; }
.hero__blob {
  position: absolute; inset: 6% 6% 6% 6%; border-radius: 42% 58% 56% 44% / 50% 42% 58% 50%;
  background: linear-gradient(150deg, var(--ink-dark), #0b2530);
  box-shadow: var(--shadow-lg);
  animation: blob 14s ease-in-out infinite;
}
@keyframes blob { 50% { border-radius: 54% 46% 40% 60% / 44% 56% 44% 56%; } }
.hero__card {
  position: absolute; width: 41%; background: var(--surface); border-radius: var(--r-md);
  padding: .7rem; box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  animation: float 7s ease-in-out infinite;
}
.hero__card .tee { aspect-ratio: 4/3; border-radius: 10px; margin-bottom: .5rem; }
.hero__card .tag { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300); color: var(--ink-2); }
.tee--accent { background: linear-gradient(140deg, #5cc0e6, #2594bf); }
.tee--ink { background: linear-gradient(140deg, #2a2c22, #14150f); }
.tee--olive { background: linear-gradient(140deg, #6f9bb0, #3f6b80); }
.hero__card--1 { top: 8%; left: 2%; animation-delay: 0s; }
.hero__card--2 { top: 34%; right: 0%; animation-delay: 1.4s; }
.hero__card--3 { bottom: 5%; left: 16%; animation-delay: .7s; }
@keyframes float { 50% { transform: translateY(-12px); } }
.hero__chip {
  position: absolute; background: var(--accent); color: var(--ink); font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-300); padding: .5rem .8rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
}
.hero__chip--moq { top: 2%; right: 12%; animation: float 6s ease-in-out infinite; }
.hero__chip--time { bottom: 16%; right: 6%; background: var(--ink); color: var(--accent); animation: float 6.5s ease-in-out infinite .5s; }
@media (max-width: 480px) { .hero__art { max-width: 320px; } }

/* ---- Category cards (icon tiles) ---- */
.cat {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3 / 3.4; border-radius: var(--r-lg); overflow: hidden; padding: var(--sp-5);
  color: #fff; border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.cat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.cat::before { content: ""; position: absolute; inset: 0; z-index: 0; transition: transform var(--dur-slow) var(--ease-out); }
.cat:hover::before { transform: scale(1.06); }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(8,10,6,.72)); z-index: 1; }
.cat > * { position: relative; z-index: 2; }
.cat .cat__icon { position: absolute; top: var(--sp-4); left: var(--sp-4); width: 40px; height: 40px; color: rgba(255,255,255,.92); }
.cat h3 { color: #fff; font-size: var(--fs-500); }
.cat p { color: rgba(255,255,255,.78); font-size: var(--fs-300); margin-top: .15rem; }
.cat .go { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; z-index: 2; transition: background var(--dur), transform var(--dur); }
.cat:hover .go { background: var(--accent); color: var(--ink); transform: rotate(-45deg); }
/* category gradient palette */
.cat--0::before { background: linear-gradient(150deg,#3aa8d1,#1c6f8f); }
.cat--1::before { background: linear-gradient(150deg,#4b5563,#1f2937); }
.cat--2::before { background: linear-gradient(150deg,#8a6d3b,#4a3414); }
.cat--3::before { background: linear-gradient(150deg,#5b6b8c,#2b3550); }
.cat--4::before { background: linear-gradient(150deg,#7a8b4a,#3f4a22); }
.cat--5::before { background: linear-gradient(150deg,#9a6a8c,#4e3148); }
.cat--6::before { background: linear-gradient(150deg,#b8932f,#6b5113); }
.cat--7::before { background: linear-gradient(150deg,#3f8a8a,#1c4747); }

/* ---- AI band ---- */
.ai-band {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-7); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 3rem); box-shadow: var(--shadow-sm);
}
@media (max-width: 820px) { .ai-band { grid-template-columns: 1fr; } }
.ai-band h2 { margin: var(--sp-3) 0 var(--sp-3); font-size: var(--fs-700); }
.ai-band p { margin-bottom: var(--sp-5); }
.ai-band__demo { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.ai-bubble { padding: .65rem .85rem; border-radius: 14px; font-size: var(--fs-300); line-height: 1.45; max-width: 90%; }
.ai-bubble--user { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.ai-bubble--bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink-2); }
.ai-reco { display: flex; align-items: center; gap: .6rem; background: var(--surface); border: 1px solid var(--accent-strong); border-radius: 12px; padding: .55rem .65rem; font-size: var(--fs-300); }
.ai-reco .sw { width: 38px; height: 38px; border-radius: 8px; background: linear-gradient(140deg,#5cc0e6,#2594bf); flex: none; }
.ai-reco small { color: var(--ink-3); }

/* ---- Steps ---- */
.steps { margin-top: var(--sp-6); }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step__no { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-700); color: var(--accent-strong); line-height: 1; }
.step h3 { font-size: var(--fs-500); margin: var(--sp-3) 0 var(--sp-2); }
.step p { font-size: var(--fs-400); color: var(--ink-3); }

/* ---- Stat bar ---- */
.statbar { text-align: center; padding: var(--sp-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.statbar .stat { padding: var(--sp-2); }

/* ---- Who we serve (segments) ---- */
.segments { margin-top: var(--sp-6); }
.segment { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); }
.segment:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.segment__ico { width: 54px; height: 54px; border-radius: 14px; background: var(--accent-tint); color: var(--accent-deep); display: grid; place-items: center; margin-bottom: var(--sp-4); }
.segment__ico svg { width: 28px; height: 28px; }
.segment h3 { font-size: var(--fs-600); margin-bottom: var(--sp-2); }
.segment p { color: var(--ink-3); font-size: var(--fs-400); margin-bottom: var(--sp-4); }
.segment__link { font-family: var(--font-display); font-weight: 600; color: var(--accent-deep); display: inline-flex; align-items: center; gap: .35rem; }
.segment__link .arrow { transition: transform var(--dur); }
.segment:hover .segment__link .arrow { transform: translateX(4px); }

/* ---- Testimonials / social proof ---- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }
.testi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-3); }
.testi__stars { color: #f5a623; letter-spacing: 2px; font-size: var(--fs-400); }
.testi blockquote { font-size: var(--fs-500); line-height: 1.55; color: var(--ink-2); }
.testi figcaption { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.testi figcaption img, .testi__ava { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.testi__ava { background: var(--accent-tint); color: var(--accent-deep); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-500); }
.testi figcaption strong { display: block; font-family: var(--font-display); }
.testi figcaption > span > span { font-size: var(--fs-300); color: var(--ink-3); }

/* ============================================================
   EDITORIAL MINIMAL — home pilot (2026-07-07)
   Ink + paper, ONE blue accent, big type, hairline rules.
   ============================================================ */

/* Eyebrow: uppercase label with a short accent tick */
.eyebrow, .ed-eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin: 0;
}
.eyebrow::before, .ed-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--accent); flex: none; }
.center .eyebrow::before { display: none; } /* centered heads read cleaner without the tick */

/* Bigger, tighter section headings across the home page */
main#main h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -.02em; }
/* NB: no `align-items` here. It's already flex-end at the top of this file, and
   repeating it AFTER the max-width:560px rule silently re-applied flex-end on
   phones — where the head is a COLUMN, so every line (eyebrow, heading, "See
   everything") shunted to the right edge. Keep alignment declared in one place. */
.section-head { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-4); }
.section-head .eyebrow { margin-bottom: var(--sp-3); }

/* ---- Hero (editorial) ---- */
.hero-ed { padding-block: clamp(2.75rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--line); }
.hero-ed__title {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1.02; letter-spacing: -.035em;
  margin: var(--sp-5) 0; max-width: 15ch;
}
.hero-ed__title em { font-style: normal; position: relative; white-space: nowrap; }
.hero-ed__title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: 4px; background: var(--accent); }
.hero-ed__lede { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink-2); max-width: 54ch; margin-bottom: var(--sp-6); }
.hero-ed__actions { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.ed-textlink { font-family: var(--font-display); font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 3px; transition: color var(--dur); }
.ed-textlink:hover { color: var(--accent-deep); }
.hero-ed__meta { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; padding: var(--sp-4) 0 0; margin: var(--sp-7) 0 0; border-top: 1px solid var(--line); font-size: var(--fs-300); color: var(--ink-3); }
.ed-stars { color: var(--accent); letter-spacing: 1px; }
.hero-ed__segs { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: var(--sp-4); }
.hero-ed__segs a { font-family: var(--font-display); font-size: var(--fs-300); font-weight: 600; color: var(--ink-2); text-decoration: none; }
.hero-ed__segs a::before { content: "→"; color: var(--accent); margin-right: .4rem; }
.hero-ed__segs a:hover { color: var(--accent-deep); }

/* ---- Marquee (brand-blue band, auto-scrolling) ---- */
.marquee { border-block: 1px solid var(--accent-strong); background: var(--accent); overflow: hidden; }
.marquee__track { display: flex; width: max-content; will-change: transform; animation: marquee-scroll 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; padding: .7rem 0; white-space: nowrap; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-300); color: #fff; }
.marquee__item::after { content: "✦"; margin: 0 1.6rem; font-size: .78em; color: rgba(255, 255, 255, .55); }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Segments: editorial numbered ---- */
.segment { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6); transition: border-color var(--dur), transform var(--dur); }
.segment:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: none; }
.segment__no { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; color: var(--accent); margin-bottom: var(--sp-4); }
.segment h3 { font-size: var(--fs-600); }
/* segment illustration (contained inside the card) + banner backdrop */
.segment__pic { display: block; margin: 0 0 var(--sp-5); aspect-ratio: 5 / 3; line-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); }
.segment__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Homepage-wide soft gradient wash: a faint cool brand tint anchored to the
   viewport (background-attachment: fixed), so the whole page keeps a gentle,
   consistent backdrop as you scroll. Deliberately understated — mostly cream.
   Scoped to body.home so the other pages that share home.css are unaffected. */
body.home {
  background:
    radial-gradient(52% 48% at 0% 0%,    rgba(49,160,203,.32), rgba(49,160,203,0) 60%),
    radial-gradient(56% 52% at 100% 16%, rgba(23,112,143,.28), rgba(23,112,143,0) 62%),
    radial-gradient(50% 48% at 94% 100%, rgba(49,160,203,.24), rgba(49,160,203,0) 60%),
    radial-gradient(44% 44% at 48% 52%,  rgba(242,177,0,.12),  rgba(242,177,0,0)  55%),
    var(--paper);
  background-attachment: fixed;
}
/* the wrapper is now transparent — the body wash shows through */
.seg-banner { background: transparent; }

/* ---- Category cards: clean, no gradients ---- */
.catcard { display: flex; flex-direction: column; gap: .4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); text-decoration: none; color: var(--ink); transition: border-color var(--dur), transform var(--dur); min-height: 200px; }
.catcard:hover { border-color: var(--ink); transform: translateY(-4px); }
.catcard__ico { width: 32px; height: 32px; color: var(--accent-deep); margin-bottom: var(--sp-3); }
.catcard__ico svg { position: static; width: 100%; height: 100%; }
.catcard__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-500); }
.catcard__desc { font-size: var(--fs-300); color: var(--ink-3); }
.catcard__arrow { margin-top: auto; color: var(--ink-3); transition: color var(--dur), transform var(--dur); }
.catcard__arrow svg { width: 18px; height: 18px; }
.catcard:hover .catcard__arrow { color: var(--accent); transform: translateX(4px); }

/* ---- Ruled section separator (replaces tinted bg) ---- */
.ed-ruled { border-top: 1px solid var(--line); }

/* ---- Stats: hairline rule, big numerals ---- */
.statbar { background: transparent; border: 0; border-block: 1px solid var(--line); border-radius: 0; padding: var(--sp-6) 0; }
.statbar .num { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.02em; }

/* ============================================================
   Photos — clean & light (blue / white / cream), 2026-07-09
   ============================================================ */
/* Hero: type + a clean staggered stack of real product photos */
.hero-ed__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-7); align-items: center; }
@media (max-width: 900px) { .hero-ed__grid { grid-template-columns: 1fr; } .hero-ed__art { display: none; } }
.hero-ed__art { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 460px; margin-inline: auto; }
.hero-shot { position: absolute; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .5rem; box-shadow: var(--shadow-lg); }
.hero-shot img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 10px; background: #fff; }
.hero-shot figcaption { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300); color: var(--ink-2); padding: .45rem .25rem 0; }
.hero-shot--1 { width: 52%; top: 2%; left: 0; z-index: 2; }
.hero-shot--2 { width: 46%; top: 26%; right: 2%; z-index: 3; }
.hero-shot--3 { width: 42%; bottom: 0; left: 22%; z-index: 1; }
/* gentle ambient float on the stacked hero photos (desktop only) */
@media (min-width: 901px) {
  .hero-shot { animation: hero-float 7s ease-in-out infinite; }
  .hero-shot--2 { animation-duration: 7.8s; animation-delay: -2.3s; }
  .hero-shot--3 { animation-duration: 8.6s; animation-delay: -4.6s; }
}
@keyframes hero-float { 50% { transform: translateY(-9px); } }

/* Respect reduced-motion for the ambient (infinite) animations */
@media (prefers-reduced-motion: reduce) {
  .marquee__track, .hero-shot { animation: none !important; }
}

/* Category cards with a real product photo */
.catcard--photo { padding: 0; overflow: hidden; min-height: 0; }
.catcard__photo { display: block; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.catcard__photo img { width: 100%; height: 100%; object-fit: contain; padding: .7rem; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.catcard--photo:hover .catcard__photo img { transform: scale(1.05); }
.catcard--photo .catcard__name { padding: var(--sp-4) var(--sp-4) 0; }
.catcard--photo .catcard__desc { padding: 0 var(--sp-4); }
.catcard--photo .catcard__arrow { padding: var(--sp-3) var(--sp-4) var(--sp-4); }

/* ---- Home AI band: live input ---- */
.ai-band__form { display: flex; gap: .5rem; margin-top: var(--sp-4); }
.ai-band__form input { flex: 1; min-width: 0; padding: .7rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); font: inherit; font-size: var(--fs-400); background: var(--surface); }
.ai-band__form input:focus { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-tint); }
.ai-band__form .btn { flex: none; }
@media (max-width: 480px) { .ai-band__form { flex-direction: column; } .ai-band__form .btn { width: 100%; } }

/* ---- Two-column text + media (Key Reasons, Cheap & Affordable) ---- */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
@media (max-width: 860px) { .split-2 { grid-template-columns: 1fr; gap: var(--sp-5); } }
.split-2__media { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); }
.split-2__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* ---- Ticked factor list ---- */
.check-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.check-list li { position: relative; padding-left: 1.6rem; color: var(--ink-2); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent-deep); font-weight: 800; }

/* ---- Award badges ----
   Some badges ship with a solid white background (top-in-singapore has no alpha
   channel at all), which would sit as a white box on our cream page. multiply
   blends white into the page while leaving the artwork intact — no image editing,
   and it works whether or not the source has transparency. */
.awards { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.25rem); }
.awards img { height: 132px; width: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--dur); }
.awards img:hover { transform: translateY(-4px) scale(1.03); }
@media (max-width: 900px) { .awards img { height: 104px; } }
@media (max-width: 600px) { .awards img { height: 78px; } }

/* ---- Photo tiles (printing techniques / silkscreen types) ----
   Background photo + a dark scrim so white text stays readable over any image.
   The image comes in via --tile-img (set inline per tile). */
.ptile {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  padding: var(--sp-5); min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; background: var(--ink-dark);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.ptile::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--tile-img); background-size: cover; background-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.ptile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,10,6,.35) 0%, rgba(8,10,6,.72) 55%, rgba(8,10,6,.88) 100%);
}
.ptile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.ptile:hover::before { transform: scale(1.06); }
.ptile h3 { color: #fff; font-size: var(--fs-500); margin-bottom: .5rem; }
.ptile p { color: rgba(255,255,255,.86); font-size: var(--fs-300); line-height: 1.55; }
@media (max-width: 640px) { .ptile { min-height: 240px; } }

/* ---- Real-work gallery (Beyond Quality) ---- */
.wgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .wgrid { grid-template-columns: repeat(2, 1fr); } }
.wshot { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); }
.wshot img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.wshot:hover img { transform: scale(1.05); }

/* ---- "Suitable for" chip row (workshop) ----
   The old site ran these as one pipe-separated line; chips read better and wrap
   cleanly on mobile. Same list, same order. */
.suited { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.suited__label { font-size: var(--fs-400); font-family: var(--font-display); margin: 0; flex: none; }
.suited__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.suited__list li { background: var(--accent-tint); color: var(--accent-deep); border-radius: var(--r-pill);
  padding: .3rem .75rem; font-size: var(--fs-300); font-weight: 600; }
@media (max-width: 640px) { .suited { flex-direction: column; align-items: flex-start; } }

/* ---- AI assistant bar (under the three segment cards) ---- */
/* A slim strip, not a fourth card: it should read as a helpful aside for the
   visitor who doesn't see themselves in any of the three groups above. */
.ai-bar {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.ai-bar:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ai-bar__icon {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-deep);
}
.ai-bar__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ai-bar__text strong { font-family: var(--font-display); font-size: var(--fs-400); color: var(--ink); }
.ai-bar__name { font-size: var(--fs-400); font-weight: 600; color: var(--accent-deep); }
.ai-bar__sub { font-size: var(--fs-300); color: var(--ink-3); }
.ai-bar__cta {
  margin-left: auto; flex: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300);
  color: var(--accent-deep); display: inline-flex; align-items: center; gap: .35rem;
}
.ai-bar:hover .ai-bar__cta .arrow { transform: translateX(3px); }
.ai-bar__cta .arrow { transition: transform var(--dur); }
@media (max-width: 720px) {
  /* Stack so the sub-line isn't squeezed to two words; CTA drops under the text. */
  .ai-bar { align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); flex-wrap: wrap; }
  .ai-bar__cta { margin-left: 0; width: 100%; padding-left: calc(38px + var(--sp-3)); }
}
@media (max-width: 560px) {
  /* The sub-line used to be hidden here: at 105 characters it wrapped to four
     lines and made the bar taller than the cards above it. The copy is now 69
     characters and wraps to two, so it earns its place — it is the line that
     actually explains what the assistant does.
     The CTA is longer than before ("Ask our Virtual Assistant"), so it keeps
     its own row rather than being squeezed beside the heading. */
  .ai-bar { align-items: flex-start; }
  /* No indent. The padding-left here existed to clear the icon when it sat
     beside the text — but at this width the icon wraps onto its own row, so the
     heading starts at the card's padding and the indent aligned the CTA to
     nothing, leaving it floating in from the left of everything else. */
  .ai-bar__cta { width: 100%; margin-left: 0; padding-left: 0; }
}