/*==========================================================
    Base Section
==========================================================*/

section {
    position: relative;
    isolation: isolate;
    
}

.section {
    padding-block: var(--section-padding-standard);
        /* Shared view timeline for any child animation in this section. */
        view-timeline: --section-view block;
}

.section--temperature{
    view-timeline: --section-view block;
    animation-range: entry 20% exit 80%;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --section-view;
}
.section--temperature-hot{
    animation-name: none;
    --temperature-col-h: 137;
}
.section--temperature-warm{
    animation-name: none;
    --temperature-col-h: 80;
}
.section--temperature-cold{
    animation-name: none;
    --temperature-col-h: 230;
}
.section--temperature-brand-hot{
    animation-name: ellipse-colour-change-brand-hot;
}
.section--temperature-hot-warm{
    animation-name: ellipse-colour-change-hot-warm;
}
.section--temperature-warm-cold{
    animation-name: ellipse-colour-change-warm-cold;
}
.section--temperature-brand-brand-hot{
    animation-name: ellipse-colour-change-brand-brand-hot;
}
.section--temperature-brand-hot-warm{
    animation-name: ellipse-colour-change-brand-hot-warm;
}
.section--temperature-hot-warm-cold{
    animation-name: ellipse-colour-change-hot-warm-cold;
}

@keyframes ellipse-colour-change-brand-hot {
    0%   { --temperature-col-h: 137;}
    40%  { --temperature-col-h: 12;}
    60%  { --temperature-col-h: 12;}
    100% { --temperature-col-h: 12;}
  }
@keyframes ellipse-colour-change-hot-warm {
    0%   { --temperature-col-h: 12;}
    40%  { --temperature-col-h: 80;}
    60%  { --temperature-col-h: 80;}
    100% { --temperature-col-h: 80;}
  }
@keyframes ellipse-colour-change-warm-cold {
    0%   { --temperature-col-h: 80;}
    40%  { --temperature-col-h: 230;}
    60%  { --temperature-col-h: 230;}
    100% { --temperature-col-h: 230;}
  }

@keyframes ellipse-colour-change-brand-brand-hot {
    0%   { --temperature-col-h: 137;}
    40%  { --temperature-col-h: 137;}
    60%  { --temperature-col-h: 137;}
    90% { --temperature-col-h: 12;}
    100% { --temperature-col-h: 12;}
  }

@keyframes ellipse-colour-change-brand-hot-warm {
    0%   { --temperature-col-h: 137;}
    40%  { --temperature-col-h: 12;}
    60%  { --temperature-col-h: 12;}
    90% { --temperature-col-h: 80;}
    100% { --temperature-col-h: 80;}
  }
@keyframes ellipse-colour-change-hot-warm-cold {
    0%   { --temperature-col-h: 12;}
    40%  { --temperature-col-h: 80;}
    60%  { --temperature-col-h: 80;}
    90% { --temperature-col-h: 230;}
    100% { --temperature-col-h: 230;}
  }

