/* ============================================================
   BROTHER — Crafting  (assembled from Figma, 1:1)
   Global reset + shared tokens; each section's CSS follows,
   scoped by its own class prefix.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Catamaran', Arial, sans-serif;
  background: #ffffff;
  color: #1d1d1d;
  -webkit-font-smoothing: antialiased;
}
img { display: block; border: 0; }
a { text-decoration: none; color: inherit; }

/* Fixed 1440px desktop canvas, centered (matches the Figma frame) */
.page {
  width: 1440px;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}
/* ================= HEADER ================= */
/* ===== Brother HEADER section ===== */
.s-header {
  position: relative;
  z-index: 5; /* keep header + nav drop-shadow above the hero below it */
  width: 100%;               /* full window width (blue bar + white nav bleed edge-to-edge) */
  font-family: 'Catamaran', Arial, sans-serif;
  box-sizing: border-box;
}
.s-header *,
.s-header *::before,
.s-header *::after {
  box-sizing: border-box;
}
.s-header img {
  display: block;
}

/* ---- Top utility bar (blue) ---- */
.s-header-top {
  background: #0d2ea0;
  width: 100%;
  box-shadow: 0px 3px 4px rgba(0, 71, 133, 0.2);
}
.s-header-inner {
  display: flex;
  align-items: center;
  max-width: 1440px;    /* content stays centered while the bar is full-width */
  margin: 0 auto;
  padding: 0 15px;
  min-height: 66px;
}

/* Logo */
.s-header-logo {
  display: block;
  padding-left: 20px;
  padding-top: 12px;
  padding-bottom: 4px;
  flex: 0 0 auto;
}
.s-header-logo img {
  width: 104px;
  height: 39px; /* native logo dimensions (viewBox 104.116 x 39.162) — no distortion */
}

/* Search */
.s-header-search {
  padding-left: 25px;
  flex: 0 0 auto;
}
.s-header-search-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 350px;
  max-width: 350px;
  padding: 2.571px 20px 2.571px 12px;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 30px;
}
.s-header-search-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.s-header-search-btn img {
  width: 16.5px;
  height: 17.638px;
}
.s-header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  border: 0;
  outline: none;
  background: transparent;
  color: #0d2ea0;
  font-family: 'Catamaran', Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
}
.s-header-search-input::placeholder {
  color: #0d2ea0;
  opacity: 1;
}
.s-header-search-clear {
  width: 30px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.s-header-search-clear img {
  width: 12px;
  height: 12.014px;
  opacity: 0.5;
}

/* Right utilities cluster */
.s-header-utils {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-right: 20px;
}
.s-header-flag {
  width: 33.333px;
  height: 20px;
  flex: 0 0 auto;
}

/* Language / region selects */
.s-header-select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  width: 67px;
  padding: 0 9px;
  border: 1px solid #ffffff;
  background: transparent;
  cursor: pointer;
  color: #ffffff;
  font-family: 'Catamaran', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.s-header-select--on {
  margin-left: 20px;
}
.s-header-select--en {
  margin-left: 12px;
}

/* Chevrons (point down) */
.s-header-chevron {
  width: 10.5px;
  height: 12px;
  transform: scaleY(-1);
  flex: 0 0 auto;
}

/* Sign In / Sign Up */
.s-header-signin {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-left: 34px;
  text-decoration: none;
  color: #ffffff;
  font-family: 'Catamaran', Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;
  text-transform: capitalize;
  white-space: nowrap;
  flex: 0 0 auto;
}
.s-header-signin img {
  width: 19px;
  height: 23px;
  flex: 0 0 auto;
}

/* Cart */
.s-header-cart {
  display: inline-flex;
  align-items: flex-end;
  gap: 8.5px;
  margin-left: 20px;
  text-decoration: none;
  flex: 0 0 auto;
}
.s-header-cart img {
  width: 22px;
  height: 20px;
  flex: 0 0 auto;
}
.s-header-cart-badge {
  width: 22.5px;
  height: 22.5px;
  border-radius: 20px;
  background: #1965e1;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.5px;
  text-align: center;
  flex: 0 0 auto;
}

/* ---- Primary navigation (white) ---- */
.s-header-nav {
  background: #ffffff;
  width: 100%;
  box-shadow: 0px 3px 8px 0px rgba(0, 71, 133, 0.2);
}
.s-header-navlist {
  display: flex;
  align-items: center;
  list-style: none;
  max-width: 1440px;    /* nav items stay centered while the white bar is full-width */
  margin: 0 auto;
  padding: 6px 15px 6px 40px;
}
.s-header-navitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 23.71px;
}
.s-header-navitem:first-child {
  padding-left: 0;
}
.s-header-navitem:last-child {
  padding-right: 0;
}
.s-header-navitem:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: #0d2ea0;
}
.s-header-navitem a {
  text-decoration: none;
  color: #0d2ea0;
  font-family: 'Catamaran', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  white-space: nowrap;
}
.s-header-chevron--nav {
  transform: scaleY(-1);
}

