/* header */
.accordion-header {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 1.25rem 0;
    gap: 0px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.accordion-number {
    font-size: 148px;
    line-height: 1;
    font-weight: 400;
    width: 220px;
    min-width: 220px;

}

.accordion-heading-group {
    flex: 1 5 auto;
}

.accordion-title {
    display: block;
    font-size: 50px;
    line-height: 55px;
}

.accordion-excerpt {
    /* NEW */
    margin: .25rem 0 0;
    font-size: 22px;
    line-height: 26px;
    color: #0D0D0D;
}

.accordion-icon {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    top: 7px;
}

.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform .2s ease;
}

.accordion-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

.accordion-icon::after {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.accordion-item.is-open .accordion-icon::after {
    transform: translateX(-50%) scaleY(0);
}

.accordion-item:first-of-type {
    border-top: 1px solid black;
    margin-block-start: 0!important;
    padding-block-start: 25px!important;
    padding-block-end: 0!important;
}

.accordion-item {
    margin-block-start: 25px!important;
    padding-block-end: 25px!important;;
}

/* body */
.accordion-content {
    padding: 0 0 1.5rem 0;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 122.222% */
}

.indented-section {
    padding-left: 220px;
}

/* -----------------------------------------------
 * Smooth slide-open / slide-close
 * ----------------------------------------------*/
.accordion-content {
    /* collapsed state */
    max-height: 0;
    opacity: 0;
    overflow: hidden;

    /* feel free to tweak timing / curve */
    transition:
        max-height .45s cubic-bezier(.4, 0, .2, 1),
        opacity .45s ease;
}

/* optional – makes interior text fade-in sync nicely */
.accordion-item.is-open .accordion-content {
    opacity: 1;
    /* max-height is handled in JS */
}

/* -------------------------------------------------------------
 * = RESPONSIVE TWEAKS
 *   desktop  – unchanged (big number, title to the right, icon)
 *   ≤ 768 px – number → top row, title/excerpt underneath,
 *              icon stays top-right, everything full-width
 * ------------------------------------------------------------ */
@media (max-width: 768px){

	/* make the whole header a stacking context so the plus/minus
	   can be absolutely positioned without affecting flow */
	.accordion-header{
		position:relative;
		flex-direction:column;      /* stack number + text */
		align-items:flex-start;
		gap:0.5rem;                 /* tighter vertical gap */
		padding:1rem 2.75rem 1rem 1rem; /* space for icon */
	}
    

	/* big numeral now sits on its own top line */
	.accordion-number{
		font-size:90px;             /* a bit smaller for phones */
		line-height:1;
		margin-bottom:0.25rem;
	}

	/* heading + excerpt get their own block flow */
	.accordion-heading-group{
		width:100%;
	}

	.accordion-title{
		font-size:40px!important;
	}

	.accordion-excerpt{
		font-size:0.9375rem;
	}

	/* keep the icon top-right no matter the header height */
	.accordion-icon{
		position:absolute;
		top:1.25rem;
		right:1rem;
		margin:0;                  /* kill left-auto gap */
	}

	/* optional: slightly tighter body padding on phones */
	.accordion-content{
		padding:0 1rem 1.25rem 1rem;
	}

    .indented-section {
        padding-left: 0px;
    }
}