/* =============================================================
   NATALIA.CONTENT_  —  editorial content-creator portfolio
   Design source: design.png  (reference width 1024 ≙ 1440px)
   ============================================================= */

/* ---------- 1. tokens ---------- */
:root{
  --bg:            #F5F0EB;
  --bg-warm:       #F2EDE6;
  --bg-soft:       #F4F2EB;
  --bg-light:      #FBFAF7;
  --bg-band:       #EAE4DB;

  --text:          #17140F;
  --text-soft:     #3B342D;
  --muted:         #665D55;
  --muted-2:       #8A8079;

  --accent:        #917C6A;   /* buttons */
  --accent-dark:   #7C6754;
  --script:        #A78A69;   /* handwritten */
  --script-light:  #EDE2D4;   /* handwritten on photo */
  --circle:        #EBE0D3;

  --line:          #DCD4C9;
  --line-soft:     #E6DFD5;

  --f-display: 'Playfair Display', 'Didot', 'Times New Roman', serif;
  --f-serif:   'Cormorant Garamond', Georgia, serif;
  --f-sans:    'Jost', 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --f-script:  'Corinthia', 'Allura', 'Segoe Script', cursive;

  --pad: clamp(18px, 3.1vw, 45px);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.33,.9,.28,1);

  --hero-h: clamp(618px, 49.9vw, 830px);
}

/* ---------- 2. reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-sans);
  font-weight:300;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
[hidden]{ display:none !important; }
h1,h2,h3,p,ul,figure,figcaption{ margin:0; padding:0; }
ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{ outline:1.5px solid var(--accent); outline-offset:4px; border-radius:2px; }

.skip-link{
  position:fixed; top:-60px; left:12px; z-index:999;
  background:var(--accent); color:#fff; padding:10px 16px; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; transition:top .3s;
}
.skip-link:focus{ top:12px; }

/* ---------- 3. shared type ---------- */
.script{
  font-family:var(--f-script);
  color:var(--script);
  font-weight:400;
  line-height:1.06;
  letter-spacing:.02em;
}
.eyebrow{
  font-size:clamp(9px,.76vw,11px);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
  line-height:1.35;
}
.eyebrow--slash::before,
.eyebrow--slash > span::before{ content:"/ "; color:var(--muted-2); letter-spacing:.2em; }
.eyebrow--slash:has(> span)::before{ content:none; }

.ico-heart{ font-family:var(--f-sans); color:inherit; }

/* ---------- 4. buttons & links ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.7em;
  font-size:clamp(10px,.78vw,11.5px);
  letter-spacing:.19em;
  text-transform:uppercase;
  font-weight:400;
  color:#FBF8F4;
  background:var(--accent);
  border-radius:999px;
  padding:1.28em 2.35em;
  overflow:hidden;
  isolation:isolate;
  transition:color .5s var(--ease), box-shadow .6s var(--ease);
  white-space:nowrap;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--accent-dark);
  transform:translateY(101%);
  transition:transform .62s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateY(0); }
.btn:hover{ box-shadow:0 14px 34px -20px rgba(60,44,32,.65); }
.btn .arr{ transition:transform .5s var(--ease); display:inline-block; }
.btn:hover .arr--down{ transform:translateY(3px); }
.btn:hover .arr:not(.arr--down):not(.arr--ne){ transform:translateX(4px); }
.btn--sm{ padding:1.02em 1.85em; letter-spacing:.16em; }
.btn--lg{ padding:1.45em 2.9em; }

.link-underline{
  position:relative;
  font-size:clamp(10px,.78vw,11.5px);
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--text-soft);
  padding-bottom:.85em;
  display:inline-flex; align-items:center; gap:.6em;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--line); transform-origin:right;
}
.link-underline::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.link-underline:hover::before{ transform:scaleX(1); }
.link-underline .arr{ transition:transform .5s var(--ease); }
.link-underline:hover .arr{ transform:translate(3px,-3px); }

.link-arrow{
  font-size:clamp(9.5px,.75vw,11px);
  letter-spacing:.2em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.8em;
  color:var(--text-soft);
}
.link-arrow .arr{ transition:transform .5s var(--ease); display:inline-block; }
.link-arrow:hover .arr{ transform:translateX(6px); }

/* =============================================================
   5. HEADER
   ============================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80;
  background:rgba(244,239,233,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease);
}
.site-header.is-stuck{ background:rgba(244,239,233,.95); border-bottom-color:var(--line-soft); }
.site-header.is-hidden{ transform:translateY(-100%); }

.site-header__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:0 var(--pad);
  height:clamp(58px,4.6vw,67px);
}
.logo{
  font-family:var(--f-serif);
  font-weight:500;
  font-size:clamp(13px,1.08vw,15.5px);
  letter-spacing:.27em;
  color:var(--text);
  white-space:nowrap;
}
.nav{ position:absolute; left:50%; transform:translateX(-50%); }
.nav__list{ display:flex; gap:clamp(18px,2.55vw,37px); }
.nav__list a{
  position:relative;
  font-size:clamp(9.5px,.76vw,11px);
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--text-soft);
  padding:6px 0;
  display:inline-block;
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:2px; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav__list a:hover::after{ transform:scaleX(1); transform-origin:left; }

.burger{ display:none; width:30px; height:20px; position:relative; }
.burger span{
  position:absolute; left:0; width:100%; height:1px; background:var(--text);
  transition:transform .45s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:6px; }
.burger span:nth-child(2){ top:13px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:70;
  background:var(--bg-warm);
  display:grid; place-items:center;
  opacity:0; transition:opacity .5s var(--ease);
}
.mobile-menu.is-open{ opacity:1; }
.mobile-menu ul{ display:grid; gap:6px; text-align:center; }
.mobile-menu li a{
  font-family:var(--f-display);
  font-size:clamp(30px,9vw,46px);
  line-height:1.25;
  letter-spacing:.01em;
}
.mobile-menu__script{ display:block; text-align:center; margin-top:34px; font-size:42px; }

/* =============================================================
   6. HERO
   ============================================================= */
