/* =========================================================
   Hey — I'm Laura · Portfolio Home
   Palette   #ED8067  #B82610  #FBBA84  #732127  #FFFFFF
   Titles    DM Serif Display Regular
   Subtitles Inclusive Sans Bold
   Text      Fira Sans Regular
   ========================================================= */

:root{
  --coral:      #ED8067;
  --rust:       #B82610;
  --sand:       #FBBA84;
  --wine:       #732127;
  --white:      #FFFFFF;

  --page-bg:    #FFF5F2;
  --card-bg:    #F1F0E9;
  --ink:        #111111;
  --ink-soft:   #3C3C3A;

  --serif:  "DM Serif Display", Georgia, "Times New Roman", serif;
  --sub:    "Inclusive Sans", "Helvetica Neue", Arial, sans-serif;
  --text:   "Fira Sans", "Helvetica Neue", Arial, sans-serif;

  --shell: 1000px;   /* content width — matches the design */
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--text);
  color:var(--ink);
  background-color:var(--page-bg);
  background-image:url("assets/bg-pattern.png");
  background-position:top center;
  background-size:1440px auto;
  background-repeat:repeat;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }


/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  background:#FFFFFF url("assets/bg-pattern.png") top center / 1440px auto repeat;
  padding:87px 24px 78px;
  text-align:center;
}

/* soft geometric wash, same motif as the page background */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, #FB7C5C 0%, #F97858 55%, #EF7554 100%);
  mix-blend-mode:multiply;
  opacity:1;
  pointer-events:none;
}

.hero__inner{ position:relative; z-index:2; }

.hero__about{
  position:absolute;
  top:30px; right:40px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  padding:11px 22px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:#732127;
  font-family:var(--text);
  font-size:15px; font-weight:500; line-height:1; letter-spacing:.02em;
  text-decoration:none;
  backdrop-filter:blur(4px);
  transition:background .2s ease, transform .2s ease;
}
.hero__about:hover{ background:#fff; transform:translateY(-1px); }
.hero__about:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.hero__deco{ position:absolute; z-index:1; pointer-events:none; }
.hero__deco--tr{ top:0;  right:0;  width:340px; height:300px; }
.hero__deco--bl{ bottom:0; left:0;  width:200px; height:200px; }
.hero__deco--bars{ top:168px; right:34px; width:34px; height:92px; }

.hero__logo{ margin:0; }
.hero__logo img{
  width:446px; height:auto;
  margin:0 auto;
}

.hero__tagline{
  font-family:var(--sub);
  font-weight:700;
  font-size:26px;
  line-height:34px;
  color:var(--white);
  margin:39px 0 0;
}

.hero__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:53px;
  margin:28px 0 0;
  padding:0 19px;
  border:1.5px solid rgba(255,255,255,.9);
  border-radius:999px;
  font-family:var(--sub);
  font-weight:400;
  font-size:25px;
  line-height:1;
  color:var(--white);
}

.hero__stats{
  width:862px;
  max-width:100%;
  margin:41px auto 0;
  background:var(--white);
  border-radius:999px;
  padding:20px 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}
.hero-stat{ flex:1 1 0; display:block; }
.hero-stat__rule{
  width:2px;
  align-self:stretch;
  background:var(--wine);
  margin:2px 0;
}
.hero-stat__num{
  display:block;
  font-family:var(--sub);
  font-weight:700;
  font-size:80px;
  line-height:70px;
  color:var(--rust);
  letter-spacing:-.01em;
}
.hero-stat__label{
  display:block;
  font-family:var(--text);
  font-size:24px;
  line-height:26px;
  color:var(--ink);
  margin-top:8px;
}


/* =========================================================
   SCROLLING TAGLINE BAND
   ========================================================= */
.band{
  background:var(--sand);
  height:98px;
  display:flex;
  align-items:center;
  overflow:hidden;
  position:relative;
}
.band__track{
  display:flex;
  width:max-content;
  animation:band-scroll 38s linear infinite;
}
.band__set{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  font-family:var(--sub);
  font-weight:700;
  font-size:42px;
  line-height:1;
  letter-spacing:.005em;
  color:var(--wine);
  text-transform:uppercase;
  white-space:nowrap;
}
.band__set > span{ flex:0 0 auto; }
.band__dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--wine);
  margin:0 21px;
  position:relative;
  top:-2px;
}
@keyframes band-scroll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .band__track{ animation:none; }
}


/* =========================================================
   CASE STUDY CARDS
   ========================================================= */
.work{
  width:var(--shell);
  max-width:calc(100% - 48px);
  margin:0 auto;
  padding:74px 0 0;
}

.case{
  background:var(--card-bg);
  border-radius:26px;
  padding:0 20px;
  margin-bottom:91px;
  min-height:470px;
  display:grid;
  grid-template-columns:521px 1fr;
  column-gap:0;
  align-items:center;
}

.case__media{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-right:28px;
}
.case__media img{ width:var(--img-w,420px); height:auto; }

.case--docked      .case__media img{ --img-w:416px; }
.case--rancho      .case__media img{ --img-w:379px; }
.case--providencia .case__media img{ --img-w:446px; }
.case--elanco      .case__media img{ --img-w:383px; }
.case--echeverria  .case__media img{ --img-w:452px; }

.case__body{ align-self:center; padding:36px 0 35px; }

.case__logo{ height:53px; width:auto; margin:0 0 24px; }
.case__logo--providencia{ height:32px; margin-bottom:34px; }
.case__logo--rancho{ height:56px; }
.case__logo--elanco{ height:61px; margin-bottom:22px; }
.case__logo--echeverria{ height:85px; margin-bottom:12px; }