/* ================= HERO ================= */
/* ============================================================
   HERO section — 1440 x 379
   Prefix: .s-hero
   Fonts (Catamaran + Arial) are loaded globally.
   ============================================================ */

.s-hero {
  position: relative;
  width: 1440px;
  height: 379px;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.s-hero * {
  box-sizing: border-box;
}

/* ---- Decorative grey dot grid (rotated) ---- */
.s-hero__dots {
  position: absolute;
  left: -140.5px;
  top: -242.4px;
  width: 664px;
  height: 512px;
  transform: rotate(-20.43deg);
  transform-origin: center;
  background-image: radial-gradient(circle, #e2e2e2 4px, transparent 4px);
  background-size: 24px 24px;   /* 8px dot + 16px gap */
  background-position: 0 0;
  z-index: 5;   /* POINTS render above Vector 170 (white reveal shape, z-index 4) */
  pointer-events: none;
}

/* ---- Purple curved shape ---- */
.s-hero__vec169 {
  position: absolute;
  left: 339px;
  top: -89.13px;
  width: 369px;
  height: 470px;
  z-index: 2;
  pointer-events: none;
}
.s-hero__vec169 img {
  position: absolute;
  top: 14.07%;
  left: 0;
  width: 100%;
  height: 85.93%;
  display: block;
  max-width: none;
}

/* ---- Main photo (crops inside a fixed frame, bleeds right) ---- */
.s-hero__photo {
  position: absolute;
  left: 475px;
  top: -0.57px;
  width: 1016px;
  height: 380px;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.s-hero__photo img {
  position: absolute;
  left: 0;
  top: -13.31%;
  width: 100%;
  height: 113.43%;
  display: block;
  max-width: none;
}

/* ---- White curved reveal shape ---- */
.s-hero__vec170 {
  position: absolute;
  left: 369.96px;
  top: -60.79px;
  width: 331.039px;
  height: 433.657px;
  z-index: 4;
  pointer-events: none;
}
.s-hero__vec170 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}

/* ---- Blue swirl line (crops inside a fixed frame) ---- */
.s-hero__blueline {
  position: absolute;
  left: 138px;
  top: 2px;
  width: 484px;
  height: 381px;
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
}
.s-hero__blueline img {
  position: absolute;
  left: -0.06%;
  top: -32.55%;
  width: 167.69%;
  height: 148.03%;
  display: block;
  max-width: none;
}

/* ---- Decorative stars ---- */
.s-hero__star {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 7;
  pointer-events: none;
}
.s-hero__star img {
  display: block;
  max-width: none;
}
.s-hero__star--small {
  left: 417px;
  top: 212.87px;
  width: 24.526px;
  height: 29.624px;
}
.s-hero__star--small img {
  width: 20.611px;
  height: 26.739px;
  transform: rotate(-8.96deg);
}
.s-hero__star--big {
  left: 615px;
  top: 37.57px;
  width: 43.119px;
  height: 52.082px;
}
.s-hero__star--big img {
  width: 36.237px;
  height: 47.01px;
  transform: rotate(-8.96deg);
}

/* ---- Text + Button (in-flow, vertically centered) ---- */
.s-hero__content {
  position: relative;
  z-index: 6;
  margin-left: 24px;         /* matches the design's px-24 left inset */
  width: 457px;
  display: flex;
  align-items: center;
}
.s-hero__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16.046px;
  width: 446px;
}

.s-hero__headline {
  margin: 0;
  font-family: 'Catamaran', Arial, sans-serif;
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  color: #1a65e2;
  word-break: break-word;
}
.s-hero__headline span {
  display: block;
}

.s-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 26px;
  background: #d71a71;
  color: #ffffff;
  font-family: 'Catamaran', Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  border-radius: 0;      /* square corners */
  cursor: pointer;
}

