/* =========================
   TOKENS / BASE
========================= */
:root{
  --pattern-color: rgba(90, 62, 54, 0.06); 
  --pattern-size: 80px;                  
}

:root{
  --dot-color: rgba(105,69,79,0.10); 
  --dot-size: 28px;                  
}

.dots-bg{
  background-color: #fff;
  background-image: radial-gradient(var(--dot-color) 1.5px, transparent 1.5px);
  background-size: var(--dot-size) var(--dot-size);
  background-attachment: fixed; 
}

.dots-bg::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;

  mask-image: linear-gradient(to bottom, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
html, body { min-height: 100%; }
body { position: relative; }


body::before{ transform: rotate(-5deg) scale(1.03); transform-origin:center; }
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;               
  pointer-events: none;

  background-color: var(--pattern-color);
  -webkit-mask-image: url("Lotus.svg");     
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: var(--pattern-size) auto;
  mask-image: url("Lotus.svg");
  mask-repeat: repeat;
  mask-size: var(--pattern-size) auto;
  opacity: 1; 
}

@media (max-width: 900px){ body::before{ -webkit-mask-size: 64px auto; mask-size: 64px auto; } }
@media (max-width: 520px){ body::before{ -webkit-mask-size: 50px auto; mask-size: 50px auto; } }
:root{
  --plum:#69454F; --plum-strong:#5A3E36;
  --pink:#F3D8D3; --coffee:#5A3E36;
  --text:#1A1A1A; --bg:#fff;

  --font-base:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --radius-lg:40px; --radius-md:28px; --ring:rgba(0,0,0,.08);
  --shadow-1:0 10px 24px rgba(0,0,0,.12);

  --container:max(92vw,280px);
  --header-h:72px; 
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-base);line-height:1.6;height:100%}
img{max-width:100%;height:auto;display:block}
section[id]{scroll-margin-top:var(--header-h)}

/* =========================
   INTRO / LANDING
========================= */
.intro-landing{
  height:100vh;
  min-height:540px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  font-family:'Playfair Display',serif;
  background:radial-gradient(circle at center,#fdf5f6,#e8d5d8,#d9c2c6);
  color:#3a252b;
  position:relative;
  overflow:hidden;
}
.intro-landing::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 30%,#ffffff20,transparent 70%),
    radial-gradient(circle at 70% 70%,#69454f20,transparent 70%);
  animation:moveGlow 12s linear infinite alternate;
}
@keyframes moveGlow{from{transform:translate(-5%,-5%)}to{transform:translate(5%,5%)}}

.intro-title span{
  display:block;
  font-size:clamp(28px,6vw,56px);
  font-weight:600;
  opacity:0;
  transform:translateY(40px);
  animation:fadeUp 1s ease forwards;
  letter-spacing:1px
}
.wave {
  display: inline-block;
  font-size: 3rem;   
  transform-origin: 70% 70%;
  animation: waveAnim 2s infinite;
}

.signature {
  font-family: 'Great Vibes', cursive;  
  font-size: 5rem;                     
  font-weight: 400;
  color: #69454F;                      
  letter-spacing: 4px;                 
  line-height: 1.3;                     
  margin-top: 0.5em;
}
@keyframes waveAnim {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.intro-title .hi{
  animation-delay:.2s
}
.intro-title .im{
  animation-delay:.9s
}
.intro-title .name{
  animation-delay:1.6s;
  font-size:clamp(32px,7vw,64px);
  font-weight:700;
  color:#69454f;
  letter-spacing:2px
}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

.scroll-next{
  margin-top:60px;
  width:56px;
  height:56px;
  border-radius:50%;
  border:2px solid #69454f;
  background:transparent;
  font-size:24px;
  color:#69454f;
  cursor:pointer;
  position:relative;
  transition:.3s
}
.scroll-next:hover{
  background:#69454f;
  color:#fff;
  transform:translateY(4px)
}
.scroll-next::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid #69454f;
  border-radius:50%;
  animation:pulse 2s infinite
}
@keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}

/* =========================
   HEADER / NAV
========================= */
:root { --header-h: 72px; }                 
section[id] { scroll-margin-top: var(--header-h); }