.hero{
  position:relative;
  height:var(--hero-h);
  padding-top:clamp(58px,4.6vw,67px);
  background:var(--bg);
  overflow:hidden;
}
.hero::after{   /* soft transition into the services band */
  content:""; position:absolute; left:0; right:0; bottom:0; height:90px;
  background:linear-gradient(to bottom, rgba(245,240,235,0), rgba(244,242,235,.55));
  pointer-events:none;
}

.hero__rule{
  position:absolute; left:5.55%; top:4.8%; height:60%; width:1px;
  background:linear-gradient(to bottom, rgba(214,204,192,0), #D6CCC0 12%, #D6CCC0 88%, rgba(214,204,192,0));
  transform-origin:top; transform:scaleY(0);
  transition:transform 1.5s var(--ease) .55s;
}
.is-ready .hero__rule{ transform:scaleY(1); }

.hero__copy{
  position:relative; z-index:3;
  padding-left:8.6%;
  padding-top:clamp(23px,3.4vw,48px);
  max-width:52%;
}
.sparkle{
  position:absolute; left:9.6%; top:clamp(10px,2.1vw,30px);
  width:clamp(12px,1.18vw,17px); color:var(--script);
}
.sparkle svg{ width:100%; height:auto; fill:currentColor; display:block; }

.hero__title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(46px,6.82vw,100px);
  line-height:.93;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin-top:clamp(0px,.35vw,5px);
  color:var(--text);
}
.hero__title > span{ display:block; }

.hero__script-wrap{ position:relative; display:inline-block; }
.hero__script{
  font-size:clamp(64px,9.5vw,136px);
  letter-spacing:.018em;
  word-spacing:.06em;
  margin-top:clamp(-2px,0vw,2px);
  margin-left:.06em;
  line-height:.9;
}
.hero__heart{
  position:absolute; right:-7.5%; bottom:27%;
  width:clamp(14px,1.45vw,21px); color:var(--script);
}
.hero__heart svg{ width:100%; fill:none; stroke:currentColor; stroke-width:1.6; display:block; }

.hero__meta{
  font-size:clamp(9px,.76vw,11px);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); line-height:1.85;
}
.hero__meta:first-of-type{ margin-top:clamp(17px,2.4vw,34px); }

.hero__lead{
  margin-top:clamp(12px,1.4vw,20px);
  font-size:clamp(13px,1.05vw,15.5px);
  line-height:1.68;
  color:var(--text-soft);
  max-width:30em;
}
.hero__lead > span{ display:block; }

.hero__cta{
  margin-top:clamp(11px,1.26vw,18px);
  display:flex; align-items:center; gap:clamp(18px,2.5vw,36px);
  flex-wrap:wrap;
}