/* ================= CREATIVITY ================= */
/* ===========================================================
   Creativity From A to Z — section (Figma node 1382:4622)
   1440 x ~509px. All selectors prefixed with .s-creativity
   Fonts (Catamaran, Arial) are loaded globally.
   =========================================================== */

.s-creativity {
  box-sizing: border-box;
  position: relative;
  width: 1440px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  overflow: hidden; /* clips the decorative swoosh that extends above */
  font-family: "Catamaran", Arial, sans-serif;
  background: #ffffff;
}

.s-creativity *,
.s-creativity *::before,
.s-creativity *::after {
  box-sizing: border-box;
}

/* ---------- Header ---------- */
.s-creativity__header {
  position: relative;
  width: 100%;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.s-creativity__header-row {
  position: relative;
  z-index: 2;
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.s-creativity__title {
  margin: 0;
  width: 781px;
  font-weight: 700;              /* Catamaran Bold */
  font-size: 34px;
  line-height: 1;                /* leading-none */
  color: #1a65e2;
  word-break: break-word;
}

.s-creativity__viewall {
  flex-shrink: 0;
  width: 109px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;              /* Catamaran Medium */
  font-size: 28px;
  line-height: 1;
  color: #333333;
  white-space: nowrap;
  text-decoration: none;
}

.s-creativity__subtitle {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 800px;
  font-weight: 400;              /* Catamaran Regular */
  font-size: 20px;
  line-height: 1.1;
  color: #020920;
  word-break: break-word;
}

/* ---------- Decorative blue swoosh ---------- */
.s-creativity__swoosh {
  position: absolute;
  z-index: 1;
  left: 698.24px;
  top: -226.44px;
  width: 637.701px;
  height: 553.199px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.s-creativity__swoosh-rot {
  transform: rotate(23.73deg);
  flex: none;
}

.s-creativity__swoosh-clip {
  position: relative;
  width: 534.181px;
  height: 369.46px;
  overflow: hidden;
}

.s-creativity__swoosh-clip img {
  position: absolute;
  left: -48.37%;
  top: -32.43%;
  width: 147.33%;
  height: 148.03%;
  max-width: none;
  display: block;
}

/* ---------- Carousel ---------- */
.s-creativity__carousel {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 1400.527px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.s-creativity__track {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

/* ---------- Card ---------- */
.s-creativity__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  width: 217px;
}

.s-creativity__thumb {
  position: relative;
  width: 100%;
  height: 217px;
  overflow: hidden;
}

.s-creativity__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-creativity__meta {
  width: 100%;
  background: #e5ecf7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 14px;
}

.s-creativity__cat {
  margin: 0;
  width: 100%;
  font-weight: 400;              /* Catamaran Regular */
  font-size: 16px;
  line-height: 1;                /* leading-none */
  color: #333333;
  word-break: break-word;
}

.s-creativity__name {
  margin: 0;
  width: 100%;
  font-weight: 700;              /* Catamaran Bold */
  font-size: 18px;
  line-height: 1;
  color: #1a65e2;
  word-break: break-word;
}

/* ---------- Arrows ---------- */
.s-creativity__arrow {
  flex-shrink: 0;
  width: 53.263px;
  height: 53.263px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #ffffff;
  border: 0.918px solid rgba(25, 101, 225, 0.3);
  border-radius: 100px;
  cursor: pointer;
}

.s-creativity__arrow img {
  width: 15.63px;
  height: 25.346px;
  display: block;
}

.s-creativity__arrow--right img {
  transform: scaleX(-1);         /* flip left chevron into a right chevron */
}

/* ================= CATEGORIES ================= */
/* ===== Section: Explore What You Love To Make (slug: categories) ===== */
.s-categories {
  box-sizing: border-box;
  width: 1440px;
  margin: 0 auto;
  padding: 40px 20px;
  background: #ffffff;
  font-family: 'Catamaran', Arial, sans-serif;
}
.s-categories *,
.s-categories *::before,
.s-categories *::after { box-sizing: border-box; }

/* ---------- Header ---------- */
.s-categories .cat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 45px;
}
.s-categories .cat-header-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1149px;
}
.s-categories .cat-title {
  margin: 0;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: #1a65e2;
}
.s-categories .cat-desc {
  margin: 0;
  max-width: 800px;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
  color: #000000;
}

/* WIREFRAME annotation badge */
.s-categories .cat-badge {
  position: relative;
  flex: 0 0 auto;
  width: 253px;
  height: 76px;
  margin-top: 19px;
}
.s-categories .cat-badge-main {
  position: absolute;
  left: 55px;
  top: 0;
  padding: 10px;
  background: #ffd000;
  color: #000000;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
}
.s-categories .cat-badge-sub {
  position: absolute;
  left: 0;
  top: 37px;
  padding: 10px;
  background: #ffd000;
  color: #000000;
  font-weight: 700;
  font-size: 19px;
  line-height: 0.98;
  white-space: nowrap;
}

/* ---------- Cards grid (3 x 2) ---------- */
.s-categories .cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 454px);
  column-gap: 19px;
  row-gap: 45px;
  justify-content: center;
}
.s-categories .cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 454px;
}
.s-categories .cat-card-title {
  margin: 0;
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: #1a65e2;
}
.s-categories .cat-card-img {
  width: 454px;
  height: 140px;
  overflow: hidden;
}
.s-categories .cat-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.s-categories .cat-card-body {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: #3f3f3f;
}