.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.nav-wrap{
  height: var(--header-h); 
  width: min(1200px,94vw); 
  margin: 0 auto;
  display: flex; 
  align-items: center; 
  gap: 12px; 
  padding: 0 12px;
}
.brand img{ 
  height: 32px; 
}
.main-nav{ 
  display: flex; 
  gap: 40px; 
  margin-left: auto; 
}
.main-nav a{
  position: relative; 
  padding: 6px 0; 
  text-decoration: none;
  color: #1a1a1a; 
  font-weight: 500;
}
.main-nav a:hover{ 
  color: #69454f; 
}
.main-nav a.active{ 
  color: #69454f; }
.main-nav a.active::after{
  content:""; 
  position:absolute; 
  left:0; 
  right:0; 
  bottom:-6px; 
  height:3px;
  background:#69454f; 
  border-radius:2px;
}

.nav-toggle{
  display:none; 
  margin-left:auto; 
  width:42px; 
  height:42px;
  border-radius:10px; 
  border:1px solid rgba(0,0,0,.08);
  background:#fff; 
  align-items:center; 
  justify-content:center;
}
.nav-toggle-bar{ 
  width:20px; 
  height:2px; 
  background:#333; 
  border-radius:2px; 
  margin:3px 0;
  transition: transform .25s, opacity .25s;
}

.nav-toggle[aria-expanded="true"] 
.nav-toggle-bar:nth-child(1){ 
  transform: translateY(5px) rotate(45deg); 
}
.nav-toggle[aria-expanded="true"] 
.nav-toggle-bar:nth-child(2){ 
  opacity: 0; 
}
.nav-toggle[aria-expanded="true"] 
.nav-toggle-bar:nth-child(3){ 
  transform: translateY(-5px) rotate(-45deg); 
}

.nav-overlay{
  position: fixed; 
  inset: var(--header-h) 0 0 0; 
  z-index: 999;
  background: rgba(0,0,0,.28); 
  backdrop-filter: blur(2px);
  opacity:0; pointer-events:none; 
  transition: opacity .25s;
}
.nav-overlay.is-on{ 
  opacity:1; 
  pointer-events:auto; 
}

body.nav-open{ 
  overflow: hidden; 
}

@media (max-width: 720px){
  .nav-toggle{ display:flex; }

  .main-nav{
    position: fixed;
    top: var(--header-h);
    right: 12px;
    width: min(86vw, 300px);
    max-height: calc(100dvh - var(--header-h) - 24px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
    z-index: 1001;

    transform-origin: top right;
    transform: translateY(-8px) scale(.9);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform .22s ease, opacity .22s ease, visibility .22s;
  }
  .main-nav.is-open{
    transform: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .main-nav a{ 
    padding: 12px 8px; 
    border-radius: 10px; 
    font-size: 16px; 
  }
  .main-nav a:hover{ 
    background: rgba(105,69,79,.06); 
    color: #69454f; 
  }
}


.nav-overlay{ 
  position:fixed; 
  inset:var(--header-h) 0 0 0; 
  z-index:1000;
  background:rgba(0,0,0,.0);
  opacity:0; 
  pointer-events:none; 
  transition:opacity .22s; 
}
.nav-overlay.is-on{ 
  opacity:0; 
  pointer-events:auto; 
}
body.nav-open{ 
  overflow:hidden; 
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 3000;          
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

@media (max-width:720px){
  .main-nav{
    position: fixed;
    top: var(--header-h, 72px);
    right: 12px;
    left: auto;
    z-index: 3001;         
    width: min(86vw, 280px);
    max-height: calc(100dvh - var(--header-h,72px) - 16px);
    overflow: auto;
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 16px;
    background: #fff; border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
    transform: translateY(-110%);
    transition: transform .25s ease;
  }
  .main-nav.is-open{ 
    transform: translateY(0); 
  }
}

.nav-overlay{
  position: fixed;
  inset: var(--header-h,72px) 0 0 0;
  z-index: 2000;                 
  background: rgba(0,0,0,.0);   
  backdrop-filter: none;        
  opacity: 0; pointer-events: none;
  transition: opacity .0;
}
.nav-overlay.is-on{ 
  opacity: 1; 
  pointer-events: auto; 
}
.main-nav { 
  pointer-events: auto; 
}

/* =========================
   HERO
========================= */

.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(80px,15vh,160px) 20px;background:#fff;text-align:center
}
.hero__inner{
  max-width:900px;
  margin:0 auto
}
.hero-title{
  font-size:clamp(36px,6vw,64px);
  font-weight:700;
  line-height:1.2;
  margin-bottom:30px
}
.hero-title .highlight{
  color:var(--plum)
}
.hero-subtitle{
  margin-top:20px;
  font-size:clamp(18px,2vw,22px);
  color:#555
}
.hero-desc{
  margin-top:24px;
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.6;
  color:#666
}
.hero-actions{
  margin-top:40px;
  display:flex;
  justify-content:center;
  gap:20px
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 32px;
  border-radius:999px;
  font:700 16px var(--font-base);
  cursor:pointer;
  transition:transform .18s,box-shadow .18s,background .18s,color .18s,border-color .18s;
  text-decoration:none
}
.btn-primary{
  background:var(--plum);
  color:#fff;
  border:1px solid var(--plum);
  box-shadow:0 10px 24px rgba(105,69,79,.18)
}
.btn-primary:hover{
  background:#5A3E36;
  transform:translateY(-2px)
}
.btn-outline{background:#fff;color:var(--plum);border:2px solid var(--plum)}
.btn-outline:hover{background:rgba(105,69,79,.08);transform:translateY(-2px)}
.hero-title{
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.15;
  text-align:center;
}

.hero-title .highlight{
  display:inline-block;
  position:relative;
  padding-inline: .1em;
  transform-origin: 50% 70%;
}

.highlight .ch{
  display:inline-block;
  opacity:0;
  transform: translateX(var(--off, 0.6em)) translateY(6px) scale(.94);
  filter: blur(6px);
  transition:
    transform .55s cubic-bezier(.2,.75,.25,1.2),
    opacity   .45s ease,
    filter    .45s ease;
  transition-delay: calc(var(--i) * 55ms);
  will-change: transform, opacity, filter;
}

.hero-title.in-view .highlight .ch{
  opacity:1;
  transform: translateX(0) translateY(0) scale(1.02);
  filter: blur(0);
}

.hero-title.in-view .highlight .ch:last-child{
  transition-duration: .65s;
}

.highlight[data-dir="left"]  .ch{ --off: -0.75em; }
.highlight[data-dir="right"] .ch{ --off:  0.75em; }

@media (prefers-reduced-motion: reduce){
  .highlight .ch{ transition:none; opacity:1; transform:none; filter:none; }
}
/* =========================
   WORK
========================= */

.work-alt{
  width:min(1472px,96vw);
  margin: clamp(24px,5vw,48px) auto;
  padding: clamp(28px,5vw,56px) clamp(16px,3vw,25px);
  border-radius:40px;
  background:#F1EAE7;
  position:relative; overflow:hidden;
}
.work-alt::before{
  content:""; 
  position:absolute; 
  inset:0; 
  pointer-events:none;
  background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
  background-size:48px 48px; 
  opacity:.12;
}
.work-alt__head{
  width:min(931px,92vw);
  margin:0 auto clamp(20px,4vw,50px);
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  gap:10px;
}
.work-alt__title{
  font:700 clamp(28px,4.6vw,48px)/1.15 "SF Pro Display",system-ui;
  color:#000; 
  margin:0;
}
.work-alt__sub{
  font:400 clamp(14px,2.2vw,18px)/1.6 "SF Pro Display",system-ui;
  color:#222; 
  text-align:center; 
  margin:0;
}
.work-alt__list{ 
  list-style:none; 
  margin:0; 
  padding:0; 
  display:grid; 
  gap: clamp(24px,4vw,59px); 
}

.work-row{
  display:grid; 
  align-items:center; 
  gap: clamp(16px,3vw,24px);
  grid-template-columns: minmax(280px, 1.3fr) 1fr;
  background:#fff; 
  border-radius:40px;
  padding: clamp(18px, 3vw, 28px);
  border:1px solid rgba(145,95,109,.20);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.work-row:nth-child(even){ 
  grid-template-columns: 1fr 1.3fr; 
}
.work-row:nth-child(even) .work-media{ 
  order:2 
}
.work-row:nth-child(even) .work-meta{ 
  order:1 
}
.work-row:hover{ 
  transform: translateY(-4px); 
  box-shadow:0 20px 40px rgba(0,0,0,.12); 
  border-color:rgba(145,95,109,.32) 
}

.work-media{ 
  aspect-ratio: 233/131; 
  border-radius:40px; 
  overflow:hidden; 
  margin:0; 
  background:#eee 
}
.work-media img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
  transform:scale(1); 
  transition:transform .6s cubic-bezier(.22,.8,.22,1) 
}
.work-row:hover .work-media img{ 
  transform:scale(1.06) 
}

.work-meta{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "num"
    "name"
    "desc"
    "cta";
  row-gap: clamp(8px, 1.4vw, 14px);
  align-items:start;
}
.work-num{
  grid-area:num;
  font-weight:700;
  font-size: clamp(88px, 10vw, 200px);
  line-height:.85;
  letter-spacing:-0.04em;   
  color:#000; margin:0;
}
.work-name{
  grid-area:name;
  margin:0;
  font:700 clamp(18px, 2.6vw, 32px)/1.2 "SF Pro Display";
  color:#69454F;
}
.work-desc{
  grid-area:desc;
  margin:0;
  font:400 clamp(14px, 2vw, 18px)/1.65 "SF Pro Display";
  color:#333;
}

.work-next{
  grid-area:cta;
  justify-self:end; 
  align-self:end;
  width:52px; 
  height:52px; 
  border-radius:999px; 
  border:0;
  background:#C9B9B6; 
  color:#fff; 
  display:grid; 
  place-items:center;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), 0 6px 12px rgba(0,0,0,.10);
  transition: transform .2s ease, background .2s ease;
}
.work-next:hover{ 
  transform: translateX(2px) scale(1.04); 
  background:#BDA9A5 
}
.work-next:active{ 
  transform: translateX(3px) scale(.98) 
}

@media (max-width: 1020px){
  .work-row,
  .work-row:nth-child(even){ grid-template-columns: 1fr; }
  .work-media{ order:1 } .work-meta{ order:2 }
  .work-num{ font-size: clamp(72px, 22vw, 120px); line-height:.9 }
}

@media (max-width: 720px){
  .work-row{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "name"
      "desc"
      "cta"
      "media";            
    gap: 10px;
    padding: 16px;
    border-radius: 24px;
    text-align: left;
  }

  .work-row .work-num   { 
    grid-area: num;   
    font-size: clamp(42px,12vw,72px); 
    line-height: .9; 
  }
  .work-row .work-name  { 
    grid-area: name;  
    font-size: clamp(18px,5vw,22px); 
    margin-top: 6px; 
  }
  .work-row .work-desc  { 
    grid-area: desc;  
    font-size: clamp(14px,4vw,16px); 
    color:#444; 
  }
  .work-row .work-next  {
    grid-area: cta; 
    justify-self: end; 
    align-self: start;
    width: 46px; 
    height: 46px; 
    border-radius: 999px; 
    margin: 4px 0 6px;
  }
  .work-row .work-media { 
    grid-area: media; 
    order: 5; 
    width: 100%; 
    aspect-ratio: 16/9; 
    border-radius: 18px; 
    margin-top: 6px;
  }

  .work-row:nth-child(even){ grid-template-columns: 1fr; }
  .work-row:nth-child(even) .work-media { order: 5; }
  .work-row:nth-child(even) .work-meta  { order: 1; }

  .work-media{ border-radius: 18px; }
  .work-row{ box-shadow: 0 8px 16px rgba(0,0,0,.08); }
}
html {
  scroll-behavior: smooth;
}

#work {
  scroll-margin-top: calc(var(--header-h, 72px) + 20px);
}
/* =========================
   ABOUT
========================= */
.about-hero{
  width:min(1472px,96vw);
  margin:clamp(28px,6vw,72px) auto;
  padding:clamp(28px,6vw,64px);
  background:var(--plum);
  color:#fff;
  border-radius:40px;
  overflow:hidden
}
.about-hero__wrap{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:clamp(20px,5vw,56px)
}
.about-hero__title{
  font:700 clamp(28px,5vw,56px)/1.1 var(--font-base);
  margin:0 0 clamp(10px,1.2vw,14px)
}
.about-hero__text p{
  margin:0 0 clamp(10px,1.6vw,16px);
  font:400 clamp(14px,2vw,18px)/1.8 var(--font-base);
  opacity:.98
}
.about-hero__portrait{
  align-self:stretch;
  display:flex;
  align-items:flex-end;
  justify-content:center
}
.about-hero__portrait img{
  width:min(520px,100%);
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:280px 280px 24px 24px;
  border:2px solid rgba(255,255,255,.12);
  filter:grayscale(100%);
  box-shadow:0 22px 40px rgba(0,0,0,.18) inset
}
@media (max-width:980px){
  .about-hero__wrap{grid-template-columns:1fr}
  .about-hero__portrait{order:-1}
  .about-hero__portrait img{width:min(440px,84vw);margin:0 auto 16px}
  .about-hero__portrait center{display:flex;align-items:center;justify-content:center}
}
.about-hero__portrait {
  align-self: stretch;
  display: flex;
  align-items: center;   
  justify-content: center; 
}
.about-hero__portrait img {
  width: min(520px, 100%);
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 280px 280px 24px 24px;  
  border: 2px solid rgba(255, 255, 255, .12);
  filter: grayscale(100%);
  box-shadow: 0 22px 40px rgba(0, 0, 0, .18) inset;
  object-position: center top; 
}
/* Base CTA */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 16px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #915F6D, #E8CFCB);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.4px;
  text-transform: capitalize;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  transition: transform .25s ease, box-shadow .25s ease, background .4s ease;
  position: relative;
  overflow: hidden;
}

/* Hover state */
.btn-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  background: linear-gradient(135deg, #5A3E36, #915F6D);
}

/* Button text */
.btn-cta__text {
  position: relative;
  z-index: 2;
}

/* Arrow micro-interaction */
.btn-cta__arrow {
  display: inline-block;
  font-size: 18px;
  transition: transform .3s ease, opacity .3s ease;
  position: relative;
}

/* On hover: arrow slides */
.btn-cta:hover .btn-cta__arrow {
  transform: translateX(6px);
  opacity: 0.9;
}

/* Ripple pulse effect */
.btn-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.15);
  transform: scale(0);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}