/* ---- arch photo ---- */
.hero__arch{
  position:absolute;
  left:47.56%; width:40.05%;
  top:calc(clamp(58px,4.6vw,67px) + 2.4%); bottom:0;
  border-radius:50% 50% 0 0 / 29% 29% 0 0;
  overflow:hidden;
  background:#CFC3B5;
  z-index:2;
}
.hero__arch img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  filter:contrast(.97) brightness(1.025);
}
.hero__arch-script{
  position:absolute; right:6%; bottom:6.5%;
  color:var(--script-light);
  font-size:clamp(24px,2.85vw,41px);
  text-align:right;
  line-height:1.15;
  transform:rotate(-4deg);
  text-shadow:0 2px 18px rgba(30,20,12,.35);
  z-index:3;
}

/* ---- side strip ---- */
.hero__side{
  position:absolute;
  left:87.9%; width:8.8%;
  top:calc(clamp(58px,4.6vw,67px) + 2.4%); bottom:0;
  display:flex; flex-direction:column;
  z-index:2;
}
.hero__side-img{ position:relative; overflow:hidden; aspect-ratio:90/150; flex:0 0 auto; }
.hero__side-img img{ width:100%; height:100%; object-fit:cover; }
.hero__side-script{
  flex:1 1 auto;
  display:flex; align-items:center;
  font-size:clamp(19px,1.9vw,27px);
  line-height:1.4;
  padding:2px 0 2px 6%;
  transform:rotate(-4.5deg);
}

/* =============================================================
   7. SERVICES
   ============================================================= */
.services{
  position:relative;
  background:var(--bg-soft);
  padding:clamp(26px,2.45vw,35px) clamp(14px,1.9vw,27px) clamp(24px,2.3vw,33px);
}
.services::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-soft) 20%,var(--line-soft) 80%,transparent);
}
.services__grid{
  display:grid;
  grid-template-columns:198fr 197fr 213fr 216fr 182fr;
  align-items:start;
}
.svc{
  position:relative;
  text-align:center;
  padding:0 clamp(6px,1.05vw,15px);
}
.svc + .svc::before,
.svc-note::before{
  content:""; position:absolute; left:0; top:4%; bottom:-6%; width:1px;
  background:var(--line-soft);
}
.svc-note::before{ top:-4%; bottom:-10%; background:var(--line); }

.svc__ico{
  width:clamp(46px,4.35vw,62px); aspect-ratio:1;
  border-radius:50%;
  background:var(--circle);
  display:grid; place-items:center;
  margin:0 auto clamp(11px,1.2vw,17px);
  color:var(--text);
  transition:transform .7s var(--ease), background .6s var(--ease);
}
.svc__ico svg{ width:44%; height:auto; display:block; }
.svc:hover .svc__ico{ transform:translateY(-4px) rotate(-4deg); background:#E3D5C4; }

.svc__title{
  font-family:var(--f-serif);
  font-weight:600;
  font-size:clamp(11.5px,1.06vw,15px);
  letter-spacing:.055em;
  white-space:nowrap;
  text-transform:uppercase;
  line-height:1.3;
  color:var(--text);
}
.svc__text{
  margin-top:clamp(8px,.85vw,12px);
  font-size:clamp(11px,.93vw,13.5px);
  line-height:1.62;
  color:var(--muted);
}

.svc-note{
  position:relative;
  padding-left:clamp(14px,2.2vw,34px);
  text-align:center;
  padding-top:clamp(2px,.4vw,6px);
}
.svc-note .script{
  font-size:clamp(30px,3.45vw,50px);
  line-height:1.1;
  transform:rotate(-3deg);
}
.svc-note__heart{
  display:block; width:clamp(14px,1.3vw,19px); margin:clamp(8px,1vw,14px) auto 0;
  color:var(--script);
}
.svc-note__heart svg{ width:100%; display:block; }

/* =============================================================
   8. ABOUT
   ============================================================= */
.about{
  position:relative;
  display:grid;
  grid-template-columns:31.74% 40.92% 14.16% 12.11%;
  padding-right:.97%;
  background:var(--bg-warm);
  isolation:isolate;
}
.about__hero{
  position:relative; overflow:hidden; background:#D8CEC2;
}
.about__hero img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:52% 13%;
}
.about__hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(40,28,18,0) 28%, rgba(40,28,18,.34) 100%),
             radial-gradient(60% 45% at 22% 55%, rgba(40,28,18,.26), rgba(40,28,18,0) 70%);
}
.about__hero figcaption{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.about__hero-script{
  position:absolute; left:5%; top:36%;
  color:var(--script-light);
  font-family:var(--f-script);
  font-size:clamp(24px,2.7vw,39px);
  line-height:1.4;
  transform:rotate(-9deg);
  text-shadow:0 2px 16px rgba(40,28,18,.3);
}
.about__hero-sign{
  position:absolute; left:7.5%; bottom:7.5%;
  color:#EFE8DE;
  font-size:clamp(8.5px,.74vw,10.5px);
  letter-spacing:.26em; text-transform:uppercase;
  line-height:2.05;
  text-shadow:0 2px 12px rgba(40,28,18,.4);
}

.about__copy{
  padding:clamp(28px,3.45vw,49px) clamp(20px,3.2vw,46px) clamp(20px,2.5vw,36px) clamp(22px,3.35vw,48px);
  background:var(--bg-warm);
  position:relative; z-index:2;
}
.about__title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(30px,4.28vw,62px);
  line-height:1.03;
  letter-spacing:-.015em;
  margin-top:clamp(7px,.95vw,14px);
}
.about__title > span{ display:block; }
.about__script{
  font-size:clamp(36px,4.65vw,66px);
  line-height:1;
  word-spacing:.06em;
  margin-top:clamp(0px,.2vw,3px);
  margin-left:.06em;
}
.about__lead{
  margin-top:clamp(14px,1.85vw,27px);
  font-size:clamp(12.5px,1.02vw,15px);
  line-height:1.56;
  color:var(--text-soft);
}
.about__lead > span{ display:block; }
.about__copy .btn{ margin-top:clamp(15px,1.9vw,27px); }