/* ---------- Buttons ---------- */
.s-categories .cat-card-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
}
.s-categories .cat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 16px;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.s-categories .cat-btn--primary {
  flex: 0 0 215px;
  width: 215px;
  background: #002b92;
  color: #ffffff;
  border: 1px solid #002b92;
}
.s-categories .cat-btn--outline {
  flex: 1 1 0;
  min-width: 0;
  background: #ffffff;
  color: #002b92;
  border: 1px solid #002b92;
}
.s-categories .cat-btn--full {
  flex: 1 1 0;
  width: 100%;
}

/* ================= OPTIN ================= */
/* ==========================================================================
   Section: Join the Brother Care Program — opt-in form
   Slug: optin  |  Source Figma node 1382:5442  |  1440 x 662
   ========================================================================== */

.s-optin {
  box-sizing: border-box;
  width: 1440px;
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Catamaran', Arial, sans-serif;
}

.s-optin *,
.s-optin *::before,
.s-optin *::after {
  box-sizing: border-box;
}

.s-optin__card {
  width: 1400px;
  display: flex;
  align-items: center;
  gap: 138px;
  padding: 40px 142px;
  background: rgba(228, 239, 255, 0.5);
}

/* ---------- Media / image group ---------- */
.s-optin__media {
  position: relative;
  flex-shrink: 0;
  width: 457px;
  height: 502px;
}

.s-optin__photo {
  position: absolute;
  left: 27px;
  top: 31px;
  width: 409px;
  height: 444px;
  overflow: hidden;
}

.s-optin__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-optin__tape {
  position: absolute;
  display: block;
}

/* Yellow tape — top-left corner of the photo */
.s-optin__tape--yellow {
  left: 93.94px;   /* centre of 187.883px box */
  top: 34.11px;    /* centre of 68.22px box */
  width: 184.601px;
  height: 56.282px;
  transform: translate(-50%, -50%) rotate(-3.75deg);
}

/* Blue tape — lower edge of the photo */
.s-optin__tape--blue {
  left: 388px;     /* 319 + 138.004/2 */
  top: 474.5px;    /* 447 + 55.079/2 */
  width: 135.871px;
  height: 48.777px;
  transform: translate(-50%, -50%) rotate(2.68deg);
}

/* ---------- Form ---------- */
.s-optin__form {
  flex-shrink: 0;
  width: 571px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin: 0;
}