.btn-cta:active::after {
  transform: scale(1);
  opacity: 1;
  transition: 0s;
}
.know-more-btn {
  display: grid;
  place-items: center;
  width: 56px; 
  height: 56px; 
  border-radius: 999px;
  background: #915F6D;   /* plum tone */
  color: #fff;
  border: 0;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), 0 6px 12px rgba(0,0,0,.10);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
  text-decoration: none;
}

.know-more-btn:hover {
  transform: translateX(2px) scale(1.05);
  background: #7d4d5d; /* slightly darker plum */
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

.know-more-btn:active {
  transform: translateX(3px) scale(.96);
}

/* Responsive tweak for smaller screens */
@media (max-width: 720px) {
  .know-more-btn {
    width: 48px;
    height: 48px;
  }
}
/* =========================
   TOOLS (infinite)
========================= */
.tools{
  background:#fff;
  padding:clamp(32px,6vw,80px) 0;
  width:min(1472px,96vw);
  margin:0 auto;
  overflow:hidden
}
.tools__slider{
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}
.tools__track{
  display:flex;
  gap:clamp(24px,6vw,36px);
  width:max-content;
  animation:toolsMarquee 24s linear infinite;
  will-change:transform;
}
.tool{
  flex:0 0 auto;
  width:108px;
  height:108px;
  border-radius:50%;
  background:#fff;
  border:3px solid #F3D8D3;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .3s,border-color .3s;
  overflow:hidden; 
}
.tool:hover{
  transform:scale(1.08);
  border-color:var(--plum);
}
.tool img{
  max-width:68%;height:auto
}
@keyframes toolsMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width:900px){.tools__track{gap:36px}.tool{width:95px;height:95px}}
@media (max-width:600px){.tools{padding:40px 0}.tools__track{gap:24px}.tool{width:80px;height:80px;border-width:3px}}
.tool img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  object-position: center;
  display: block;
}
/* =========================
   LEARNINGS (flip)
========================= */
.learnings{
  background:#fff;
  border-radius:32px;
  padding:clamp(32px,6vw,80px) clamp(16px,6vw,64px);
  width:min(1472px,96vw);
  margin:0 auto;
}
.learnings__head{
  text-align:center;
  width:min(900px,92vw);
  margin:0 auto clamp(20px,5vw,40px);
}
.learnings__title{
  font-size:clamp(26px,5.6vw,48px);
  font-weight:700;
  margin:0 0 .25em
}
.learnings__subtitle{
  font-size:clamp(14px,2.2vw,18px);
  margin:0;
  color:#222
}
.learnings__grid{
  --card-w:clamp(260px,34vw,360px);
  --card-h:clamp(320px,44vw,440px);
  --card-radius:0px 20px;
  display:grid;
  gap:clamp(16px,8vw,40px);
  justify-content:center;
  grid-template-columns:repeat(3,minmax(0,var(--card-w)))
}
@media (max-width:1100px){
  .learnings__grid{
    grid-template-columns:repeat(2,minmax(0,var(--card-w)))
  }
}
@media (max-width:720px){
  .learnings__grid{
    grid-template-columns:minmax(0,var(--card-w))
  }
}
.learning-card{
  width:var(--card-w);
  height:var(--card-h);
  perspective:1000px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  border-radius:var(--card-radius);
  transition:box-shadow .25s
}
.learning-card__inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .6s;
  border-radius:var(--card-radius);
  padding:32px;display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left}