/* ---- gallery ---- */
.about__gallery{
  grid-column:3 / span 2;
  display:grid; grid-template-columns:53.9% 46.1%;
  gap:0 .38%;
}
.about__col{ display:flex; flex-direction:column; padding-top:clamp(8px,1.05vw,15px); }
.about__col--tall{ padding-top:0; }

.about__g1{ position:relative; flex:0 0 auto; overflow:hidden; aspect-ratio:145/146; background:#D5CABD; }
.about__g2{ position:relative; flex:0 0 auto; overflow:hidden; aspect-ratio:145/104; background:#D5CABD; margin-top:3.5%; }
.about__g1 img,.about__g2 img{ width:100%; height:100%; object-fit:cover; }
.about__g1 img{ object-position:50% 40%; }

.about__g-script{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-size:clamp(19px,2.05vw,29px);
  line-height:1.4;
  padding:clamp(8px,1vw,14px) 6% clamp(6px,.8vw,12px);
  transform:rotate(-3deg);
}

.about__words{
  padding:clamp(20px,2.7vw,39px) 0 clamp(10px,1.3vw,19px);
  text-align:center;
  font-size:clamp(8.5px,.78vw,11px);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted);
  line-height:2.25;
}
.about__words > span{ display:block; }
.about__g3{
  position:relative; flex:1 1 auto; overflow:hidden; background:#D5CABD;
  margin-bottom:clamp(8px,1.05vw,15px);
}
.about__g3 img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:52% 42%;
}

/* =============================================================
   9. PORTFOLIO
   ============================================================= */
.portfolio{
  position:relative;
  background:var(--bg);
  padding:clamp(20px,1.9vw,27px) 0 clamp(22px,2.25vw,32px);
}
.portfolio__head{
  display:grid;
  grid-template-columns:1.46fr 1fr;
  gap:clamp(20px,3vw,44px);
  padding:0 clamp(20px,2.4vw,34px) clamp(9px,1vw,14px) clamp(22px,3vw,43px);
  align-items:start;
}
.portfolio__headline{ position:relative; padding-left:clamp(18px,2.87vw,41px); }
.portfolio__rule{
  position:absolute; left:0; top:2px; bottom:14%; width:1px;
  background:var(--line);
  transform-origin:top; transform:scaleY(0);
  transition:transform 1.3s var(--ease);
}
.portfolio__headline.is-in .portfolio__rule{ transform:scaleY(1); }

