/* Page-wide colour direction: warm paper, deep green typography, and the full 16-colour product family as the recurring signal. */
:root{
  --family-ivory:#f8f4e9;
  --family-ivory-soft:#fbf8ef;
  --family-mint-mist:#e3efe8;
  --family-mint-deep:#d9eae2;
  --family-forest:#124b45;
  --family-butter:#f5ebcb;
  --mamoru-four-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='10' viewBox='0 0 52 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23f3b8c8'/%3E%3Ccircle cx='19' cy='5' r='5' fill='%23f1d35c'/%3E%3Ccircle cx='33' cy='5' r='5' fill='%2379d5ca'/%3E%3Ccircle cx='47' cy='5' r='5' fill='%2370a8df'/%3E%3C/svg%3E");
  --mamoru-four-dots-small:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f3b8c8'/%3E%3Ccircle cx='14.7' cy='4' r='4' fill='%23f1d35c'/%3E%3Ccircle cx='25.3' cy='4' r='4' fill='%2379d5ca'/%3E%3Ccircle cx='36' cy='4' r='4' fill='%2370a8df'/%3E%3C/svg%3E");
  --mamoru-pastel-field:
    radial-gradient(circle at 10% 18%,rgba(127,200,223,.22),transparent 27%),
    radial-gradient(circle at 88% 16%,rgba(230,173,188,.22),transparent 29%),
    radial-gradient(circle at 70% 88%,rgba(180,169,206,.16),transparent 28%),
    radial-gradient(circle at 28% 82%,rgba(233,223,161,.18),transparent 27%),
    #f8f4e9;
}

html,body{background:var(--family-ivory)}