.learning-card:hover .learning-card__inner,.learning-card.is-flipped .learning-card__inner{transform:rotateY(180deg)}

.card-face{
  position:absolute;
  inset:0;
  border-radius:var(--card-radius);
  backface-visibility:hidden;
  border:2px solid var(--plum)
}
.card-front{
  background:var(--plum);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px}
.card-front-title{
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  font-size:clamp(22px,3.4vw,28px);
  text-align:center}
.card-back{
  background:#fff;
  padding:24px;display:flex;
  flex-direction:column;
  gap:10px;
  transform:rotateY(180deg)}
.card-num{
  font-weight:700;
  font-size:clamp(22px,2.4vw,28px);
  color:var(--plum);
  margin-bottom:10px
}
.card-title{
  font-weight:800;
  font-size:clamp(20px,2.2vw,26px);
  margin:0 0 12px
}
.card-divider{
  border:0;
  border-top:2px solid #E5E5E5;
  margin:12px 0
}
.card-desc{
  font-size:clamp(16px,1.8vw,20px);
  line-height:1.65;
  color:#333
}

/* =========================
   TESTIMONIALS
========================= */
.t-section{
  padding:clamp(32px,6vw,80px) 0;
  width:min(1472px,96vw);
  margin:0 auto
}
.t-head{
  text-align:center;margin-bottom:clamp(18px,5vw,40px)
}
.t-title{
  font-size:clamp(26px,5vw,42px);
  font-weight:700;
  margin:0 0 8px
}
.t-sub{
  font-size:clamp(14px,2.2vw,18px);
  color:#333;
  margin:0
}
.t-marquee{
  overflow:hidden
}
.t-track{
  display:flex;
  gap:clamp(12px,3vw,24px);
  width:max-content;
  animation:t-scroll 36s linear infinite;
  will-change:transform
}
@keyframes t-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.t-marquee:hover .t-track{animation-play-state:paused}
.t-card{
  position:relative;
  background:rgba(145,95,109,.6);
  color:#fff;
  padding:clamp(18px,3.8vw,32px);
  border-radius:32px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:0 0 clamp(260px,70vw,420px);
  box-shadow:var(--shadow-1)
}
.t-quote{
  position:absolute;
  top:0;right:24px;
  font-size:clamp(36px,7vw,64px);
  font-weight:700;
  color:rgba(255,255,255,.7)
}
.t-author{
  display:flex;
  align-items:center;
  gap:12px
}
.t-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover
}
.t-name{
  font-weight:700
}
.t-meta{
  opacity:.9;font-size:.95em
}
.t-text{
  line-height:1.6;margin:0
}

