/* FLORÊ — atelier photographique. One stylesheet, mobile first. */
@font-face {
  font-family:Instrument;
  src:url('assets/instrument.woff') format('woff');
  font-style:normal;
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Instrument;
  src:url('assets/instrument-italic.woff') format('woff');
  font-style:italic;
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Manrope;
  src:url('assets/manrope-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Manrope;
  src:url('assets/manrope-500.woff2') format('woff2');
  font-weight:500;
  font-display:swap
}
@font-face {
  font-family:FloreFallback;
  src:url('assets/editorial.woff') format('woff');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:FloreFallback;
  src:url('assets/editorial-italic.woff') format('woff');
  font-style:italic;
  font-weight:400;
  font-display:swap
}
:root {
  --cream:#f5f0e8;
  --paper:#ece6dc;
  --ink:#262b20;
  --olive:#303623;
  --clay:#9a6d51;
  --sage:#e6e3d4;
  --clay-surface:#a0785d;
  --green-surface:#333823;
  --muted:#726e61;
  --line:#d3cbbc;
  --serif:Instrument,FloreFallback,Georgia,serif;
  --sans:Manrope,Arial,sans-serif;
  --gutter:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --rule:1px solid var(--line)
}
/* Fundamentals */
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:96px
}
body {
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
body::after {
  content:'';
  position:fixed;
  inset:0;
  z-index:20;
  pointer-events:none;
  background:url('assets/paper-grain.png') repeat;
  opacity:.14
}
::selection {
  background:var(--clay);
  color:var(--cream)
}
main {
  overflow:clip
}
section {
  position:relative;
  isolation:isolate
}
figure,h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1.02
}
h2 {
  font-size:clamp(43px,10.8vw,64px);
  text-wrap:balance
}
em {
  font-weight:400
}
h2 em {
  color:var(--clay)
}
p {
  line-height:1.7
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
img {
  display:block;
  max-width:100%;
  height:auto
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--clay);
  outline-offset:5px
}
.eyebrow {
  display:block;
  font-size:10px;
  line-height:1.6;
  font-weight:500;
  letter-spacing:.12em;
  margin-bottom:19px
}
.two-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:52px;
  padding:14px 23px;
  font-size:13px;
  font-weight:500;
  border:1px solid transparent;
  border-radius:1px;
  transition:transform .3s var(--ease),background .3s var(--ease);
  text-align:center
}
.button-olive {
  background:var(--olive);
  color:var(--cream)
}
.button-cream {
  background:var(--cream);
  color:var(--olive)
}
.text-link {
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:13px;
  padding:4px 0;
  border-bottom:1px solid currentColor
}
.text-link::after {
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease)
}
.light-link {
  color:var(--cream)
}
/* Identity — the original logo is always separate from the portraits. */
.compact-header {
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  height:80px;
  padding:12px var(--gutter);
  background:rgba(245,240,232,.97);
  border-bottom:1px solid transparent;
  transition:height .35s var(--ease),padding .35s var(--ease),border-color .3s,box-shadow .3s,background .3s
}
.compact-header.scrolled {
  height:75px;
  padding-top:9px;
  padding-bottom:9px;
  background:rgba(245,240,232,.84);
  backdrop-filter:blur(12px) saturate(115%);
  border-bottom-color:var(--line);
  box-shadow:0 3px 16px #262b2005
}
.brand {
  width:98px;
  flex-shrink:0
}
.brand img {
  width:100%;
  height:auto
}
.header-actions {
  display:flex;
  align-items:center;
  gap:18px
}
.header-actions .button {
  min-height:44px;
  padding:10px 17px
}
.header-actions .text-link {
  font-size:12px
}
.reading-progress {
  position:fixed;
  inset:0 auto auto 0;
  z-index:40;
  height:1px;
  width:100%;
  background:var(--clay);
  transform:scaleX(0);
  transform-origin:left;
  pointer-events:none
}
/* 01 / The first photographic proof */
.compact-hero {
  padding:38px var(--gutter) 47px;
  background:radial-gradient(ellipse at calc(78% + var(--glow-x,0px)) calc(32% + var(--glow-y,0px)),rgba(154,109,81,.055),transparent 48%),var(--cream)
}
.compact-hero h1 {
  font-size:clamp(49px,12.8vw,68px);
  max-width:1050px;
  margin-bottom:28px;
  position:relative;
  z-index:2;
  text-wrap:balance
}
.compact-hero h1 em {
  display:block;
  color:var(--clay)
}
.hero-light {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none
}
.hero-light::before {
  content:'';
  position:absolute;
  width:110%;
  height:80%;
  top:10%;
  right:-30%;
  transform:rotate(-32deg) translateY(var(--light-y,0px));
  background:repeating-linear-gradient(90deg,transparent 0 22%,#726e6110 25% 29%,transparent 32% 48%);
  filter:blur(20px)
}
.compact-hero-grid {
  display:grid;
  gap:27px
}
.compact-hero-photo {
  position:relative;
  max-width:650px;
  transform:translateY(var(--photo-y,0px))
}
.photo-surface {
  overflow:hidden;
  border-radius:2px var(--photo-round,32px) 2px 2px;
  box-shadow:4px 12px 20px #262b200c;
  transition:border-radius .18s linear;
  position:relative
}
.photo-surface img {
  width:100%;
  height:auto;
  aspect-ratio:1.12;
  object-fit:cover;
  object-position:center 30%;
  animation:photo-focus .85s var(--ease) both
}
.photo-surface::after {
  content:none
}
.compact-hero-photo figcaption {
  margin:12px 0 0;
  font-size:10px;
  font-weight:500;
  letter-spacing:.08em
}
.crop-mark {
  position:absolute;
  inset:22px -7px 22px -7px;
  pointer-events:none
}
.crop-mark::before,.crop-mark::after {
  content:'';
  position:absolute;
  width:12px;
  height:12px;
  border-color:currentColor;
  opacity:.35
}
.crop-mark::before {
  top:0;
  left:0;
  border-top:1px solid;
  border-left:1px solid
}
.crop-mark::after {
  right:0;
  bottom:0;
  border-bottom:1px solid;
  border-right:1px solid
}
.compact-hero-copy p {
  font-size:15px;
  max-width:410px
}
.compact-hero-copy .two-actions {
  margin-top:25px;
  gap:12px
}
.compact-hero-copy .button {
  width:100%
}
.compact-hero-copy>span {
  display:block;
  font-family:var(--serif);
  font-style:italic;
  color:var(--clay);
  font-size:24px;
  line-height:1.3;
  margin-top:24px;
  max-width:330px
}
/* 02 / Composition. The proof and its paper share the section boundary. */
.refined-recognition {
  padding:34px var(--gutter) 80px;
  background:radial-gradient(ellipse at calc(18% + var(--glow-x,0px)) calc(72% + var(--glow-y,0px)),rgba(154,109,81,.07),transparent 48%),linear-gradient(160deg,var(--paper) 0%,var(--cream) 100%)
}
.refined-recognition::before {
  content:'';
  position:absolute;
  top:0;
  left:var(--gutter);
  width:calc(100% - var(--gutter)*2);
  height:1px;
  background:var(--line)
}
.recognition-head h2 {
  max-width:730px
}
.recognition-head h2 em {
  display:block;
  margin-top:9px
}
.refined-recognition-copy {
  margin:26px 0
}
.refined-recognition-copy p:first-child {
  font-family:var(--serif);
  font-size:26px;
  line-height:1.25;
  margin-bottom:16px
}
.refined-recognition-copy p:last-child {
  font-size:14px;
  color:var(--muted);
  max-width:480px
}
.refined-transformations {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:29px;
  padding-top:16px
}
.composition-axis {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:var(--line);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s var(--ease)
}
.composition-axis.line-visible {transform:scaleX(1)}
.refined-transformations>div {
  position:relative
}
.refined-transformations>div::before {
  content:'';
  position:absolute;
  left:0;
  top:-19px;
  width:5px;
  height:5px;
  border:1px solid var(--clay);
  background:var(--paper)
}
.refined-transformations span:not(.composition-axis) {
  display:block;
  font-size:7px;
  letter-spacing:.025em;
  line-height:1.5;
  min-height:22px
}
.refined-transformations strong {
  display:block;
  font-family:var(--serif);
  font-size:23px;
  font-weight:400;
  line-height:1.15;
  margin-top:5px
}
.refined-transformations em {
  color:var(--clay);
  display:block
}
/* 03 / The editing table — native, horizontal touch scroll. */
.compact-portfolio {
  background:var(--olive);
  color:var(--cream);
  padding:48px var(--gutter) 64px;
  --entry:0;
  --paper-shift:0px;
  --edge-shift:0px
}
.compact-portfolio::before {
  content:'';
  position:absolute;
  z-index:-1;
  top:-43px;
  left:-4%;
  width:108%;
  height:88px;
  background:var(--olive);
  transform:translate3d(var(--edge-shift),var(--paper-shift),0) rotate(-1.7deg);
  transform-origin:left;
  box-shadow:0 -15px 34px #3036230b
}
.compact-portfolio::after {
  content:'';
  position:absolute;
  top:-2px;
  left:0;
  right:0;
  height:172px;
  z-index:-1;
  background:linear-gradient(#72795c22,transparent);
  pointer-events:none
}
.transition-accent {
  position:absolute;
  z-index:3;
  display:block;
  height:1px;
  pointer-events:none;
  transform-origin:left;
  opacity:.62
}
.transition-accent-portfolio {
  top:-22px;
  left:9%;
  width:58%;
  background:var(--cream);
  transform:translate3d(calc(var(--edge-shift) * -.35),calc(var(--paper-shift) * -.45),0) rotate(-1.7deg)
}
.compact-section-head {
  display:grid;
  gap:22px;
  margin-bottom:29px
}
.compact-section-head p {
  font-size:14px;
  max-width:385px
}
.compact-portfolio h2 em {
  color:#cbc5ae
}
.carousel-frame {
  position:relative;
  border:1px solid #d3cbbc59;
  background:#262b2059;
  padding:16px 13px 10px;
  box-shadow:10px 15px 25px #15190e14;
  transform:translateY(var(--table-y,0px));
  margin-right:5px
}
.carousel-frame>.crop-mark {
  inset:-7px -7px;
  color:var(--cream)
}
.carousel-masthead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:9px;
  letter-spacing:.11em;
  line-height:1.5;
  margin:0 1px 14px
}
.portfolio-carousel {
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  position:relative;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch
}
.portfolio-carousel::-webkit-scrollbar {
  display:none
}
.portfolio-slide {
  flex:0 0 100%;
  min-width:0;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
  position:relative
}
.reserved-media,.actual-media {
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  position:relative
}
.reserved-media {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:25px;
  color:var(--ink);
  overflow:hidden;
  background:var(--paper)
}
.reserved-media::before {
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid #726e6133;
  pointer-events:none
}
.reserved-media::after {
  content:'';
  position:absolute;
  top:11px;
  left:50%;
  height:9px;
  width:1px;
  background:#726e6159;
  pointer-events:none
}
.media-client {
  background:linear-gradient(115deg,#ece6dc,#e1d8c9)
}
.media-backstage {
  background:linear-gradient(120deg,#b9bba5,#d5d5c2)
}
.media-video {
  color:var(--cream);
  background:linear-gradient(120deg,#9a6d51,#8c664f)
}
.media-video::before {
  border-color:#ece6dc44
}
.media-category {
  font-size:9px;
  letter-spacing:.12em;
  line-height:1.5;
  margin-bottom:13px
}
.reserved-media h3 {
  font-size:clamp(32px,8vw,46px);
  line-height:1.04;
  max-width:330px
}
.reserved-media h3 em {
  display:block
}
.reserved-media p {
  font-size:11px;
  margin-top:13px
}
.reserved-label {
  font-size:7px;
  letter-spacing:.08em;
  margin-top:22px
}
.slide-caption {
  display:flex;
  gap:14px;
  align-items:baseline;
  margin-top:13px;
  min-height:36px;
  line-height:1.5;
  font-size:10px
}
.slide-caption>span {
  font-size:9px;
  letter-spacing:.06em;
  opacity:.7
}
.slide-caption p {
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  line-height:1.3
}
.carousel-controls {
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  border-top:1px solid #d3cbbc38;
  padding-top:12px;
  margin-top:5px
}
.swipe-hint {
  font-size:7px;
  letter-spacing:.11em;
  line-height:1.6;
  display:flex;
  align-items:center;
  min-height:44px
}
.carousel-navigation {
  display:flex;
  align-items:center;
  gap:12px
}
.carousel-navigation button {
  border:0;
  color:inherit;
  background:transparent;
  padding:8px 3px;
  min-height:44px;
  min-width:44px;
  font-size:10px;
  transition:opacity .25s
}
.carousel-navigation button:disabled {
  opacity:.35;
  cursor:default
}
.carousel-dots {
  display:flex;
  gap:5px
}
.carousel-dots i {
  width:3px;
  height:3px;
  border:1px solid #f5f0e870;
  display:block;
  transition:background .25s
}
.carousel-dots i.active {
  background:var(--cream)
}
.portfolio-instagram {
  margin-top:25px
}
.proof-changing {
  animation:proof-shift .22s var(--ease)
}
/* 04 / Clay paper overlays the green proof. A single drawn gesture connects to pricing. */
.refined-manifesto {
  background:radial-gradient(ellipse at 10% 20%,#c7a58c44,transparent 58%),var(--clay-surface);
  color:var(--cream);
  padding:58px var(--gutter) 49px;
  --line-progress:0;
  --edge-x:0px
}
.refined-manifesto::before {
  content:'';
  position:absolute;
  z-index:-1;
  top:-30px;
  left:-4%;
  width:108%;
  height:64px;
  background:var(--clay-surface);
  transform:translate3d(var(--edge-x),var(--paper-shift,0px),0) rotate(1deg);
  box-shadow:0 -5px 14px #262b2014
}
.refined-manifesto::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(130deg,#ece6dc09,transparent 65%);
  z-index:-1
}
.transition-accent-manifesto {
  top:-10px;
  right:12%;
  width:46%;
  background:rgba(245,240,232,.58);
  transform:translate3d(calc(var(--edge-x) * -.4),calc(var(--paper-shift) * -.3),0) rotate(1deg)
}
.refined-manifesto h2 {
  max-width:720px;
  position:relative;
  z-index:1
}
.refined-manifesto h2 em {
  display:block;
  color:var(--cream)
}
.refined-manifesto p {
  font-size:15px;
  line-height:1.9;
  margin-top:24px;
  position:relative;
  z-index:1
}
.editorial-gesture {
  position:absolute;
  pointer-events:none;
  overflow:visible
}
.editorial-gesture path {
  stroke:currentColor;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round
}
.manifesto-gesture {
  width:70%;
  height:calc(100% + 90px);
  top:7%;
  right:-9%;
  color:#efe4d370;
  z-index:2
}
.manifesto-gesture path {
  stroke-dasharray:1200;
  stroke-dashoffset:calc(1200 * (1 - var(--line-progress)));
  opacity:.6
}
/* 05 / Investment as typeset editorial rows, not application cards. */
.compact-investment {
  padding:53px var(--gutter) 48px;
  background:radial-gradient(ellipse 70% 58% at calc(12% + var(--glow-x,0px)) calc(12% + var(--glow-y,0px)),rgba(154,109,81,.065),transparent 70%),radial-gradient(ellipse 76% 62% at 88% 88%,rgba(102,110,79,.055),transparent 72%),var(--cream);
  --cream-edge-x:0px
}
.compact-investment::before {
  content:'';
  position:absolute;
  top:-42px;
  right:-4%;
  width:108%;
  height:78px;
  background:var(--paper);
  transform:translate3d(var(--cream-edge-x),0,0) rotate(-2.4deg);
  transform-origin:right;
  z-index:-2
}
.compact-investment::after {
  content:'';
  position:absolute;
  top:-29px;
  right:-4%;
  width:108%;
  height:72px;
  background:var(--cream);
  transform:translate3d(calc(var(--cream-edge-x) * -.45),0,0) rotate(-2deg);
  transform-origin:right;
  z-index:-1
}
.transition-accent-investment {
  top:-10px;
  right:7%;
  width:41%;
  background:rgba(154,109,81,.28);
  transform:translate3d(calc(var(--cream-edge-x) * -.7),0,0) rotate(-2deg)
}
.compact-packages {
  display:grid;
  margin-top:31px
}
.compact-package {
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 12px;
  padding:21px 0 19px;
  border-top:var(--rule);
  position:relative
}
.compact-package>span {
  font-size:9px;
  letter-spacing:.1em;
  line-height:1.5;
  grid-column:1 / -1;
  color:var(--muted)
}
.compact-package h3 {
  font-size:37px;
  align-self:center
}
.compact-price {
  font-size:11px;
  align-self:center;
  white-space:nowrap
}
.compact-price strong {
  font-family:var(--serif);
  font-weight:400;
  font-size:42px;
  letter-spacing:-.02em;
  margin-left:3px;
  line-height:1
}
.compact-package>p:last-child {
  grid-column:1 / -1;
  font-size:12px;
  color:var(--muted)
}
.compact-package.featured {
  background:var(--olive);
  color:var(--cream);
  padding:24px 16px;
  margin:6px -10px;
  box-shadow:3px 7px 15px #30362314;
  border-top-color:transparent;
  transform:rotate(-.5deg)
}
.compact-package.featured>p:last-child {
  color:var(--paper)
}
.featured>span {
  display:inline-block;
  position:relative;
  justify-self:start;
  color:var(--cream);
  font-size:8px;
  padding:5px 9px;
  margin-left:-3px;
  margin-bottom:2px
}
.featured>span::after {
  content:'';
  position:absolute;
  inset:0;
  border:1px solid #d3cbbc80;
  border-radius:46% 52% 47% 51%;
  transform:rotate(-5deg)
}
.delivery-notes {
  border-top:var(--rule);
  padding-top:22px;
  display:grid;
  gap:16px;
  margin-top:10px;
  color:var(--muted);
  font-size:12px
}
.delivery-notes strong {
  color:var(--ink);
  font-weight:500
}
.refined-combined {
  margin-top:33px;
  padding:24px 0 0;
  border-top:var(--rule);
  display:grid;
  gap:17px
}
.refined-combined h3 {
  font-size:30px;
  max-width:440px
}
.refined-combined h3 em {
  color:var(--clay);
  display:block
}
.refined-combined p {
  font-size:13px;
  color:var(--muted);
  max-width:410px
}
/* 06 / The original portraits, cropped to their arched photographic contour. */
.compact-about {
  background:radial-gradient(ellipse at calc(78% + var(--glow-x,0px)) calc(64% + var(--glow-y,0px)),rgba(154,109,81,.045),transparent 55%),var(--sage);
  padding:48px var(--gutter) 88px
}
.compact-about::before {
  content:'';
  position:absolute;
  top:0;
  left:var(--gutter);
  width:calc(100% - var(--gutter)*2);
  height:1px;
  background:#30362342
}
.compact-about h2 em {
  color:var(--olive);
  display:block
}
.compact-about-copy>p {
  font-size:13px;
  max-width:465px;
  margin-top:15px
}
.compact-about-copy .refined-about-lead {
  font-family:var(--serif);
  font-size:26px;
  line-height:1.2;
  margin-top:24px;
  max-width:440px
}
.refined-signature {
  display:block;
  margin-top:22px;
  font-family:var(--serif);
  font-style:italic;
  font-size:20px;
  line-height:1.35
}
.founders-composition {
  position:relative;
  margin-top:35px
}
.compact-founders {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.founder {
  position:relative;
  min-width:0
}
.founder:nth-child(2) {
  padding-top:27px
}
.founder-print {
  position:relative;
  overflow:hidden;
  aspect-ratio:1;
  border-radius:50% 50% 0 0;
  background:transparent
}
.founder:first-child .founder-print {
  transform:rotate(-1.3deg)
}
.founder:nth-child(2) .founder-print {
  transform:rotate(1deg)
}
.founder img {
  position:absolute;
  bottom:0;
  left:-2.5%;
  width:105%;
  max-width:none;
  height:auto
}
.founder figcaption {
  margin-top:17px
}
.founder h3 {
  font-size:29px;
  margin-bottom:5px
}
.founder figcaption span {
  font-size:7px;
  letter-spacing:.07em;
  line-height:1.55;
  display:block;
  max-width:140px
}
.founders-gesture {
  width:112%;
  height:100%;
  left:-5%;
  top:-10px;
  color:#30362365;
  z-index:-1
}
/* 07 / Green takes over beneath the founder proofs, without an empty divider. */
.compact-contact {
  background:var(--green-surface);
  color:var(--cream);
  padding:53px var(--gutter) 60px;
  --edge-x:0px
}
.compact-contact::before {
  content:'';
  position:absolute;
  left:-2%;
  top:-40px;
  width:104%;
  height:71px;
  background:var(--green-surface);
  transform:translate3d(var(--edge-x),var(--paper-shift,0px),0) rotate(-1.5deg);
  z-index:-1;
  box-shadow:0 -12px 27px #30362310
}
.compact-contact h2 {
  max-width:740px
}
.compact-contact h2 em {
  display:block;
  color:#d3cbbc
}
.compact-contact .two-actions {
  margin-top:29px;
  gap:14px
}
.compact-contact .button {
  width:100%
}
.contact-glow {
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:-1;
  pointer-events:none
}
.contact-glow::before {
  content:'';
  position:absolute;
  inset:-20% -30% -20% 40%;
  background:repeating-linear-gradient(105deg,transparent 0 15%,#b9bba510 18% 22%,transparent 24% 37%);
  filter:blur(22px);
  transform:translateY(var(--light-y,0px))
}
.compact-footer {
  background:var(--green-surface);
  color:#d3cbbc;
  border-top:1px solid #d3cbbc33;
  margin:0;
  padding:19px var(--gutter);
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:8px;
  letter-spacing:.08em
}
/* Motion stays in transforms and small masks; the page always scrolls natively. */
.motion-enabled .reveal {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)
}
.motion-enabled .headline-reveal {
  opacity:0;
  transform:translateY(10px);
  /* Display glyphs extend beyond their line box, especially italic swashes
     and Portuguese descenders. Keep that ink inside the reveal mask. */
  clip-path:inset(-.3em -.2em 18% -.2em);
  filter:blur(2px);
  transition:opacity .82s var(--ease),transform .82s var(--ease),clip-path .9s var(--ease),filter .8s var(--ease)
}
.motion-enabled .headline-reveal.visible {
  opacity:1;
  transform:translateY(0);
  clip-path:inset(-.3em -.2em -.4em -.2em);
  filter:blur(0)
}
.motion-enabled .italic-reveal {
  display:inline-block;
  opacity:0;
  transform:translateY(5px);
  filter:blur(1px);
  transition:opacity .72s var(--ease) .11s,transform .72s var(--ease) .11s,filter .72s var(--ease) .11s
}
.motion-enabled .visible .italic-reveal,.motion-enabled .headline-reveal.visible .italic-reveal {
  opacity:1;
  transform:translateY(0);
  filter:blur(0)
}
.motion-enabled .refined-transformations>div::before {
  opacity:0;
  transform:translate3d(-3px,2px,0);
  transition:opacity .35s var(--ease) .2s,transform .35s var(--ease) .2s
}
.motion-enabled .refined-transformations>div.visible::before {opacity:1;transform:none}
.motion-enabled .reveal.visible {
  opacity:1;
  transform:translateY(0)
}
.motion-enabled .carousel-frame.reveal {
  transform:translateY(12px) scale(.994);
  transition:opacity .9s var(--ease),transform .9s var(--ease)
}
.motion-enabled .carousel-frame.visible {
  transform:translateY(var(--table-y,0px)) scale(1)
}
.motion-enabled .founder .founder-print {
  clip-path:inset(0 0 14% 0);
  transition:clip-path .9s var(--ease),filter .9s var(--ease);
  filter:blur(2px)
}
.motion-enabled .founder.visible .founder-print {
  clip-path:inset(0);
  filter:blur(0)
}
.motion-enabled .refined-transformations>div:nth-child(2) {
  transition-delay:.08s
}
.motion-enabled .refined-transformations>div:nth-child(3) {
  transition-delay:.16s
}
@keyframes photo-focus {
  from {
    filter:blur(2px);
    transform:scale(1.015)
  }
  to {
    filter:blur(0);
    transform:scale(1)
  }
}
@keyframes proof-shift {
  from {
    filter:brightness(.95);
    transform:translateX(4px)
  }
  to {
    filter:brightness(1);
    transform:translateX(0)
  }
}
/* Brief photographic overlay while changing selects. It never intercepts touch. */
.proof-ghost {
  position:absolute!important;
  z-index:3;
  pointer-events:none;
  object-fit:cover;
  overflow:hidden;
  animation:proof-overlay .22s var(--ease) both;
  box-shadow:3px 4px 10px #15190e16
}
@keyframes proof-overlay {
  from {
    opacity:.14;
    transform:translate(4px,-3px)
  }
  to {
    opacity:0;
    transform:translate(9px,-4px)
  }
}
@media(hover:hover) {
  .button:hover {
    transform:translateY(-1px)
  }
  .button-olive:hover {
    background:#475038
  }
  .button-cream:hover {
    background:var(--paper)
  }
  .text-link:hover::after {
    transform:scaleX(1)
  }
  .actual-media {
    transition:transform .7s var(--ease)
  }
  .actual-media:hover {
    transform:scale(1.02)
  }
  .carousel-navigation button:not(:disabled):hover {
    opacity:.6
  }
}
.button:active {transform:scale(.985);transition-duration:.12s}
/* Wide mobile / tablet */
@media(min-width:430px) {
  :root {
    --gutter:28px
  }
  .compact-hero-copy .button,.compact-contact .button {
    width:auto
  }
  .carousel-controls {
    flex-wrap:nowrap
  }
  .founder figcaption span {
    font-size:8px
  }
}
@media(min-width:760px) {
  :root {
    --gutter:clamp(40px,6vw,96px)
  }
  body {
    font-size:16px
  }
  .compact-header {
    height:94px
  }
  .compact-header.scrolled {height:89px}
  .brand {
    width:126px
  }
  .header-actions {
    gap:30px
  }
  .header-actions .text-link {
    font-size:13px
  }
  .header-actions .button {
    min-height:47px;
    padding:11px 23px
  }
  .eyebrow {
    font-size:10px;
    margin-bottom:22px
  }
  h2 {
    font-size:clamp(58px,6.4vw,90px)
  }
  .compact-hero {
    padding-top:47px;
    padding-bottom:24px
  }
  .compact-hero h1 {
    font-size:clamp(76px,8.8vw,130px);
    margin-bottom:37px;
    max-width:1100px
  }
  .compact-hero h1 em {
    margin-left:9%
  }
  .compact-hero-grid {
    grid-template-columns:1.18fr 1fr;
    gap:7%;
    align-items:center
  }
  .compact-hero-photo {
    margin-left:10px;
    margin-bottom:-75px;
    z-index:2
  }
  .photo-surface img {
    aspect-ratio:1.16
  }
  .compact-hero-copy {
    padding-top:14px
  }
  .compact-hero-copy p {
    font-size:16px
  }
  .compact-hero-copy .button {
    width:auto
  }
  .compact-hero-copy .two-actions {
    gap:18px;
    margin-top:29px
  }
  .compact-hero-copy>span {
    font-size:29px;
    margin-top:28px
  }
  .refined-recognition {
    padding-top:106px;
    padding-bottom:92px;
    display:grid;
    grid-template-columns:1.2fr 1fr;
    column-gap:9%;
    align-items:center
  }
  .refined-recognition::before {
    left:55%;
    top:36px;
    width:calc(45% - var(--gutter))
  }
  .refined-recognition-copy {
    margin:20px 0 0
  }
  .refined-recognition-copy p:first-child {
    font-size:34px
  }
  .refined-recognition-copy p:last-child {
    font-size:14px
  }
  .refined-transformations {
    grid-column:1/-1;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    padding:22px 0 0;
    margin-top:38px
  }
  .composition-axis {
    height:1px;
    bottom:auto;
    right:0;
    width:auto
  }
  .refined-transformations span:not(.composition-axis) {
    font-size:9px;
    min-height:0
  }
  .refined-transformations em {
    display:inline
  }
  .refined-transformations>div::before {
    left:0;
    top:-25px
  }
  .refined-transformations strong {
    font-size:35px
  }
  .compact-portfolio {
    padding-top:62px;
    padding-bottom:65px
  }
  .compact-section-head {
    grid-template-columns:1.3fr 1fr;
    gap:7%;
    align-items:end;
    margin-bottom:35px
  }
  .compact-section-head p {
    font-size:15px;
    padding-bottom:4px
  }
  .carousel-frame {
    padding:20px 22px 14px;
    max-width:1030px;
    margin:0 auto;
    transform:rotate(-.3deg)
  }
  .carousel-masthead {
    font-size:10px;
    margin-bottom:19px
  }
  .portfolio-slide {
    flex-basis:calc(64% - 8px)
  }
  .reserved-media,.actual-media {
    aspect-ratio:1.55
  }
  .reserved-media {
    padding:45px
  }
  .reserved-media h3 {
    font-size:53px
  }
  .reserved-media p {
    font-size:13px
  }
  .reserved-label {
    font-size:8px
  }
  .media-category {
    font-size:10px
  }
  .slide-caption p {
    font-size:20px
  }
  .carousel-controls {
    flex-wrap:nowrap
  }
  .swipe-hint {
    font-size:9px
  }
  .carousel-navigation {
    gap:19px
  }
  .carousel-navigation button {
    font-size:12px
  }
  .portfolio-instagram {
    margin-top:28px
  }
  .refined-manifesto {
    padding-top:65px;
    padding-bottom:64px;
    display:grid;
    grid-template-columns:1.35fr 1fr;
    column-gap:8%;
    align-items:center
  }
  .refined-manifesto>.eyebrow {
    grid-column:1/-1
  }
  .refined-manifesto h2 {
    font-size:clamp(66px,6.7vw,98px)
  }
  .refined-manifesto p {
    font-size:16px;
    margin-top:0
  }
  .manifesto-gesture {
    width:51%;
    height:calc(100% + 110px);
    right:10%;
    top:0
  }
  .compact-investment {
    padding-top:70px;
    padding-bottom:67px
  }
  .compact-packages {
    gap:0;
    max-width:1050px;
    margin:42px auto 0
  }
  .compact-package {
    grid-template-columns:140px 1fr auto 190px;
    gap:25px;
    align-items:center;
    padding:25px 8px
  }
  .compact-package>span,.compact-package>p:last-child {
    grid-column:auto
  }
  .compact-package h3 {
    font-size:42px
  }
  .compact-price strong {
    font-size:49px
  }
  .compact-package>p:last-child {
    text-align:right;
    font-size:12px
  }
  .compact-package.featured {
    padding:29px 20px;
    margin:8px -7px;
    transform:rotate(-.25deg)
  }
  .featured>span {
    font-size:8px;
    text-align:center;
    max-width:125px
  }
  .delivery-notes {
    grid-template-columns:1fr 1fr;
    gap:45px;
    max-width:1050px;
    margin:17px auto 0;
    padding-top:27px;
    font-size:13px
  }
  .refined-combined {
    grid-template-columns:1.2fr 1fr;
    gap:9%;
    margin-top:35px;
    padding-top:27px;
    align-items:center
  }
  .refined-combined h3 {
    font-size:36px
  }
  .refined-combined p {
    font-size:14px
  }
  .compact-about {
    padding-top:63px;
    padding-bottom:87px;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    column-gap:7%;
    align-items:center
  }
  .compact-about h2 {
    font-size:clamp(58px,5.7vw,82px)
  }
  .compact-about-copy>p {
    font-size:14px
  }
  .compact-about-copy .refined-about-lead {
    font-size:29px
  }
  .founders-composition {
    margin:0 7px 0 0;
    padding-top:18px
  }
  .compact-founders {
    gap:28px
  }
  .founder:nth-child(2) {
    padding-top:42px
  }
  .founder h3 {
    font-size:34px
  }
  .founder figcaption span {
    font-size:8px;
    max-width:175px
  }
  .compact-contact {
    padding-top:63px;
    padding-bottom:70px
  }
  .compact-contact h2 {
    font-size:clamp(74px,8vw,118px);
    max-width:950px
  }
  .compact-contact .two-actions {
    gap:28px;
    margin-top:34px
  }
  .compact-footer {
    font-size:10px;
    padding-top:24px;
    padding-bottom:24px
  }
}
@media(min-width:1440px) {
  :root {
    --gutter:max(88px,calc((100vw - 1280px)/2))
  }
}
/* Accessibility: static proofs, fully visible text, native gestures, no motion. */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .motion-enabled .reveal {
    opacity:1;
    transform:none
  }
  .motion-enabled .headline-reveal,.motion-enabled .italic-reveal {
    opacity:1;
    transform:none;
    clip-path:none;
    filter:none
  }
  .composition-axis {transform:none}
  .motion-enabled .founder .founder-print {
    clip-path:none;
    filter:none
  }
  .manifesto-gesture path {
    stroke-dashoffset:0
  }
  .compact-hero-photo,.carousel-frame,.motion-enabled .carousel-frame.visible {
    transform:none
  }
  .compact-portfolio::before,.refined-manifesto::before,.compact-contact::before {
    transform:none
  }
  .hero-light::before,.contact-glow::before {
    transform:none
  }
}