.portfolio__title{
  display:flex; align-items:baseline; gap:clamp(8px,1.25vw,18px);
  flex-wrap:nowrap;
  margin-top:clamp(5px,.75vw,11px);
}
.portfolio__title > span:first-child{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(34px,4.55vw,65px);
  line-height:1;
  letter-spacing:.012em;
  white-space:nowrap;
  text-transform:uppercase;
}
.portfolio__title em{
  font-style:normal; white-space:nowrap;
  font-size:clamp(27px,4.25vw,61px);
  line-height:1;
  transform:translateY(.12em) rotate(-1.5deg);
}
.portfolio__aside{
  position:relative;
  padding-left:clamp(18px,2.6vw,38px);
  padding-top:clamp(4px,.7vw,10px);
}
.portfolio__aside::before{
  content:""; position:absolute; left:0; top:-4%; height:104%; width:1px;
  background:var(--line-soft);
}
.portfolio__aside .link-arrow{ position:absolute; right:0; top:0; }
.portfolio__text{
  margin-top:clamp(22px,2.7vw,39px);
  font-size:clamp(12px,1.02vw,15px);
  line-height:1.7;
  color:var(--text-soft);
}
.portfolio__text > span{ display:block; }

.portfolio__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(3px,.42vw,6px);
  padding:0 clamp(16px,1.95vw,28px);
}
.work{ display:block; }
.work__media{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:195/147; background:#D9D0C6;
}
.work__media img{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--pos,50% 50%);
  transition:transform 1.1s var(--ease), filter .8s var(--ease);
}
.work__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(35,25,17,.3), rgba(35,25,17,0) 55%);
  opacity:0; transition:opacity .7s var(--ease);
}
.work:hover .work__media img{ transform:scale(1.055); }
.work:hover .work__media::after{ opacity:1; }

.work__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:clamp(10px,1vw,14px) 2px 0;
}
.work__txt{ display:block; min-width:0; }
.work__cat{
  display:block;
  font-size:clamp(9px,.79vw,11.5px);
  letter-spacing:.21em; text-transform:uppercase;
  line-height:1.2;
  color:var(--text);
  transition:transform .55s var(--ease), color .5s var(--ease);
}
.work__desc{
  display:block;
  margin-top:.34em;
  font-size:clamp(10.5px,.88vw,13px);
  line-height:1.35;
  color:var(--muted);
  transition:transform .55s var(--ease) .03s;
}
.work:hover .work__cat,.work:hover .work__desc{ transform:translateX(4px); }
.work:hover .work__cat{ color:var(--accent-dark); }

.work__arr{
  flex:0 0 auto;
  width:clamp(22px,1.86vw,27px); aspect-ratio:1;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid; place-items:center;
  font-size:clamp(10px,.8vw,12px);
  color:var(--text-soft);
  transition:background .55s var(--ease), border-color .55s var(--ease), color .55s var(--ease), transform .55s var(--ease);
}
.work:hover .work__arr{
  background:var(--accent); border-color:var(--accent); color:#FBF8F4;
  transform:translateX(3px);
}

/* =============================================================
   10. CTA BAND
   ============================================================= */
.cta{
  position:relative;
  background:var(--bg-band);
  overflow:hidden;
  padding:clamp(20px,2.15vw,31px) var(--pad);
}
.cta__silk{ position:absolute; inset:0; width:24%; }
.cta__silk img{
  width:100%; height:100%; object-fit:cover; object-position:30% 50%;
}
.cta__silk::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(234,228,219,0) 0%, rgba(234,228,219,.3) 34%, rgba(234,228,219,.92) 60%, var(--bg-band) 78%);
}
.cta::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(240,235,228,0) 45%, rgba(247,244,239,.75) 100%);
  pointer-events:none;
}

.cta__in{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:27fr 44fr 29fr;
  align-items:center;
  gap:0;
  min-height:clamp(72px,6.3vw,90px);
  padding-left:18%;
  padding-right:7.8%;
}
.cta__lead{ position:relative; }
.cta__script{
  font-size:clamp(27px,3.05vw,44px);
  margin-left:1.1em;
  transform:rotate(-2deg);
  display:block;
}
.cta__title{
  font-family:var(--f-display);
  font-weight:400;
  white-space:nowrap;
  font-size:clamp(18px,1.95vw,28px);
  letter-spacing:.035em;
  text-transform:uppercase;
  line-height:1.1;
  margin-top:.1em;
}
.cta__heart{
  position:absolute; right:6%; bottom:6%;
  width:clamp(14px,1.35vw,20px); color:var(--script);
}
.cta__heart svg{ width:100%; display:block; }