/* =========================
   FOOTER
========================= */
.footer{
  background:#F5F2F1;
  border-radius:var(--radius-lg);
  padding:clamp(32px,6vw,80px) clamp(16px,6vw,40px);
  width:min(1472px,96vw);
  margin:0 auto clamp(36px,6vw,72px);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(16px,4vw,32px)
}
.footer-thank{
  font-size:clamp(12px,2vw,16px);
  font-weight:500;
  margin:0
}
.footer-title{
  font-size:clamp(22px,5vw,36px);
  font-weight:700;
  line-height:1.3;
  margin:0;
  color:#000
}
.footer-sub{
  font-size:clamp(14px,2.4vw,18px);
  color:#333;
  margin:0
}
.footer-btn{
  background:var(--plum);
  color:#fff;
  font-size:clamp(14px,2.4vw,18px);
  font-weight:600;
  padding:12px 28px;
  border-radius:40px;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
  transition:.2s
}
.footer-btn:hover{
  transform:translateY(-2px)
}
.footer-links{
  font-size:clamp(12px,2.2vw,16px)
}
.footer-copy{
  font-size:clamp(12px,2vw,14px);
  color:#555;
  margin:0
}

.work-alt + .learnings,
.learnings + .t-section,
.t-section + .footer,
.about-hero + .tools,
.hero + .work-alt{margin-top:clamp(16px,4vw,32px)}