/* ============================================================
   CodebyCarter — section-redux.css
   Two sections redesigned with distinct palettes so no two
   dark sections feel alike:
     · About Carter → warm amber / Arizona sunset
     · Process     → cream editorial magazine
   ============================================================ */

/* ============================================================
   01 · ABOUT CARTER — warm amber / sunset palette
   ============================================================ */
#about{
  background:
    radial-gradient(900px 500px at 78% 22%, rgba(250,204,21,.20), transparent 60%),
    radial-gradient(700px 500px at 18% 78%, rgba(251,146,60,.22), transparent 60%),
    linear-gradient(170deg, #1A0E08 0%, #2B1810 45%, #1A0E08 100%);
  color:#F5EFE0;
  position:relative;overflow:hidden;
  --c-amber:#FACC15;
  --c-warm:#FB923C;
  --c-coral:#F87171;
  --c-cream:#F5EFE0;
  --c-rust:#9A3412;
}
#about::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.7;
}
/* Amber floating dots — distinct from anything else on the site */
.about-floater{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(60px);opacity:.30;z-index:1;
}
.about-floater--1{width:360px;height:360px;background:var(--c-amber);top:8%;right:-5%;animation:aboutDrift1 24s ease-in-out infinite}
.about-floater--2{width:280px;height:280px;background:var(--c-warm);bottom:12%;left:-3%;animation:aboutDrift2 20s ease-in-out infinite}
.about-floater--3{width:200px;height:200px;background:var(--c-coral);top:55%;left:50%;animation:aboutDrift3 26s ease-in-out infinite}
@keyframes aboutDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,40px)}}
@keyframes aboutDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-30px)}}
@keyframes aboutDrift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,60px) scale(1.15)}}

#about .shell{position:relative;z-index:2}

/* Override the previous Meet-the-builder eyebrow with amber */
#about .eyebrow{
  background:rgba(250,204,21,.10);border-color:rgba(250,204,21,.40);color:var(--c-amber);
}
#about .eyebrow::before{background:var(--c-amber);box-shadow:0 0 16px var(--c-amber)}

/* Avatar — amber gradient */
.about-avatar{
  background:linear-gradient(135deg,var(--c-amber),var(--c-warm),var(--c-coral));
  background-size:200% 200%;
  box-shadow:0 30px 80px rgba(250,204,21,.45), inset 0 0 0 4px rgba(255,255,255,.18);
}
.about-avatar::after{
  background:linear-gradient(135deg,var(--c-amber),var(--c-warm),var(--c-coral));
  background-size:200% 200%;
}

.about-h{color:var(--c-cream)}
.about-h .ital{
  background:linear-gradient(135deg,var(--c-amber),var(--c-warm) 50%,var(--c-coral));
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.about-p{color:#D4C5A8;line-height:1.7}
.about-p b{color:var(--c-cream);font-weight:600}
.about-p em{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,var(--c-amber),var(--c-warm));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* The "punchline" callout paragraph */
.about-punchline{
  margin:24px 0;padding:20px 24px;border-radius:14px;
  background:rgba(250,204,21,.08);
  border-left:3px solid var(--c-amber);
  font-size:clamp(17px,1.8vw,22px);line-height:1.5;
  color:var(--c-cream);font-weight:500;
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
}
.about-punchline b{
  font-style:normal;font-family:inherit;font-weight:600;
  background:linear-gradient(135deg,var(--c-amber),var(--c-warm));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.about-stats{border-top-color:rgba(250,204,21,.30)}
.about-stat-num{color:var(--c-cream)}
.about-stat-num .ital{
  background:linear-gradient(135deg,var(--c-amber),var(--c-warm));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.about-stat-label{color:#A89878}

#about .btn-grad{
  background:linear-gradient(135deg,var(--c-amber),var(--c-warm),var(--c-coral));
  background-size:200% 200%;
  color:#1A0E08;
  box-shadow:0 14px 36px rgba(250,204,21,.45);
}

/* ============================================================
   02 · PROCESS — cream editorial magazine palette
   ============================================================ */
#process{
  background:#FAF6EC;
  color:#1A1614;
  position:relative;overflow:hidden;
}
#process::before{
  content:none !important;
}
#process::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(700px 400px at 80% 20%, rgba(124,45,18,.06), transparent 60%),
    radial-gradient(500px 400px at 20% 80%, rgba(180,140,80,.08), transparent 60%);
}
#process .shell{position:relative;z-index:2}

#process .eyebrow{
  background:transparent !important;
  border:0 !important;border-bottom:1px solid #1A1614 !important;border-radius:0 !important;
  color:#1A1614;font-family:'Instrument Serif',serif;font-style:italic;
  text-transform:none;letter-spacing:.02em;font-size:14px;
  padding:0 0 6px;
}
#process .eyebrow::before{
  content:"—  ";color:#9A3412;font-family:'Instrument Serif',serif;
  width:auto;height:auto;background:none;box-shadow:none;border-radius:0;animation:none;
}

#process .section-title{
  color:#0A0807;font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  letter-spacing:-.015em;line-height:1.05;font-size:clamp(40px,7vw,84px);
}
#process .section-title .ital{
  background:none;color:#9A3412;-webkit-text-fill-color:#9A3412;
  font-family:inherit;
}
#process .section-title::before{
  content:none;
}

#process .section-lead{color:#5A4838;font-size:16px;line-height:1.7;max-width:54ch;font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}

/* Step cards — white paper with editorial number treatment */
#process .process{margin-top:60px;gap:24px}
#process .step{
  background:#FFFEFB;
  border:1px solid #E8E0CC;
  color:#1A1614;
  padding:36px 28px 28px;
  position:relative;
  box-shadow:0 12px 36px rgba(60,40,20,.08);
}
#process .step:hover{
  transform:translateY(-3px);
  border-color:#9A3412;
  box-shadow:0 18px 50px rgba(154,52,18,.14);
}
#process .step::before{
  /* override the gradient counter with editorial black serif */
  counter-increment:step;content:counter(step, decimal-leading-zero);
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:120px;line-height:.85;
  position:absolute;top:-8px;right:18px;
  color:#9A3412 !important;background:none !important;
  -webkit-text-fill-color:#9A3412 !important;
  animation:none !important;letter-spacing:-.04em;
}
#process .step h3{
  color:#0A0807;font-size:21px;font-weight:600;margin-top:50px;letter-spacing:-.01em;
}
#process .step p{color:#5A4838;font-size:15px;line-height:1.65;margin-top:10px}

/* Editorial flourish: pencil-line under section heading area */
#process .reveal:first-child{position:relative;padding-bottom:18px}
#process .reveal:first-child::after{
  content:"";display:block;width:48px;height:1px;background:#9A3412;margin-top:24px;
}