.case__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:22px;
  line-height:28px;
  color:var(--ink);
  margin:0 0 22px;
}

.case__text{
  font-family:var(--text);
  font-size:13.5px;
  line-height:17.5px;
  color:var(--ink-soft);
  margin:0 0 24px;
}

.case__tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin:0 0 26px;
}
.case__tags li{
  min-width:122px;
  height:33px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--text);
  font-size:11px;
  line-height:1.1;
  color:var(--ink);
  padding:0 9px;
  border:1px solid var(--accent-line, #CFCFC8);
  border-radius:999px;
  white-space:nowrap;
}

.case__stats{
  display:flex;
  align-items:flex-start;
  gap:22px;
  margin:0 0 22px;
}
.case__stats li{ flex:0 1 auto; min-width:0; }
.case__num{
  display:block;
  font-family:var(--sub);
  font-weight:700;
  font-size:21px;
  line-height:24px;
  color:var(--ink);
  white-space:nowrap;
}
.case__num .arrow{
  font-style:normal;
  font-weight:400;
  font-size:1.12em;
  line-height:1;
  margin-right:3px;
}
.case__lab{
  display:block;
  font-family:var(--text);
  font-size:14px;
  line-height:17px;
  color:var(--ink);
  margin-top:2px;
}

.case__btn{
  display:inline-block;
  font-family:var(--text);
  font-size:13px;
  line-height:1;
  color:var(--ink);
  text-decoration:none;
  padding:10px 22px 11px;
  border-radius:999px;
  background:var(--accent-fill, #D8D8D2);
  transition:filter .18s ease, transform .18s ease;
}
.case__btn:hover{ filter:brightness(.94); transform:translateY(-1px); }
.case__btn:focus-visible{ outline:2px solid var(--wine); outline-offset:3px; }

.case:last-of-type{ margin-bottom:0; }

/* per-project accents, sampled from the design */
.case--docked      { --accent-fill:#CCD3D0; --accent-line:#B3C9CD; }
.case--rancho      { --accent-fill:#D2BAB0; --accent-line:#D5C0B7; }
.case--providencia { --accent-fill:#ECCDAC; --accent-line:#E9D3B5; }
.case--elanco      { --accent-fill:#C9D7D7; --accent-line:#AEC4D6; }
.case--echeverria  { --accent-fill:#DADDBE; --accent-line:#DEE1C6; }


/* =========================================================
   TESTIMONIALS
   ========================================================= */
.quotes{
  width:var(--shell);
  max-width:calc(100% - 48px);
  margin:0 auto;
  padding:94px 0 88px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  align-items:stretch;
}

.quote{
  margin:0;
  display:flex;
  flex-direction:column;
  position:relative;
  padding-top:14px;
}
.quote__mark{
  position:absolute;
  top:0; left:12px;
  font-family:var(--serif);
  font-size:92px;
  line-height:.62;
  color:var(--q-mark,#F98F7F);
}
.quote blockquote{
  margin:0;
  background:var(--white);
  padding:46px 14px 6px;
  font-family:var(--text);
  font-size:14px;
  line-height:17px;
  color:var(--ink);
  flex:1 1 auto;
}
.quote figcaption{
  background:var(--q-band,#F29686);
  padding:9px 14px 6px;
  color:var(--white);
  display:block;
}
.quote__name{
  display:block;
  font-family:var(--text);
  font-weight:700;
  font-size:12.5px;
  line-height:17px;
}
.quote__meta{
  display:block;
  font-family:var(--text);
  font-size:12.5px;
  line-height:17px;
  color:rgba(255,255,255,.82);
}

.quote--coral{ --q-mark:#F98F7F; --q-band:#F29686; }
.quote--rose { --q-mark:#904839; --q-band:#B78E85; }
.quote--olive{ --q-mark:#99A25F; --q-band:#C1C98C; }
.quote--blue { --q-mark:#7CB2CF; --q-band:#7CA2CA; }


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1060px){
  .case{ grid-template-columns:minmax(0,44%) 1fr; column-gap:28px; }
  .case__media{ min-height:0; }
}

@media (max-width:900px){
  .hero{ padding:60px 20px 56px; }
  .hero__about{ top:16px; right:16px; font-size:13px; padding:9px 16px 10px; }
  .hero__logo img{ width:min(340px,80vw); }
  .hero__tagline{ font-size:17px; line-height:28px; margin-top:34px; }
  .hero__tagline br{ display:none; }
  .hero__pill{ font-size:15px; margin-top:26px; }
  .hero__stats{ padding:26px 24px; border-radius:36px; }
  .hero-stat__num{ font-size:46px; }
  .hero-stat__label{ font-size:15px; }

  .band{ height:74px; }
  .band__set{ font-size:26px; }
  .band__dot{ margin:0 18px; width:7px; height:7px; }

  .work{ padding-top:48px; }
  .case{
    grid-template-columns:1fr;
    row-gap:26px;
    padding:26px 22px 30px;
    margin-bottom:56px;
    border-radius:20px;
    min-height:0;
  }
  .case__body{ padding:0; }
  .case__media img{ max-height:340px; margin:0 auto; }
  .case__stats{ flex-wrap:wrap; gap:16px 26px; }

  .quotes{ grid-template-columns:repeat(2,1fr); gap:24px; padding-bottom:64px; }
}

@media (max-width:560px){
  .hero__stats{ flex-direction:column; gap:22px; border-radius:32px; }
  .hero-stat__rule{ width:70%; height:2px; align-self:center; margin:0; }
  .band{ height:62px; }
  .band__set{ font-size:20px; }
  .case__stats{ gap:14px 22px; }
  .case__tags li{ min-width:0; }
  .quotes{ grid-template-columns:1fr; }
}