/* Let the warm-white FV dissolve into the child-led opening scene. */
.story.story-fv-aligned{
  background:
    radial-gradient(circle at 88% 18%,rgba(230,173,188,.13),transparent 29%),
    radial-gradient(circle at 64% 88%,rgba(127,200,223,.15),transparent 32%),
    linear-gradient(180deg,var(--family-ivory) 0%,#f4f2e8 48%,#e6efe8 100%);
}
.story-fv-aligned::before{
  background:linear-gradient(90deg,#f8f4e9 0%,rgba(248,244,233,.99) 31%,rgba(248,244,233,.9) 42%,rgba(248,244,233,.32) 54%,rgba(248,244,233,0) 66%);
}

/* The editorial chapters use the same bright, multi-colour atmosphere as the FV. */
.field-voice,.field-voice-canvas{background:var(--family-ivory)}
.field-voice-canvas::before{
  background:
    radial-gradient(circle at 24% 22%,rgba(230,173,188,.24),transparent 31%),
    radial-gradient(circle at 76% 78%,rgba(127,200,223,.28),transparent 35%),
    linear-gradient(155deg,#f6eddf 0%,#e8eef0 58%,#eee8f2 100%);
}
.evidence{
  background:
    radial-gradient(circle at 10% 82%,rgba(230,173,188,.14),transparent 30%),
    radial-gradient(circle at 91% 12%,rgba(127,200,223,.15),transparent 32%),
    radial-gradient(circle at 72% 31%,rgba(255,252,243,.98) 0 7%,rgba(255,252,243,.7) 18%,transparent 39%),
    linear-gradient(125deg,#e3eee5 0%,#f4efda 48%,#d9eae2 100%);
}
.flow-bridge,.flow-bridge-to-research,.flow-bridge-to-structure{
  background:
    radial-gradient(circle at 8% 50%,rgba(233,223,161,.18),transparent 24%),
    radial-gradient(circle at 92% 50%,rgba(127,200,223,.14),transparent 25%),
    #f7f3e8;
}

/* Research stays serious through typography and structure, not a heavy green wall. */
.research{
  color:var(--family-forest);
  background:
    radial-gradient(circle at 8% 19%,rgba(127,200,223,.25),transparent 28%),
    radial-gradient(circle at 91% 16%,rgba(230,173,188,.23),transparent 29%),
    radial-gradient(circle at 77% 78%,rgba(180,169,206,.18),transparent 28%),
    radial-gradient(circle at 22% 86%,rgba(233,223,161,.21),transparent 29%),
    linear-gradient(145deg,#faf7ed 0%,#f5f1e7 46%,#f7f4ed 100%);
}
.research::before{
  background-image:url('../assets/generated/web/textures/05-award-ivory-paper.webp');
  opacity:.14;
  mix-blend-mode:multiply;
}
.research-top,
.research-intro,
.research-process p,
.research-foot,
.research-foot a{color:var(--family-forest)}
.research .cross{color:#f18e36}
.research-visual>span{color:rgba(18,75,69,.055)}
.research-visual>img{filter:drop-shadow(20px 30px 20px rgba(9,45,42,.16))}
.research-process article{border-top-color:rgba(18,75,69,.24)}
.research-process article:nth-child(1)>span{color:#247ac3}
.research-process article:nth-child(2)>span{color:#e96080}
.research-process article:nth-child(3)>span{color:#318b5b}
.research-partner-lockup{
  background:
    radial-gradient(circle at 12% 16%,rgba(127,200,223,.12),transparent 30%),
    radial-gradient(circle at 88% 78%,rgba(230,173,188,.13),transparent 30%),
    repeating-linear-gradient(0deg,rgba(16,75,67,.022) 0 1px,transparent 1px 4px),
    #fffdf7;
  filter:drop-shadow(13px 11px 0 rgba(127,200,223,.24));
}
.research-partner-lockup::after{
  left:50%;right:auto;bottom:13px;width:52px;height:10px;
  background:var(--mamoru-four-dots) center/52px 10px no-repeat;
  opacity:1;transform:translateX(-50%);
}
.flow-bridge-on-dark{
  color:var(--family-forest);
  background:
    radial-gradient(circle at 15% 50%,rgba(230,173,188,.15),transparent 24%),
    radial-gradient(circle at 84% 50%,rgba(127,200,223,.17),transparent 26%),
    #f7f3e8;
}
.flow-bridge-on-dark .flow-bridge-inner{border-color:rgba(18,75,69,.22)}
.flow-bridge-on-dark .flow-bridge-inner>span{color:rgba(18,75,69,.62)}
.flow-bridge-on-dark .flow-bridge-inner>p{border-color:rgba(18,75,69,.25)}
.developer{background:var(--family-ivory)}
.structure{
  background:
    radial-gradient(circle at 12% 15%,rgba(180,169,206,.14),transparent 26%),
    radial-gradient(circle at 87% 72%,rgba(127,200,223,.16),transparent 29%),
    #faf7ee;
}
.flow-bridge-to-award{background:#f1ecdf}

/* Award and comfort chapters share the same warm exhibition paper. */
.b-award{background:var(--family-ivory-soft)}
.b-award .b-award-display{background:#f3eee2}
.b-award .b-award-marks{background:#fffdf7}
.flow-bridge-to-comfort{
  background:
    radial-gradient(circle at 82% 45%,rgba(230,173,188,.15),transparent 28%),
    linear-gradient(100deg,#f8f3e8,#e9eff0 54%,#eee9f1);
}
.comfort{
  background:
    radial-gradient(circle at 8% 12%,rgba(233,223,161,.17),transparent 26%),
    radial-gradient(circle at 92% 78%,rgba(180,169,206,.14),transparent 27%),
    #faf7ee;
}
.wear-banner{background:#f3f0e7}
.wear-banner>p{background:linear-gradient(transparent,rgba(243,240,231,.92))}

/* The lineup is the clearest expression of all 16 colours, so its surface stays light. */
.colors{
  background-color:var(--family-ivory-soft);
  background-image:
    radial-gradient(circle at 9% 17%,rgba(127,200,223,.25),transparent 29%),
    radial-gradient(circle at 89% 18%,rgba(230,173,188,.28),transparent 29%),
    radial-gradient(circle at 53% 9%,rgba(233,223,161,.25),transparent 26%),
    radial-gradient(circle at 78% 86%,rgba(180,169,206,.21),transparent 29%),
    radial-gradient(circle at 22% 84%,rgba(159,203,195,.22),transparent 31%),
    linear-gradient(145deg,#fbf8ef 0%,#f7f3eb 52%,#f8f5ee 100%);
}
.colors::before{
  background-image:url('../assets/generated/web/textures/05-award-ivory-paper.webp');
  opacity:.12;
  mix-blend-mode:multiply;
}
.faq{background:var(--family-ivory-soft)}
.contact{
  background-color:#f5f2e9;
  background-image:
    radial-gradient(circle at 15% 30%,rgba(127,200,223,.25),transparent 33%),
    radial-gradient(circle at 82% 24%,rgba(230,173,188,.22),transparent 31%),
    radial-gradient(circle at 50% 16%,rgba(255,252,243,.62),transparent 38%),
    linear-gradient(145deg,#e4efe9 0%,#f4edcf 52%,#e5e7ef 100%);
}
.contact::before{opacity:.18;mix-blend-mode:luminosity}
footer{background:var(--family-ivory)}

/* Four quiet colour points are the common accent throughout the page. */
.progress{background:#70a8df;box-shadow:0 0 10px rgba(112,168,223,.26)}
.selected-family-hero .luxe-rule,
.story-fv-aligned .adventure-rule{
  width:52px;height:10px;border-radius:0;
  background:var(--mamoru-four-dots) center/52px 10px no-repeat;
}
.developer-statement::before,
.field-voice-inner::before,
.field-demand-label::before,
.field-origin-label::after{
  width:52px;height:10px;border-radius:0;
  background:var(--mamoru-four-dots) center/52px 10px no-repeat;
  box-shadow:none;transform:none;
}
.field-demand-label::before,.field-origin-label::after{
  flex:0 0 40px;width:40px;height:8px;
  background-image:var(--mamoru-four-dots-small);
  background-size:40px 8px;
}
.field-voice-inner::before{left:var(--pad)}

@media(max-width:760px){
  .story-fv-aligned::before{
    background:linear-gradient(180deg,#f8f4e9 0%,rgba(248,244,233,.99) 39%,rgba(248,244,233,.9) 45%,rgba(248,244,233,.3) 51%,rgba(248,244,233,0) 58%);
  }
  .field-voice-canvas::before{
    background:
      radial-gradient(circle at 16% 18%,rgba(230,173,188,.23),transparent 31%),
      radial-gradient(circle at 82% 76%,rgba(127,200,223,.25),transparent 34%),
      linear-gradient(155deg,#f7eee1 0%,#ebeff0 58%,#eee9f2 100%);
  }
  .colors{
    background-image:
      radial-gradient(circle at 16% 8%,rgba(127,200,223,.23),transparent 28%),
      radial-gradient(circle at 86% 26%,rgba(230,173,188,.24),transparent 30%),
      radial-gradient(circle at 42% 4%,rgba(233,223,161,.22),transparent 26%),
      radial-gradient(circle at 18% 88%,rgba(159,203,195,.2),transparent 29%),
      linear-gradient(160deg,#fbf8ef 0%,#f6f1e8 100%);
  }
  .research-intro{border-top-color:rgba(18,75,69,.24)}
  .research-partner-lockup{filter:drop-shadow(7px 6px 0 rgba(127,200,223,.22))}
  .research-partner-lockup::after{left:50%;right:auto;bottom:9px}
  .developer-statement::before{width:52px;height:10px;margin-bottom:20px}
  .field-voice-inner::before{left:var(--pad);top:-19px;width:40px;height:8px;background-image:var(--mamoru-four-dots-small);background-size:40px 8px}
  .field-demand-label::before{width:40px;height:8px}
  .contact::before{opacity:.14}
}