@font-face {
  font-family: "DM Sans";
  src: url("assets/dm-sans.ttf") format("truetype");
  font-weight: 100 1000;
  font-display: swap;
}
:root{--cream:#f3eee5;--olive:#4e5133;--orange:#dd6135;--ink:#191918}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;font-size:17px;line-height:1.32}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--orange);outline-offset:6px}.wrap{width:min(1120px,81%);margin-inline:auto}header{display:flex;align-items:center;justify-content:space-between;padding:58px 0 34px;gap:30px}.logo{width:365px;max-height:90px}nav{display:flex;gap:38px;font-size:21px}nav a:hover{color:var(--orange)}h1,h2,.intro,blockquote{font-family:Georgia,'Times New Roman',serif}h1{font-size:72px;line-height:.96;letter-spacing:-1.8px;margin:40px 0 26px}h1 span{color:var(--orange)}h2{font-size:42px;line-height:1.06;color:var(--olive);margin:0 0 30px}.eyebrow{text-transform:uppercase;letter-spacing:2.4px;font-size:18px;margin:0 0 30px}.intro{font-size:30px;font-style:italic;line-height:1.12;margin:0 0 30px}.hero{display:grid;grid-template-columns:46% 60%;align-items:center;padding:25px 0 75px;gap:2%;}.hero-copy>p:not(.eyebrow):not(.intro){max-width:460px}.hero-image{width:100%}.button{display:inline-flex;align-items:center;gap:18px;border-radius:40px;background:var(--olive);color:white;font-weight:700;font-size:14px;padding:15px 23px;margin-top:42px;transition:background .2s,transform .2s}.button span{font-size:24px;line-height:18px}.button:hover,.button:focus-visible{background:var(--orange);color:var(--ink);transform:translateY(-2px)}.services{padding:30px 0 95px}.services-heading{display:grid;grid-template-columns:40% 60%;align-items:start;gap:0}.services-heading>p{margin:12px 0 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:65px;margin-top:46px}.cards img{width:100%;height:260px;object-fit:contain;object-position:center bottom;margin-bottom:30px}.cards h3{text-transform:uppercase;font-size:22px;margin:0 0 8px}.cards p{font-size:15px;line-height:1.3;margin:0}.match{background:var(--olive) url('assets/match.webp') center/cover;color:var(--cream);text-align:center;padding:54px 0 62px}.match h2{font-size:58px;color:var(--cream);margin-bottom:23px}.match .intro{font-size:30px}.match ul{list-style:none;text-align:left;width:max-content;max-width:100%;padding:0;margin:45px auto 0}.match li{position:relative;padding:8px 0 8px 40px;font-size:15px}.match li:before{content:'✓';position:absolute;left:0;top:6px;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;background:#dc7193}.match li:nth-child(2):before{background:#7d8034}.match li:nth-child(3):before{background:var(--orange)}.match li:nth-child(4):before{background:#b8d0e6}.testimonial{padding:58px 0 70px}.testimonial figure{position:relative;background:url('assets/quote.webp') center/100% 100% no-repeat;width:78%;padding:30px 35px 24px;margin:0 auto;text-align:center}blockquote{font-size:32px;font-style:italic;line-height:1.15;margin:0 0 18px}figcaption{font-size:16px}.quote-open,.quote-close{position:absolute;width:65px}.quote-open{left:20px;top:-8px}.quote-close{right:-30px;bottom:0}.about{max-width:1440px;margin:auto;display:grid;grid-template-columns:44.3% 55.7%;align-items:stretch}.portrait{width:100%;height:100%;object-fit:cover}.about-copy{padding:70px 12% 60px 12.5%;background:url('assets/flower.webp') right bottom/78% auto no-repeat}.about-copy p:not(.eyebrow){font-size:15px;line-height:1.3;margin:18px 0}.about-copy h3{font-size:22px;line-height:1.2;margin:25px 0 18px}.about-copy h2{margin:34px 0}.contact{text-align:center;padding:80px 0 90px}.contact h2{font-size:33px;font-weight:400;line-height:1.12;color:#111;background:url('assets/marker.webp') center/100% 100% no-repeat;padding:30px 30px;margin:15px auto 25px;max-width:1000px}.contact>p:not(.eyebrow){font-size:17px}.contact .button{margin-top:16px}footer{background:var(--olive);color:var(--cream);padding:48px 0}footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:35px}footer img{width:180px}footer p{font-size:12px}footer .email{font-size:14px}.skip{position:fixed;top:-80px;left:20px;background:white;padding:15px;z-index:9}.skip:focus{top:10px}
@media(min-width:1500px){.hero{padding-bottom:95px}}@media(max-width:1000px){.logo{width:280px}nav{gap:22px;font-size:18px}h1{font-size:57px}.hero{grid-template-columns:46% 57%;gap:0}.intro{font-size:26px}.cards{gap:32px}.cards img{height:210px}.about-copy{padding:40px 9%}blockquote{font-size:26px}.contact h2{font-size:29px}footer .wrap{flex-wrap:wrap}}@media(max-width:650px){.wrap{width:88%}header{padding:28px 0 20px;flex-direction:column;gap:25px}.logo{width:245px}nav{width:100%;justify-content:space-between;gap:10px;font-size:17px}.hero{display:flex;flex-direction:column;padding:35px 0 50px;gap:30px;align-items:stretch}.eyebrow{font-size:14px;margin-bottom:25px}h1{font-size:58px;margin-top:25px}.hero-copy{max-width:480px}.hero-copy>p:not(.eyebrow):not(.intro){font-size:16px}.hero-image{width:100%;align-self:center}.button{margin-top:23px}.services{padding:10px 0 50px}.services-heading{display:block}h2{font-size:36px}.services-heading p{font-size:16px}.cards{grid-template-columns:1fr;gap:42px;margin-top:35px}.cards article{max-width:390px;margin:auto;width:100%}.cards img{height:260px;margin-bottom:20px}.cards p{font-size:16px}.match{padding:45px 0}.match h2{font-size:44px}.match .intro{font-size:25px}.match ul{margin-top:25px}.match li{font-size:15px;padding-top:9px;padding-bottom:9px}.testimonial{padding:45px 0}.testimonial figure{width:100%;padding:35px 20px 25px}blockquote{font-size:24px}blockquote br{display:none}.quote-open,.quote-close{width:43px}.quote-open{left:5px;top:0}.quote-close{right:0;bottom:-12px}figcaption{font-size:13px}.about{display:flex;flex-direction:column}.portrait{max-height:600px;object-position:center 36%;aspect-ratio:4/4.4}.about-copy{padding:40px 6% 30px}.about-copy p:not(.eyebrow){font-size:16px}.about-copy h2{margin:25px 0}.contact{padding:40px 0 55px}.contact h2{font-size:26px;padding:30px 6px;background-size:100% 100%}.contact h2 br{display:none}.contact>p:not(.eyebrow){font-size:16px}footer{padding:32px 0}footer .wrap{flex-direction:column;text-align:center;gap:18px}footer p{margin:0}footer img{width:155px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
/* Blend the supplied white-backed decorative exports into the paper. */
.testimonial figure{background-blend-mode:multiply;background-color:var(--cream)}.quote-open,.quote-close{mix-blend-mode:multiply}.about-copy{background-blend-mode:multiply;background-color:var(--cream)}.contact h2{background-blend-mode:multiply;background-color:var(--cream)}.hero-image,.cards img{mix-blend-mode:multiply}@media(min-width:651px) and (max-width:900px){.about{grid-template-columns:43% 57%}.about-copy{padding:35px 7%}.about-copy p:not(.eyebrow){font-size:14px}.about-copy h2{font-size:33px}.portrait{object-position:65% center}}
@media(min-width:651px) and (max-width:900px){h1{font-size:clamp(38px,6.1vw,55px);letter-spacing:-1px}h1 span{white-space:nowrap}.intro{font-size:24px}}

/* Edge-to-edge imagery and a quieter floral accent. */
.hero.wrap{width:100%;padding-left:max(9.5%,calc((100% - 1120px)/2));grid-template-columns:minmax(0,46fr) minmax(0,64fr);gap:2%;overflow:hidden}
.hero-image{width:112%;max-width:none;justify-self:start}
.about{max-width:none;width:100%}
.about-copy{position:relative;isolation:isolate;overflow:hidden;background-image:none}
.about-copy::before{content:"";position:absolute;z-index:-1;pointer-events:none;right:-18%;bottom:-4%;width:92%;height:100%;background:url('assets/flower.webp') right bottom/contain no-repeat;mix-blend-mode:multiply;opacity:.3}
.cards img{transform-origin:50% 80%;transition:transform 1.8s ease-in-out}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.cards article:hover img{animation:gentle-sway 3.6s ease-in-out infinite}
}
@keyframes gentle-sway{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-9px) rotate(-2.5deg) scale(1.025)}75%{transform:translateY(-4px) rotate(2deg) scale(1.015)}}
@media(max-width:650px){.hero.wrap{padding-left:6%;padding-right:0}.hero-copy{padding-right:6%}.hero-image{width:108%;align-self:flex-start}.about-copy::before{right:-24%;width:100%;opacity:.25}}