.cta__text{
  position:relative;
  padding-left:clamp(24px,4.85vw,70px);
  font-size:clamp(12px,1.02vw,15px);
  line-height:1.72;
  color:var(--text-soft);
}
.cta__text::before{
  content:""; position:absolute; left:0; top:-45%; height:190%; width:1px;
  background:var(--line);
}
.cta__text > span{ display:block; }
.cta__btn{ justify-self:end; }

/* =============================================================
   11. FOOTER
   ============================================================= */
.site-footer{
  background:var(--bg-light);
  padding:clamp(16px,1.65vw,23px) var(--pad) clamp(22px,2.35vw,34px);
}
.site-footer__in{
  display:grid;
  grid-template-columns:1.15fr 1.35fr auto 1fr;
  align-items:center;
  gap:clamp(20px,3vw,44px);
}
.logo--foot{ display:block; font-size:clamp(12px,1.05vw,15px); line-height:1.3; }
.foot-copy{
  margin-top:clamp(6px,.72vw,10px);
  font-size:clamp(10px,.82vw,12px);
  line-height:1.4;
  color:var(--muted);
}
.foot-nav{ display:flex; gap:clamp(14px,1.9vw,28px); justify-content:center; flex-wrap:wrap; }
.foot-nav a{
  position:relative;
  font-size:clamp(9px,.76vw,11px);
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--text-soft);
  padding-bottom:3px;
}
.foot-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.foot-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.foot-social{
  position:relative;
  display:flex; gap:clamp(12px,1.3vw,19px); align-items:center;
  padding-left:clamp(18px,2.5vw,36px);
}
.foot-social::before{
  content:""; position:absolute; left:0; top:-90%; height:280%; width:1px;
  background:var(--line-soft);
}
.foot-social a{
  width:clamp(16px,1.35vw,20px); color:var(--text);
  display:block;
  transition:transform .5s var(--ease), color .5s var(--ease);
}
.foot-social a:hover{ transform:translateY(-3px) rotate(-6deg); color:var(--accent-dark); }
.foot-social svg{ width:100%; display:block; }

.foot-claim{
  position:relative;
  justify-self:end;
  display:flex; align-items:center; gap:clamp(8px,1vw,14px);
  font-size:clamp(8.5px,.74vw,10.5px);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
  line-height:1.95;
  text-align:right;
}
.foot-claim__line{ width:clamp(40px,4.6vw,66px); height:1px; background:var(--line); flex:0 0 auto; }
.foot-claim .ico-heart{ color:var(--script); font-size:1.25em; align-self:flex-end; }

/* =============================================================
   12. ANIMATION PRIMITIVES
   ============================================================= */
.anim-line{ display:block; overflow:hidden; }
.anim-line > span{
  display:block;
  transform:translateY(115%) rotate(1.2deg);
  opacity:.001;
  transition:transform 1.15s var(--ease), opacity .9s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:transform;
}
.anim-line.is-in > span,
.is-in > .anim-line > span{ transform:none; opacity:1; }

.anim-up{
  opacity:.001; transform:translateY(26px);
  transition:transform 1.05s var(--ease), opacity .85s var(--ease);
  transition-delay:var(--d,0ms);
}
.anim-up.is-in{ opacity:1; transform:none; }

