/* =============================================================
   uno.com.my — Page level compositions
   ============================================================= */

/* ---- Home hero ---------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-10));
  padding-bottom: var(--s-11);
  background: var(--c-cream);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -140px; right: -160px;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(247,181,0,.20), transparent 62%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: var(--s-10);
}
.hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  margin-bottom: var(--s-6);
}
.hero__lead { font-size: var(--fs-lead); max-width: 40ch; }
.hero__art { position: relative; }
/* Real photography is landscape; the slot is closer to 4:3, so crop to fill
   rather than letterbox. */
.hero__art img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 60%;
  border-radius: var(--r-lg);
}
@media (max-width: 960px) { .hero__art img { aspect-ratio: 16 / 10; } }

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero { padding-bottom: var(--s-9); }
}

/* Homepage artwork extracted from the supplied layout. Preserve complete crops. */
.page-home .hero__art img { aspect-ratio: auto; height: auto; border-radius: 0; }
.page-home .showcase__art img { height: auto; object-fit: contain; }
.page-home .spotlight__media { min-height: 0; align-self: center; }
.page-home .spotlight__media img { display: block; height: auto; object-fit: contain; }
.page-home .insight__thumb { aspect-ratio: 16 / 10; padding: 0; overflow: hidden; }
.page-home .insight__thumb img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0; }
.home-mockup-cta { background: var(--c-cream); padding: 24px 0 64px; }
.home-mockup-cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(28px, 5vw, 64px);
  background: #101b20;
  border: 1px solid #26343b;
  border-radius: 28px;
  overflow: hidden;
}
.home-mockup-cta__inner::before { content: ''; position: absolute; width: 440px; height: 440px; right: -205px; top: -235px; border: 48px solid #eeb536; border-radius: 50%; pointer-events: none; }
.home-mockup-cta__body,.home-mockup-cta__media { position: relative; min-width: 0; }
.home-mockup-cta__eyebrow { color: #eec158; font-size: 11px; font-weight: 600; letter-spacing: .14em; margin: 0 0 20px; }
.home-mockup-cta h2 { color: #fffdf6; font-size: clamp(30px,3.5vw,46px); line-height: 1.12; letter-spacing: -.04em; margin: 0 0 22px; }
.home-mockup-cta h2 span { color: #f7b500; }
.home-mockup-cta__lead { max-width: 46ch; color: #bac6cc; font-size: 15px; line-height: 1.7; margin: 0 0 28px; }
.home-mockup-cta__brief { background: #f6f2e9; padding: clamp(24px,3vw,36px); border-radius: 16px; }
.home-mockup-cta__brief-label { display: block; color: #18272f; font-size: 18px; font-weight: 600; margin-bottom: 22px; }
.home-mockup-cta__brief ul { list-style: none; padding: 0; margin: 0; }
.home-mockup-cta__brief li { display: flex; align-items: baseline; gap: 16px; padding: 17px 0; border-top: 1px solid #dcd7cc; color: #27343b; font-size: 14px; line-height: 1.5; }
.home-mockup-cta__brief li span { color: #8c701f; font-size: 12px; flex-shrink: 0; }
.home-mockup-cta__brief p { color: #686c69; font-size: 12px; line-height: 1.6; margin: 20px 0 0; }
@media (max-width: 700px) {
  .home-mockup-cta { padding-bottom: 36px; }
  .home-mockup-cta__inner { grid-template-columns: 1fr; gap: 30px; border-radius: 20px; padding: 28px 24px; }
  .home-mockup-cta__inner::before { width: 220px; height: 220px; right: -160px; top: -150px; border-width: 25px; }
  .home-mockup-cta h2 br { display: none; }
}

/* ---- Inner page hero (dark) --------------------------------- */
.buyer-question { padding-block: 24px; border-bottom: 1px solid var(--c-line); }
.buyer-question h3 { margin-bottom: 12px; font-size: var(--fs-h4); line-height: var(--lh-snug); }
.buyer-questions { margin-bottom: 24px; }
.b2b-checklist { list-style: disc; padding-left: 24px; margin-block: 20px; }
.b2b-checklist li { margin-bottom: 12px; }
.b2b-link-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; list-style: none; padding: 0; }
.b2b-link-list a { text-decoration: underline; text-underline-offset: 4px; }
.b2b-table-wrap { overflow-x: auto; }
.b2b-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.b2b-table caption { text-align: left; margin-bottom: 20px; }
.b2b-table th, .b2b-table td { padding: 18px; border: 1px solid var(--c-line); vertical-align: top; text-align: left; }
.b2b-table thead { background: var(--c-cream); color: var(--c-black); }
.b2b-enquiry { min-width: 0; }
/* The cross-origin form has no resize API. Reserve its full measured height
   plus room for wrapped headings and inline validation messages. */
.contact-form-embed { width: 100%; max-width: 100%; height: 1000px; }
.b2b-enquiry .contact-form-embed iframe { display: block; width: 100%; max-width: 100%; height: 100%; min-width: 0; border: 0; }
.hero--inner .hero__title { font-size: var(--fs-h1); }
@media (max-width: 700px) { .b2b-link-list { grid-template-columns: 1fr; } }

.hero--inner {
  background: var(--uno-navy-900);
  color: var(--text-invert-soft);
  padding-top: calc(var(--header-h) + var(--s-9));
  padding-bottom: var(--s-10);
}
.hero--inner::before {
  background: radial-gradient(circle at 35% 35%, rgba(247,181,0,.16), transparent 64%);
}
.hero--inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 42%);
          mask-image: linear-gradient(120deg, #000 0%, transparent 42%);
  pointer-events: none;
}
.hero--inner h1 { color: #fff; }
.hero--inner .hero__lead { color: var(--text-invert-soft); }
.hero__breadcrumb { position: relative; margin-bottom: var(--s-7); }

/* ---- Page hero (generic interior pages) ---------------------- */
.pagehero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-10));
  padding-bottom: var(--s-10);
  background: var(--c-cream);
  overflow: hidden;
}
.pagehero::before {
  content: "";
  position: absolute;
  top: -180px; right: -120px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(247,181,0,.18), transparent 62%);
}
.pagehero__inner { position: relative; max-width: 780px; }
.pagehero h1 { font-size: var(--fs-h1); margin-bottom: var(--s-5); }
.pagehero p { font-size: var(--fs-lead); max-width: 58ch; }
.pagehero .breadcrumb { margin-bottom: var(--s-6); }

/* ---- Split media section ------------------------------------ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.split--reverse .split__media { order: -1; }
/* These slots now carry real product screenshots and photography, so give them
   a hairline edge and a soft lift instead of letting them float on the page. */
.split__media img {
  display: block;
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-md, 0 18px 40px rgba(9,23,51,.10));
}
.section--navy .split__media img,
.section--ink .split__media img { border-color: var(--c-line-dark); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* ---- Problem statement block -------------------------------- */
.problem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.problem h2 { font-size: var(--fs-h2); }
@media (max-width: 900px) { .problem { grid-template-columns: 1fr; } }

/* ---- Capability grid (6 cards, inner page) ------------------- */
.capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.capabilities .card { padding: var(--s-7); }
.capabilities .card:nth-child(1) { grid-column: span 1; }
@media (max-width: 900px) { .capabilities { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .capabilities { grid-template-columns: 1fr; } }

/* ---- Tech stack layout --------------------------------------- */
.stackgrid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
}
@media (max-width: 1024px) { .stackgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .stackgrid { grid-template-columns: 1fr; } }

/* ---- FAQ layout ---------------------------------------------- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* ---- Contact form -------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-black);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--uno-yellow);
  box-shadow: 0 0 0 3px rgba(247,181,0,.18);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-note { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--c-slate); }

/* ---- Prose (legal pages) ------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s-9); }
.prose h3 { font-size: var(--fs-h4); margin-top: var(--s-7); }
.prose ul { margin: 0 0 var(--s-4); padding-left: var(--s-6); list-style: disc; }
.prose li { margin-bottom: var(--s-2); }
.prose a { color: var(--uno-yellow-600); font-weight: 600; text-decoration: underline; }

/* ---- 404 ------------------------------------------------------ */
.notfound { display: grid; place-items: center; min-height: 70vh; text-align: center; }
.notfound__code {
  font-size: clamp(5rem, 16vw, 11rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -0.05em;
  color: var(--uno-yellow);
}

/* Responsive audit: keep contact and integration columns readable on phones. */
.contact-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}
.strategies-integrations{grid-template-columns:220px minmax(0,1fr);gap:36px}
.strategies-integrations .integrations{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:stretch}
.strategies-integrations .integration{padding:18px 8px 16px;border:1px solid #ffffff16;border-radius:12px;background:linear-gradient(150deg,#ffffff07,#ffffff02);gap:13px;min-width:0}
.strategies-integrations .integration-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:#ffffff06;color:#b9d9f0}
.strategies-integrations .integration svg{width:28px;height:28px;color:inherit}
.strategies-integrations .integration-label{font-size:11px;line-height:1.45;font-weight:500;max-width:84px;color:#e3ebf2}
@media(max-width:1050px){.strategies-integrations{grid-template-columns:1fr;gap:22px}}
@media(max-width:760px){.strategies-integrations .integrations{grid-template-columns:repeat(4,minmax(0,1fr))}.strategies-integrations .integration{padding:15px 8px}}
@media(max-width:480px){.strategies-integrations .integrations{grid-template-columns:repeat(2,minmax(0,1fr))}.strategies-integrations .integration{flex-direction:row;gap:12px;padding:14px 12px;text-align:left}.strategies-integrations .integration-icon{width:36px;height:36px;flex-shrink:0;border-radius:9px}.strategies-integrations .integration svg{width:24px;height:24px}.strategies-integrations .integration:last-child{grid-column:1/-1}}
@media(max-width:860px){.contact-layout,.strategies-integrations{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.footer-office{grid-column:1/-1}}
/* Responsive audit: allow long project names to wrap inside cards. */
.work__name{overflow-wrap:anywhere}
/* Dedicated service artwork keeps all four cards on a consistent image ratio. */
.workflow-section{background:#f5f5f3}
/* Solution scope: readable interface crops with consistent image alignment. */
.scope-section .section-head{max-width:780px}
.scope-section__note{font-size:var(--fs-sm);color:var(--text-body);margin-bottom:0}
.scope-section .scope-card{padding:28px 26px 0}
.scope-card .card__index{font-size:28px;margin-bottom:14px}
.scope-card .card__title{font-size:21px;line-height:1.3}
.scope-card .card__text{margin-bottom:24px}
.scope-card__preview{margin:auto -26px 0;padding:0;background:#f3f6fa;border-top:1px solid var(--c-line)}
.scope-card__preview img{display:block;width:100%;height:auto;aspect-ratio:3/2}
@media(max-width:640px){.scope-section .scope-card{padding:24px 22px 0}.scope-card__preview{margin-inline:-22px}}
.workflow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.workflow-card{min-width:0;background:#fff;border:1px solid var(--c-line);border-radius:16px;overflow:hidden;box-shadow:0 4px 16px #10101005}
.workflow-card__link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.workflow-card__media{aspect-ratio:4/3;padding:14px;background:linear-gradient(135deg,#edf1f6,#fafbfc);border-bottom:1px solid var(--c-line);overflow:hidden}
.workflow-card__media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:6px}
.workflow-card__body{display:flex;flex-direction:column;flex:1;padding:22px}
.workflow-card__body h3{font-size:18px;line-height:1.35;letter-spacing:-.025em;margin:0 0 12px;color:var(--text-strong)}
.workflow-card__body p{font-size:14px;line-height:1.65;margin:0 0 24px;color:var(--text-body)}
.workflow-card__cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;font-size:12px;font-weight:600;color:var(--text-strong)}
.workflow-card__cta svg{width:28px;height:28px;padding:6px;border-radius:50%;background:var(--uno-yellow);flex-shrink:0}
.workflow-card:hover,.workflow-card:focus-within{border-color:var(--uno-yellow);box-shadow:0 10px 28px #1010100d}
.workflow-card__link:focus-visible{outline:3px solid var(--uno-yellow);outline-offset:-3px;border-radius:15px}
@media(max-width:1050px){.workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.workflow-grid{grid-template-columns:minmax(0,1fr);gap:20px}.workflow-card__body{padding:22px}}
.core-services .card__media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:12px}
@media(max-width:640px){.core-services>.card{padding:24px}.core-services .card__media{padding-top:24px}}

/* About: awards and accreditation */
.about-awards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.about-award{padding:24px 18px;border:1px solid #e8e5df;border-radius:var(--r-md);background:#fff;text-align:center}
.about-award__image{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.about-award__image img{display:block;width:100%;height:100%;object-fit:contain}
.about-award h3{font-size:16px;line-height:1.4;margin:0 0 8px}
.about-award p{font-size:13px;line-height:1.5;margin:0;color:var(--c-slate)}
.about-awards__footnote{font-size:var(--fs-sm);line-height:1.7;margin:24px 0 0;color:var(--c-slate)}
@media(max-width:1000px){.about-awards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.about-awards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.about-award{padding:20px 14px}.about-award__image{height:120px}}
@media(max-width:380px){.about-awards{grid-template-columns:1fr}}