/* Studio layout, November */
header { padding-block: 12px 22px; }
.hero.wrap { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
.collage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1.14;
  background: url('assets/paper.webp') center / 112% 113% no-repeat;
  background-color: var(--cream);
  background-blend-mode: multiply;
}
.collage img { position: absolute; }
.collage-photo { width: 86%; top: 13%; left: 8%; }
.tape.top { width: 37%; top: 9%; left: 16%; transform: rotate(1deg); }
.tape.bottom { width: 31%; bottom: 10%; right: 12%; transform: rotate(1deg); }
.doodle { width: 9%; left: 6%; bottom: -1%; mix-blend-mode: multiply; }
.services.wrap { width: min(1360px, 94%); text-align: center; padding-top: 24px; }
.services-heading { display: block; }
.services-heading p { max-width: 685px; margin: 20px auto 0; }
.cards { gap: clamp(18px, 2.2vw, 35px); }
.cards article { min-width: 0; }
.product-frame {
  aspect-ratio: 1.2;
  padding: 8%;
  overflow: hidden;
  border-radius: 14px;
  background: #fffcf7;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.product-frame img {
  mix-blend-mode: normal;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  margin: 0;
}
.cards p { width: 88%; margin-inline: auto; }
.about { grid-template-columns: 41.7% 58.3%; background: var(--cream); }
.about-copy { background-color: var(--cream); align-self: stretch; align-content: center; }
.about-copy::before { opacity: .25; right: -13%; }
.contact h2 { background: none; }
.social { display: flex; gap: 12px; }
.social a { display: grid; place-items: center; width: 36px; height: 36px; background: white; border-radius: 4px; color: var(--olive); }
.social svg { width: 25px; height: 25px; }
@media(max-width:650px) {
  header { padding-block: 24px; }
  .collage { width: 100%; }
  .services.wrap { width: 88%; }
  .cards { gap: 38px; }
  .about-copy::before { opacity: .22; }
}