@keyframes ellipse-section-h2-scroll-reveal {
    from {
        opacity: 0.8;
        transform: translate3d(0, -70px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (width <= 1024px) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .section h2.can-animate {
            animation-name: ellipse-section-h2-scroll-reveal;
            animation-duration: auto;
            animation-timing-function: ease-out;
            animation-fill-mode: both;
            animation-timeline: view(block);
            animation-range: entry 0% cover 35%;
            will-change: transform, opacity;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .section h2 {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}





/*==========================================================
    Section Sizes
==========================================================*/

.section--hero {
    padding-block-start: var(--section-padding-hero-top);
    padding-block-end: var(--section-padding-hero-bottom);
}

.section--standard {
    padding-block: var(--section-padding-standard);
}

.section--feature {
    padding-block: var(--section-padding-feature);
}

.section--compact {
    padding-block: var(--section-padding-compact);
}

.section--cta {
    padding-block: var(--section-padding-cta);
}

.section--footer {
    padding-block: var(--section-padding-footer);
}


/*==========================================================
    Section Backgrounds
==========================================================*/

.section--page {
    background: var(--colour-page);
}

.section--surface {
    background: var(--colour-surface);
}

.section--alternate {
    background: var(--colour-section-alt);
}

/*==========================================================
    Header
==========================================================*/
.section-header {

    max-width:850px;
    overflow-x: clip;

    margin-inline:auto;

    margin-bottom:var(--space-lg);

    text-align:center;

}

/*==========================================================
    Reading Width
==========================================================*/

.section__content {
    width: min(100% - 3rem, var(--container-standard));
    margin-inline: auto;
}

.section__content--wide {
    max-width: var(--container-wide);
}

.section__content--narrow {
    max-width: var(--container-narrow);
}

/*==========================================================
    Layouts
==========================================================*/




.section-grid {

    display:grid;

    gap:5rem;

    align-items:start;

}

.section-grid--75 {

    grid-template-columns:
        minmax(0,3fr)
        minmax(260px,1fr);

}

.section-grid--65 {

    grid-template-columns:
        minmax(0,1.8fr)
        minmax(260px,1fr);

}

.section-grid--50 {

    grid-template-columns:
        minmax(0,1fr)
        minmax(260px,1fr);

}

.section-grid--35 {

    grid-template-columns:
        minmax(260px,1fr)
        minmax(0,1.8fr);

}

.section-grid--25 {

    grid-template-columns:
        minmax(260px,1fr)
        minmax(0,3fr);

}

@media (max-width:850px){

    .section-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

}

/*==========================================================
    Alignments
==========================================================*/
.section-centred{
    display: grid;
    place-items: center;
    align-self: center;
}

.section-left{
    display: grid;
    place-items: start;
    align-self: start;
}

.section-right{
    display: grid;
    place-items: end;
    align-self: end;
}

.contents-centred{
    text-align: center;
}

.contents-left{
    text-align: start;
}

.contents-right{
    text-align: end;
}

/*==========================================================
    Vertical Rhythm
==========================================================*/

.section__heading {
    margin-bottom: var(--space-xl);
}

.section__intro {
    margin-bottom: var(--space-lg);
}

.section__body>*+* {
    margin-top: var(--space-md);
}


/*==========================================================
    Optional Divider
==========================================================*/

.section--divider::after {

    content: "";

    position: absolute;

    inset-inline: 0;

    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            oklch(from var(--colour-temp-hot) 75% c h / .12) 10%,
            oklch(from var(--colour-temp-warm) 82% c h / .15) 30%,
            oklch(from var(--colour-temp-cool) 78% c h / .18) 100%
        );

}


/*==========================================================
    Sections
==========================================================*/


.section-container {
  width: 100%;
  max-width: var(--container-standard);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}



/* The outer container stays Standard width for grid alignment with the
   rest of the page; the text itself is capped at the Narrow / reading
   width and centred within it. */
.section-reading {
  max-width: var(--container-narrow);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* ---------- Heading ---------- */

.section-heading {
  font-family: var(--font-family);
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.25;
  color: var(--colour-text);
  margin: 0;
  text-wrap: balance;
}

.section-subheading, p.section-subheading {
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  line-height: 1.5;
  color: var(--colour-text-muted);
  margin: var(--space-md) 0 0 0;
}

/* ---------- Body ---------- */

.section-body {
  margin-block-start: var(--space-xl);
}
@media (max-width: 850px) {
  .section-body {
    margin-block-start: var(--space-lg);
  }
}

/* .section-body p {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: 1.75;
  color: var(--colour-text);
  margin: 0 0 var(--space-lg) 0;
} */

.section-body p:last-child {
  margin-block-end: 0;
}



/* ---------- Responsive ---------- */

@media (max-width: 850px) {
  .section {
    padding-block: var(--space-xl);
  }

  .section-ellipse {
    width: 600px;
    height: 600px;
    top: -30%;
    right: -30%;
  }
}