.s-optin__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.s-optin__titlerow {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Hand-drawn orange oval doodle — crop of optin-icon.png */
.s-optin__doodle {
  flex-shrink: 0;
  width: 46.722px;
  height: 41.161px;
  opacity: 0.9;
  transform: rotate(3.57deg);
  background-image: url('assets/optin-icon.png');
  background-repeat: no-repeat;
  background-size: 456px 1214px;
  background-position: -217px -913px;
}

.s-optin__title {
  margin: 0;
  font-weight: 700;
  font-size: 34px;
  line-height: 0.98;
  color: #1A65E2;
  white-space: nowrap;
}

.s-optin__desc {
  margin: 0;
  width: 562px;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: #3F3F3F;
  mix-blend-mode: multiply;
}

.s-optin__fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s-optin__row {
  display: flex;
  gap: 28px;
}

.s-optin__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s-optin__label {
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: rgba(29, 29, 29, 0.6);
  mix-blend-mode: multiply;
  white-space: nowrap;
}

.s-optin__input {
  width: 272px;
  height: 34px;
  padding: 4px 8px;
  background: #ffffff;
  border: 1px solid rgba(29, 29, 29, 0.6);
  border-radius: 0;
  font-family: inherit;
  font-size: 16px;
  color: #1D1D1D;
  outline: none;
}

.s-optin__input:focus {
  border-color: #1A65E2;
}

.s-optin__field--message {
  width: 100%;
  height: 139px;
  gap: 4px;
}

.s-optin__textarea {
  width: 100%;
  height: auto;
  flex: 1 0 0;
  min-height: 0;
  padding: 8px;
  resize: none;
}

/* ---------- Submit button ---------- */
.s-optin__submit {
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #D71A71;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: #ffffff;
}

/* ================= BTAG ================= */
.s-btag {
  position: relative;
  box-sizing: border-box;
  width: 1440px;
  height: 577px;
  margin: 0 auto;
  overflow: hidden;
  background: #ffffff;
  font-family: 'Catamaran', Arial, sans-serif;
}

.s-btag * {
  box-sizing: border-box;
}

/* Decorative dot grid (Figma "Points" — #e2e2e2 dots, 10px, 24px spacing, rotated) */
.s-btag__dots {
  position: absolute;
  left: 20px;
  top: 92px;
  width: 700px;
  height: 620px;
  transform: rotate(20deg);
  transform-origin: center center;
  background-image: radial-gradient(circle, #e2e2e2 4.5px, transparent 5px);
  background-size: 24px 24px;
  background-position: 0 0;
  pointer-events: none;
  z-index: 0;
}

.s-btag__image {
  position: absolute;
  left: 139px;
  top: 40px;
  width: 689px;
  height: 377px;
  object-fit: cover;
  z-index: 1;
}

.s-btag__content {
  position: absolute;
  left: 969px;
  top: 40px;
  width: 331px;
  z-index: 2;
}

.s-btag__heading {
  margin: 0;
  font-weight: 700;
  font-size: 34px;
  line-height: 0.98;
  color: #1a65e2;
}

.s-btag__body {
  margin: 26px 0 0 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: #3f3f3f;
}

.s-btag__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  padding: 16px;
  background: #d71a71;
  color: #ffffff;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* ================= ARTSPIRA ================= */
/* ==========================================================================
   Artspira "Make it yours" section
   Figma node 1382:6107 — 1440 (frame 1442) x 453.94 px
   ========================================================================== */

.s-artspira {
  position: relative;
  box-sizing: border-box;
  width: 1440px;
  height: 454px;
  display: flex;
  align-items: center;
  padding: 0 135px;
  background: #fff4db;
  overflow: visible; /* phone + squiggle overflow above the section */
  font-family: 'Catamaran', Arial, sans-serif;
}

.s-artspira *,
.s-artspira *::before,
.s-artspira *::after {
  box-sizing: border-box;
}

/* --- Decorative blue squiggle ------------------------------------------- */
.s-artspira__blueline {
  position: absolute;
  left: 314px;
  top: -140.51px;
  width: 811px;
  height: 564px;
  z-index: 0;
  pointer-events: none;
}
.s-artspira__blueline img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Phone mockup ------------------------------------------------------- */
.s-artspira__phone {
  position: absolute;
  left: 873px;
  top: -98.51px;
  width: 418px;
  height: 552px;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.s-artspira__phone img {
  position: absolute;
  left: -45.79%;
  top: -1.88%;
  width: 177.66%;
  height: 101.9%;
  max-width: none;
  display: block;
}

/* --- Content column ----------------------------------------------------- */
.s-artspira__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 575px;
  padding: 40px 0;
}

/* Eyebrow logo */
.s-artspira__eyebrow {
  width: 116px;
  height: 32px;
  object-fit: contain;
  display: block;
}

/* Heading row (oval + heading) */
.s-artspira__heading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px;
}

/* Hand-drawn pink oval — exact crop from the source sprite */
.s-artspira__oval {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52.645px;
  height: 41.288px;
  flex: none;
}
.s-artspira__oval-inner {
  position: relative;
  display: block;
  width: 51.947px;
  height: 40.386px;
  overflow: hidden;
  transform: rotate(1deg);
}
.s-artspira__oval-inner img {
  position: absolute;
  left: -532.73%;
  top: -2657.34%;
  width: 1095.58%;
  height: 3531.31%;
  max-width: none;
  display: block;
}

.s-artspira__heading {
  margin: 0;
  font-family: 'Catamaran', Arial, sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 0.98;
  color: #1d1d1d;
  white-space: nowrap;
}

/* Body copy */
.s-artspira__body {
  margin: 0;
  width: 575px;
  font-family: 'Albert Sans', Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: #3f3f3f;
}

/* CTA button — square, no radius */
.s-artspira__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #d71a71;
  color: #ffffff;
  font-family: 'Catamaran', Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

/* Store badges */
.s-artspira__badges {
  display: flex;
  align-items: center;
  gap: 2.493px;
}
.s-artspira__badge {
  display: block;
}
.s-artspira__badge img {
  display: block;
  object-fit: contain;
}
.s-artspira__badge--apple img {
  width: 113.965px;
  height: 33.809px;
}
.s-artspira__badge--google img {
  width: 105.542px;
  height: 36.94px;
}

/* Fine print */
.s-artspira__fineprint {
  margin: 0;
  width: 575px;
  font-family: 'Albert Sans', Arial, sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  color: rgba(29, 29, 29, 0.6);
}

/* ================= FOOTER ================= */
/* ===== Brother FOOTER section ===== */
.s-footer {
  width: 1440px;
  margin: 0 auto;
  font-family: "Catamaran", sans-serif;
  color: #ffffff;
  box-sizing: border-box;
}
.s-footer *,
.s-footer *::before,
.s-footer *::after { box-sizing: border-box; }

.s-footer a { text-decoration: none; color: inherit; }

/* ---- CTA bar ---- */
.s-footer__cta {
  background: #1965e1;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-footer__cta-inner {
  flex: 1 0 0;
  max-width: 1440px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}
.s-footer__cta-half {
  flex: 1 0 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-footer__cta-half--border {
  border-left: 0.569px solid #ffffff;
}
.s-footer__cta-half a {
  font-weight: 300;
  font-size: 24px;
  line-height: 34.29px;
  color: #f5f6f8;
  text-align: center;
}

/* ---- Body ---- */
.s-footer__body {
  background: #0d2ea0;
  padding-bottom: 0;
}
.s-footer__cols {
  margin: 0 15px;
  display: flex;
  align-items: flex-start;
}

.s-footer__col1 { width: 352.5px; padding-left: 30px; }
.s-footer__col-mid { width: 705px; padding-left: 15px; display: flex; align-items: flex-start; }
.s-footer__subcol { width: 337.5px; padding: 0 15px 0 30px; }
.s-footer__col3 { width: 352.5px; padding: 0 15px 0 30px; }

/* headings */
.s-footer__head {
  margin: 0;
  padding: 20px 0 5px;
  font-weight: 700;
  font-size: 20px;
  line-height: 28.571px;
  color: #54bfd4;
}

/* link lists */
.s-footer__list {
  list-style: none;
  margin: 0;
  padding: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.s-footer__list li { margin: 0; }
.s-footer__list a,
.s-footer__item {
  font-weight: 300;
  font-size: 16px;
  line-height: 16px;
  color: #ffffff;
}
/* non-link sub-headings inside a list */
.s-footer__sub {
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #ffffff;
}
.s-footer__sub--gap { margin-top: 10px; }

/* ---- Social column ---- */
.s-footer__social-block {
  display: flex;
  flex-direction: column;
}
.s-footer__socials {
  display: flex;
  align-items: flex-end;
  gap: 14.5px;
  padding: 20px 0 10px;
}
.s-footer__socials a { display: inline-flex; }
.s-footer__socials svg { display: block; width: 39px; height: 39px; }

/* region row */
.s-footer__region {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12.29px 0 8.32px;
}
.s-footer__region a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22.86px;
  color: #54bfd4;
}
.s-footer__region .s-footer__sep {
  font-weight: 500;
  font-size: 16px;
  line-height: 22.86px;
  color: #54bfd4;
}
.s-footer__flag { width: 37px; height: 37px; object-fit: contain; }
.s-footer__extlink { width: 15px; height: 15px; object-fit: contain; }

.s-footer__apps { margin-top: 67.49px; }

/* ---- Legal bar ---- */
.s-footer__legal {
  margin: 0 15px;
  padding-top: 34px;
  display: flex;
  justify-content: center;
}
.s-footer__legal-inner {
  display: flex;
  justify-content: center;
  gap: 3px;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 29.96px;
  color: #ffffff;
  white-space: nowrap;
}

/* ---- Copyright bar ---- */
.s-footer__copy {
  background: #0d2ea0;
  padding: 10px 0 54px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 30px;
  color: #ffffff;
}
/* ============================================================
   BUTTON HOVER STATES — invert on hover (per Figma button spec)
   Solid fill  -> white bg + coloured border + coloured text
   Outline     -> solid fill + white text
   ============================================================ */

/* Magenta primary CTAs (hero, opt-in, Btag, Artspira) */
.s-hero__button,
.s-optin__submit,
.s-btag__button,
.s-artspira__button {
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.s-hero__button:hover,
.s-optin__submit:hover,
.s-btag__button:hover,
.s-artspira__button:hover {
  background: #ffffff;
  color: #d71a71;
  box-shadow: inset 0 0 0 2px #d71a71;
}

/* Categories — blue primary (Explore Projects / Explore the App) */
.s-categories .cat-btn--primary {
  transition: background-color .18s ease, color .18s ease;
}
.s-categories .cat-btn--primary:hover {
  background: #ffffff;
  color: #002b92;
}

/* Categories — outline (Shop) */
.s-categories .cat-btn--outline {
  transition: background-color .18s ease, color .18s ease;
}
.s-categories .cat-btn--outline:hover {
  background: #002b92;
  color: #ffffff;
}

/* ---- Carousel arrows: invert on hover (white->blue circle, chevron->white) ---- */
.s-creativity__arrow { transition: background-color .18s ease, border-color .18s ease; }
.s-creativity__arrow img { transition: filter .18s ease; }
.s-creativity__arrow:hover { background: #0d2ea0; border-color: #0d2ea0; }
.s-creativity__arrow:hover img { filter: brightness(0) invert(1); }

/* ---- "View All >": grey -> blue on hover ---- */
.s-creativity__viewall { transition: color .18s ease; }
.s-creativity__viewall:hover { color: #1a65e2; }

/* ---- Clickable project card (links to project page) ---- */
.s-creativity__link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.s-creativity__link:hover .s-creativity__name { text-decoration: underline; }

/* ================= FPO tags (For Placement Only) — home page ================= */
.s-creativity__thumb,
.s-categories .cat-card-img { position: relative; }
img.fpo-tag {
  /* !important beats higher-specificity container rules like
     `.s-categories .cat-card-img img { width:100%;height:100% }` */
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  bottom: 8px !important;
  right: 8px !important;
  width: 63px !important;
  height: 47px !important;
  object-fit: contain !important;
  z-index: 6;
  pointer-events: none;
  display: block;
}