.match li {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.45;
}
.testimonial blockquote {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
}

.collage-photo {
  aspect-ratio: 1.39;
  object-fit: cover;
  transform: rotate(1.5deg);
}

/* Shared spacing between section labels, headings and reading text. */
.eyebrow { margin: 0 0 clamp(16px, 1.7vw, 24px); }
.hero-copy h1 { margin: 0 0 clamp(20px, 2vw, 28px); }
.hero-copy .intro { margin-bottom: 22px; }
.hero-copy > p:not(.intro):not(.eyebrow),
.services-heading p,
.cards p,
.about-copy p:not(.eyebrow) { line-height: 1.52; }
.services-heading h2, .about-copy h2 { margin: 0 0 20px; }
.services-heading p { margin: 0 auto; max-width: 63ch; }
.cards p { max-width: 37ch; }
.about-copy p:not(.eyebrow) { max-width: 60ch; margin: 0 0 1em; }
.about-copy h3 { margin: 1.25em 0 .65em; }
.contact h2 { margin: 0 auto 20px; padding: 0; }
.contact .eyebrow { margin-bottom: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .collage .doodle { animation: flower-float 3.6s ease-in-out infinite; }
  .about-copy::before { animation: floral-turn 20s ease-in-out infinite alternate; }
}
@keyframes flower-float {
  0%, 100% { transform: translateY(3px); }
  50% { transform: translateY(-5px); }
}
@keyframes floral-turn {
  from { transform: rotate(-6deg); }
  to { transform: rotate(6deg); }
}

.hero.wrap, .contact.wrap {
  background: var(--cream);
}
.hero.wrap { padding-block: clamp(48px, 5vw, 82px); }
.collage .doodle { mix-blend-mode: normal; }
.testimonial { padding-block: clamp(84px, 8vw, 144px); }

.about {
  padding: clamp(40px, 5vw, 88px) max(8%, calc((100% - 1240px) / 2));
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(32px, 5vw, 92px);
}
.portrait-frame {
  position: relative;
  min-width: 0;
}
.portrait-frame .portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: right top;
}
.about-copy {
  padding: 0;
  align-content: start;
}
.about-copy > :last-child { margin-bottom: 0; }
.contact.wrap {
  width: 100%;
  margin-inline: 0;
  padding: clamp(80px, 8vw, 140px) max(10%, calc((100% - 1120px) / 2));
}
@media (max-width: 840px) {
  .about {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-inline: 7%;
  }
  .portrait-frame { width: min(100%, 400px); margin-inline: auto; }
  .portrait-frame .portrait {
    position: static;
    height: auto;
    aspect-ratio: auto;
  }
  .about-copy { width: min(100%, 60ch); margin-inline: auto; }
}
@media (max-width: 650px) {
  .contact.wrap { padding-inline: 9%; }
  .hero.wrap { padding-top: 56px; }
}

.contact.wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #292a22;
  color: #fffaf1;
  text-align: left;
  padding-block: clamp(72px, 7vw, 116px);
}
.contact::before, .contact::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.contact::before {
  z-index: -2;
  inset: -4px -4px -4px 33%;
  background: url("assets/contact-studio.jpg") center 33% / cover no-repeat;
  filter: none;
}