.anim-fade{
  opacity:.001; transform:translateY(-8px);
  transition:transform .9s var(--ease), opacity .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.is-ready .anim-fade{ opacity:1; transform:none; }

.anim-pop{
  opacity:.001; transform:scale(.4) rotate(-25deg);
  transition:transform 1.1s cubic-bezier(.2,1.35,.4,1), opacity .7s var(--ease);
  transition-delay:var(--d,0ms);
}
.anim-pop.is-in,.is-ready .anim-pop{ opacity:1; transform:none; }

/* image mask reveal */
:where(.reveal-img){ position:relative; }
.reveal-img{ overflow:hidden; }
.reveal-img::after{
  content:""; position:absolute; inset:-1px; z-index:4;
  background:var(--bg-warm);
  transform-origin:bottom;
  transform:scaleY(1);
  transition:transform 1.35s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal-img.is-in::after{ transform:scaleY(0); }
.reveal-img img{
  transform:scale(1.14);
  transition:transform 1.9s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal-img.is-in img{ transform:scale(1); }
.hero__arch.reveal-img img,
.work__media.reveal-img img{ transition:transform 1.9s var(--ease), filter .8s var(--ease); }
.work:hover .work__media.reveal-img img{ transform:scale(1.055); }

/* parallax host */
[data-speed]{ will-change:transform; }

/* =============================================================
   13. CUSTOM CURSOR
   ============================================================= */
.cursor{ position:fixed; inset:0; pointer-events:none; z-index:900; display:none; }
.cursor__dot,.cursor__ring{
  position:absolute; top:0; left:0; border-radius:50%;
  transform:translate3d(-100px,-100px,0);
}
.cursor__dot{
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  background:var(--accent-dark);
  transition:opacity .3s, width .35s var(--ease), height .35s var(--ease);
}
.cursor__ring{
  width:30px; height:30px; margin:-15px 0 0 -15px;
  border:1px solid rgba(124,103,84,.5);
  transition:width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), border-color .4s, background .4s;
}
body.cursor-on .cursor{ display:block; }
body.cursor-on *{ cursor:none !important; }
.cursor.is-hover .cursor__ring{
  width:52px; height:52px; margin:-26px 0 0 -26px;
  border-color:rgba(124,103,84,.75);
  background:rgba(145,124,106,.07);
}
.cursor.is-hover .cursor__dot{ width:0; height:0; margin:0; }

/* =============================================================
   14. RESPONSIVE
   ============================================================= */
@media (max-width:1180px){
  .services__grid{ grid-template-columns:repeat(2,1fr); gap:clamp(24px,3.5vw,40px) 0; }
  .svc__title{ white-space:normal; }
  .svc + .svc::before{ top:0; bottom:0; }
  .svc:nth-child(odd)::before{ display:none; }
  .svc-note{ grid-column:1 / -1; padding-left:0; padding-top:clamp(14px,2vw,24px); }
  .svc-note::before{ left:12%; right:12%; top:0; bottom:auto; width:auto; height:1px; }
  .svc-note .script{ font-size:clamp(30px,5vw,42px); }

  .about{ grid-template-columns:36% 64%; padding-right:0; }
  .about__gallery{ grid-column:1 / -1; grid-template-columns:1fr 1fr; gap:0 4px; }
  .about__col{ padding:4px; }
  .about__g3{ min-height:340px; }

  .portfolio__grid{ grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,18px) clamp(8px,1vw,12px); }

  .site-footer__in{ grid-template-columns:1fr 1fr; gap:28px 24px; }
  .foot-claim{ justify-self:start; text-align:left; }
  .foot-social::before{ display:none; }
  .foot-social{ padding-left:0; }
  .foot-nav{ justify-content:flex-start; }
}

@media (max-width:980px){
  :root{ --hero-h:auto; }
  .burger{ display:block; }
  .nav{ display:none; }
  .site-header .btn--pill{ display:none; }

  .hero{
    height:auto;
    padding-bottom:clamp(28px,5vw,48px);
    display:grid;
    grid-template-columns:1fr;
  }
  .hero::after{ display:none; }
  .hero__rule{ display:none; }
  .hero__copy{
    max-width:none;
    padding:clamp(34px,7vw,56px) var(--pad) clamp(26px,4vw,40px);
  }
  .sparkle{ left:var(--pad); top:clamp(18px,3.6vw,30px); }
  .hero__title{ font-size:clamp(54px,15.5vw,110px); }
  .hero__script{ font-size:clamp(44px,12.5vw,90px); }
  .hero__heart{ left:auto; right:14%; top:auto; bottom:-6%; }
  .hero__lead{ max-width:34em; }

  .hero__arch{
    position:relative; left:auto; top:auto; bottom:auto;
    width:calc(100% - var(--pad)*2);
    margin:0 var(--pad);
    aspect-ratio:410/452;
    border-radius:50% 50% 0 0 / 26% 26% 0 0;
  }
  .hero__side{
    position:relative; left:auto; top:auto; bottom:auto;
    width:calc(100% - var(--pad)*2);
    margin:clamp(8px,1.6vw,14px) var(--pad) 0;
    flex-direction:row; align-items:stretch;
    gap:clamp(8px,1.4vw,14px);
  }
  .hero__side-img{ flex:1 1 0; aspect-ratio:3/4; }
  .hero__side-script{
    flex:1 1 0; padding:0; justify-content:center; text-align:center;
    font-size:clamp(18px,3.3vw,26px);
  }
}

@media (max-width:860px){
  .about{ grid-template-columns:1fr; }
  .about__hero{ aspect-ratio:16/13; }
  .about__copy{ padding:clamp(30px,6vw,48px) var(--pad); }
  .about__title{ font-size:clamp(32px,7.4vw,54px); }
  .about__script{ font-size:clamp(30px,7vw,50px); }
  .about__gallery{ grid-template-columns:1fr 1fr; }
  .about__col--tall{ padding-top:4px; }
  .about__words{ padding-top:clamp(14px,3vw,24px); }
  .about__g3{ min-height:0; aspect-ratio:124/244; }

  .portfolio__head{ grid-template-columns:1fr; }
  .portfolio__aside{ padding-left:clamp(16px,2.5vw,36px); padding-top:clamp(16px,3vw,26px); }
  .portfolio__aside::before{ top:0; height:100%; }
  .portfolio__aside .link-arrow{ position:static; display:inline-flex; margin-bottom:clamp(10px,2vw,16px); }
  .portfolio__text{ margin-top:0; }
  .portfolio__grid{ grid-template-columns:repeat(2,1fr); }
  .portfolio__title{ flex-wrap:wrap; }
  .portfolio__title > span:first-child,
  .portfolio__title em{ white-space:normal; }

  .cta{ padding:clamp(34px,6vw,52px) var(--pad); }
  .cta__silk{ width:100%; opacity:.5; }
  .cta__silk::after{ background:linear-gradient(180deg, rgba(234,228,219,.25) 0%, rgba(234,228,219,.9) 70%, var(--bg-band) 100%); }
  .cta__in{
    grid-template-columns:1fr; padding-left:0; text-align:center;
    justify-items:center; gap:clamp(18px,3.4vw,28px);
  }
  .cta__script{ font-size:clamp(30px,6.5vw,44px); margin-left:0; }
  .cta__title{ font-size:clamp(26px,5.4vw,38px); }
  .cta__heart{ position:static; display:block; margin:10px auto 0; }
  .cta__text{ padding-left:0; }
  .cta__text::before{ left:50%; top:auto; bottom:auto; transform:translateX(-50%) translateY(-160%); height:1px; width:64px; }
  .cta__btn{ justify-self:center; }
}

@media (max-width:640px){
  body{ font-size:14px; }
  .hero__copy{ padding-top:clamp(30px,8vw,46px); }
  .hero__meta{ letter-spacing:.24em; }
  .hero__side{ flex-wrap:wrap; }
  .hero__side-img{ flex:1 1 calc(50% - 7px); }
  .hero__side-script{ flex:1 1 100%; order:3; margin-top:8px; }

  .services__grid{ grid-template-columns:1fr; }
  .svc + .svc::before{ display:none; }
  .svc{ padding-bottom:clamp(18px,4vw,26px); border-bottom:1px solid var(--line-soft); }
  .svc__text br{ display:none; }

  .about__gallery{ grid-template-columns:1fr; }
  .about__g1,.about__g2{ aspect-ratio:4/3; }
  .about__g3{ aspect-ratio:4/5; }
  .about__lead br,.hero__lead br{ display:none; }

  .portfolio__grid{ grid-template-columns:1fr; gap:clamp(18px,4vw,26px); }
  .work__media{ aspect-ratio:4/3; }
  .portfolio__title{ gap:6px; }

  .site-footer__in{ grid-template-columns:1fr; text-align:left; }
  .foot-claim{ align-items:flex-start; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  .anim-line > span,.anim-up,.anim-fade,.anim-pop{ opacity:1 !important; transform:none !important; }
  .reveal-img::after{ display:none; }
  .reveal-img img{ transform:none !important; }
  .hero__rule,.portfolio__rule{ transform:scaleY(1) !important; }
  .cursor{ display:none !important; }
  body.cursor-on *{ cursor:auto !important; }
}

/* ---------- deterministic screenshots (?static) ---------- */
.no-anim *,.no-anim *::before,.no-anim *::after{
  transition-duration:0s !important; transition-delay:0s !important; animation:none !important;
}
.no-anim .hero__rule,.no-anim .portfolio__rule{ transform:scaleY(1) !important; }

/* ---------- no-js safety ---------- */
.hero .reveal-img::after,
.portfolio .reveal-img::after{ background:var(--bg); }
.hero__arch{ bottom:-2.2%; }

.no-js .anim-line > span,
.no-js .anim-up,
.no-js .anim-fade,
.no-js .anim-pop{ opacity:1; transform:none; }
.no-js .reveal-img::after{ display:none; }
.no-js .reveal-img img{ transform:none; }