/* Final layout polish: a floating hero collage and concise scroll reveals. */
@media (min-width: 901px) {
  .hero.wrap {
    width: min(1380px, 86%);
    padding-inline: 0;
    grid-template-columns: minmax(420px, .9fr) minmax(540px, 1.1fr);
    gap: clamp(48px, 5.5vw, 96px);
    overflow: visible;
  }
  .collage {
    width: 100%;
    max-width: 720px;
    justify-self: end;
  }
}

.product-frame { padding: 0; }
.product-frame img { object-fit: cover; }

.reveal-ready .match li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .48s ease, transform .58s cubic-bezier(.2,.75,.2,1);
}
.reveal-ready .match.is-visible li { opacity: 1; transform: translateY(0); }
.reveal-ready .match.is-visible li:nth-child(2) { transition-delay: .11s; }
.reveal-ready .match.is-visible li:nth-child(3) { transition-delay: .22s; }
.reveal-ready .match.is-visible li:nth-child(4) { transition-delay: .33s; }

.reveal-ready .testimonial blockquote,
.reveal-ready .testimonial figcaption,
.reveal-ready .testimonial .quote-open,
.reveal-ready .testimonial .quote-close {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.75,.2,1);
}
.reveal-ready .testimonial.is-visible blockquote,
.reveal-ready .testimonial.is-visible .quote-open,
.reveal-ready .testimonial.is-visible .quote-close { opacity: 1; transform: translateY(0); }
.reveal-ready .testimonial.is-visible figcaption { opacity: 1; transform: translateY(0); transition-delay: .22s; }
.reveal-ready .testimonial.is-visible .quote-close { transition-delay: .12s; }

@media (max-width: 900px) {
  .hero.wrap {
    width: 88%;
    padding-inline: 0;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .match li,
  .reveal-ready .testimonial blockquote,
  .reveal-ready .testimonial figcaption,
  .reveal-ready .testimonial .quote-open,
  .reveal-ready .testimonial .quote-close { opacity: 1; transform: none; transition: none; }
}
.contact::after {
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #292a22 32%, rgb(41 42 34 / 90%) 45%, rgb(24 25 20 / 35%) 72%, rgb(24 25 20 / 28%));
}
.contact h2 {
  color: inherit;
  font-size: clamp(28px, 2.6vw, 42px);
  max-width: 23ch;
  margin-inline: 0;
  text-wrap: balance;
}
.contact h2 br { display: none; }
.contact h2 br::after { content: " "; }
.contact > p:not(.eyebrow) { max-width: 42ch; line-height: 1.55; }
.contact .button { background: var(--cream); color: var(--ink); }
.contact .button:is(:hover, :focus-visible) { background: var(--orange); }
@media (max-width: 700px) {
  .contact.wrap { padding: 260px 7% 54px; }
  .contact::before { inset: -4px; background-position: center 30%; }
  .contact::after { background: linear-gradient(180deg, rgb(20 21 17 / 22%), rgb(20 21 17 / 30%) 28%, rgb(20 21 17 / 85%) 55%, #292a22); }
}

/* November copy and interaction refinements. */
@media (min-width: 901px) {
  header.wrap { width: min(1380px, 86%); }
}
@media (max-width: 900px) {
  header.wrap { width: 88%; }
}

.services-prompt {
  margin: clamp(38px, 4.5vw, 64px) 0 clamp(28px, 3vw, 42px);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.15;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
.cards { margin-top: 0; }
.product-frame img {
  transform: scale(1);
  transform-origin: center;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .cards article:hover .product-frame img {
    animation: none;
    transform: scale(1.028);
  }
}

.about-copy h3 {
  font-size: 15px;
  line-height: 1.52;
  font-weight: 700;
  max-width: 60ch;
}

.services-cta { text-align: center; margin-top: clamp(38px, 4vw, 58px); }
.button.button-light {
  margin-top: 0;
  background: #fffaf1;
  color: var(--olive);
  border: 2px solid var(--olive);
  box-shadow: none;
}
.button.button-light:is(:hover, :focus-visible) {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
}
.testimonial-label {
  text-align: center;
  margin-bottom: clamp(34px, 4vw, 56px);
}

@media (max-width: 650px) {
  .services-prompt { margin-top: 34px; font-size: 24px; }
  .about-copy h3 { font-size: 16px; }
  .hero-copy {
    width: 100%;
    margin-inline: auto;
    padding-right: 0;
    text-align: center;
  }
  .hero-copy > p { margin-inline: auto; }
  .collage { margin-inline: auto; }
}

@media (max-width: 700px) {
  .contact.wrap { text-align: center; }
  .contact h2,
  .contact > p:not(.eyebrow) { margin-inline: auto; }
}