body{margin:0;background:#FAF6EF;color:#2B211A;font-family:'Figtree',sans-serif}
@keyframes slowdrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
a:hover{color:#B45B3E}
::selection{background:rgba(217,117,91,.28)}



body{margin:0;background:#FAF6EF;color:#2B211A;font-family:'Figtree',sans-serif}
a:hover{color:#B45B3E}
::selection{background:rgba(217,117,91,.28)}



body{margin:0;background:#FAF6EF;color:#2B211A;font-family:'Figtree',sans-serif}
a:hover{color:#B45B3E}
::selection{background:rgba(217,117,91,.28)}
input,textarea{font-family:'Figtree',sans-serif}
input:focus-visible,textarea:focus-visible{outline:none;border-color:#B45B3E}
input::placeholder,textarea::placeholder{color:#A2947F}

/* ---- Global additions on top of the design's inline styles ---- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #2B211A; color-scheme: light; }
/* Pages stay cream; the brown html background only shows in the overscroll / pull-to-refresh areas and Safari's toolbars */
body { background: #FAF6EF; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
button, input, textarea { font: inherit; }
input:focus, textarea:focus { outline: none; border-bottom-color: #2B211A !important; }
a:focus-visible, button:focus-visible { outline: 1px solid #D9755B; outline-offset: 4px; }

/* App screenshots (BODA) */
.shots { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); padding: clamp(28px, 4vw, 56px); background: #EFE6D8; }
.shots img { height: min(440px, 62vh); width: auto; max-width: 44%; object-fit: contain; box-shadow: 0 30px 60px -30px rgba(23, 19, 16, .45); }
.shots img:nth-child(2) { transform: translateY(8%); }

/* Mobile nav */
.nav-toggle { display: none; background: none; border: 0; padding: 8px 0; cursor: pointer; font-family: 'Figtree', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #FAF6EF; margin-left: auto; }
.mnav { position: fixed; inset: 0; z-index: 90; background: #2B211A; color: #FAF6EF; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 96px clamp(24px, 6vw, 64px) 48px; opacity: 0; visibility: hidden; transition: opacity .5s cubic-bezier(.16,1,.3,1), visibility .5s; }
.mnav.open { opacity: 1; visibility: visible; }
.mnav a { font-family: 'Instrument Serif', serif; font-size: clamp(40px, 11vw, 64px); line-height: 1.1; letter-spacing: -.02em; color: #FAF6EF; text-decoration: none; }
.mnav a:hover { color: #E8B79A; }
.mnav .mnav-meta { margin-top: 36px; font-family: 'Figtree', sans-serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(250,246,239,.6); line-height: 2.2; }
.mnav .mnav-meta a { font-family: inherit; font-size: inherit; letter-spacing: inherit; color: #E8B79A; }
.mnav-close { position: absolute; top: 28px; right: clamp(24px, 6vw, 64px); background: none; border: 0; color: #FAF6EF; font-family: 'Figtree', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; padding: 8px 0; }

@media (max-width: 900px) {
  header[data-nav] nav > div { display: none !important; }
  header[data-nav] [data-nav-cta] { display: none !important; }
  .nav-toggle { display: block; }
}

/* Small screens: let 12-col spans collapse to full width */
@media (max-width: 760px) {
  [style*="grid-column"] { grid-column: 1 / -1 !important; }
  [style*="grid-column:10"], [style*="grid-column: 10"] { text-align: left !important; }
  [style*="width:240px"] { width: 100% !important; max-width: 340px; }
  [style*="position:sticky"] { position: static !important; }
  .mob-left { margin-left: 0 !important; }
  .shots img { height: min(360px, 56vh); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Video grid (Work page) */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
.vcell { min-width: 0; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -40px rgba(23, 19, 16, .45); }
.vcell .instagram-media { box-shadow: none !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; }
body { overflow-x: clip; }


/* overflow-x:hidden on the page wrapper breaks position:sticky; clip does the same job without that */
body > div[style*="overflow-x:hidden"] { overflow-x: clip !important; }

/* Work page sections */
.wsec { padding: clamp(40px,5vw,80px) clamp(24px,5.55vw,80px); }
.wsec.alt { background: #EFE6D8; }
.wrow { max-width: 1760px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(24px,5vw,80px); align-items: center; }
.wsec.alt .wrow { flex-direction: row-reverse; }
.wimg { flex: 1.3 1 460px; overflow: hidden; aspect-ratio: 4/3; background: #DFD2BE; }
.wimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wtext { flex: 1 1 320px; max-width: 520px; }
.wname { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: #B45B3E; margin-bottom: 18px; }
.wtitle { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(32px,4vw,58px); line-height: .98; letter-spacing: -.024em; margin: 0 0 clamp(22px,2.6vw,34px); color: #2B211A; }
.wtitle em { font-style: italic; font-size: .88em; color: #B45B3E; }
.wstats { display: flex; flex-wrap: wrap; gap: 28px 36px; padding-top: 20px; border-top: 1px solid rgba(43,33,26,.16); }
.wvids { max-width: 1760px; margin: clamp(28px,4vw,52px) auto 0; }
.wmore { max-width: 1760px; margin: 0 auto; box-sizing: border-box; }
.wmore-row { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: baseline; padding: 20px 0; border-top: 1px solid rgba(43,33,26,.14); }
.wmore-row h3 { flex: 0 0 260px; margin: 0; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(22px,2vw,28px); color: #2B211A; }
.wmore-row p { margin: 0; font-size: 15px; font-weight: 300; color: #5A4C40; }
@media (max-width: 760px) { .wsec.alt .wrow { flex-direction: row; } .wmore-row h3 { flex-basis: 100%; } }

/* Capabilities page */
.srow { max-width: 1760px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(20px,5vw,80px); align-items: flex-start; }
.shead { flex: 1 1 320px; max-width: 560px; }
.shead .wtitle { margin-bottom: 14px; }
.sline { margin: 0; font-size: clamp(17px,1.4vw,20px); font-weight: 300; line-height: 1.5; color: #5A4C40; }
.slist { flex: 1 1 320px; list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(43,33,26,.16); }
.slist li { padding: 14px 0; border-bottom: 1px solid rgba(43,33,26,.1); font-size: 15px; color: #2B211A; }
.sblock { max-width: 1760px; margin: 0 auto; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(24px,3vw,48px); border-top: 1px solid rgba(43,33,26,.2); padding-top: clamp(22px,2.6vw,34px); }
.sstep h3 { margin: 0 0 8px; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(22px,2vw,28px); color: #2B211A; }
.sstep p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: #5A4C40; }
.snum { font-family: 'Instrument Serif', serif; font-size: 22px; color: #D9755B; margin-bottom: 12px; }
.scta { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; justify-content: space-between; border-top: 1px solid rgba(43,33,26,.2); padding-top: clamp(28px,3vw,44px); }

/* Capabilities: headings you can't miss */
.sh2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(44px, 6vw, 92px); line-height: .95; letter-spacing: -.03em; color: #2B211A; margin: 0 0 clamp(18px, 2.4vw, 32px); }
.snum-big { font-family: 'Instrument Serif', serif; font-size: clamp(22px, 2vw, 30px); line-height: 1; color: #D9755B; margin-bottom: 10px; }
.shead .sh2 { margin-bottom: 12px; }
.sline { font-size: clamp(18px, 1.6vw, 22px); color: #2B211A; }
.slist li { color: #5A4C40; }
.wsec { border-top: 1px solid rgba(43,33,26,.12); }

/* Work: client name is the heading, the headline sits under it */
.wtext .sh2 { margin-bottom: 14px; }
.wsub { margin: 0 0 clamp(22px, 2.6vw, 34px); font-family: 'Instrument Serif', serif; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; color: #5A4C40; }
.wsub em { font-style: italic; color: #B45B3E; }

/* Contact form group headings */
.fhead { display: flex; align-items: baseline; gap: 14px; margin: 0 0 26px; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; letter-spacing: -.02em; color: #2B211A; }
.fhead span { font-size: .6em; color: #D9755B; }

/* Capabilities: list at the top */
.sidx { max-width: 1760px; margin: 0 auto; padding: 0 clamp(24px,5.55vw,80px) clamp(40px,5vw,72px); }
.sidx ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: clamp(24px,4vw,64px); border-top: 1px solid rgba(43,33,26,.2); }
.sidx li { border-bottom: 1px solid rgba(43,33,26,.12); }
.sidx a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; font-family: 'Instrument Serif', serif; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; color: #2B211A; text-decoration: none; transition: color .4s, padding-left .6s cubic-bezier(.16,1,.3,1); }
.sidx a span { font-size: .6em; color: #D9755B; min-width: 1.6em; }
.sidx a:hover { color: #B45B3E; padding-left: 8px; }

/* Videos page */
.vfig { margin: 0; }
.vfig figcaption { padding-top: 12px; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #6B5B4D; }

/* Hero video: the phone cut keeps the source's thin letterbox bars, so trim them on portrait screens only */
@media (orientation: portrait) { .hero-media { inset: -4.5% 0 !important; } }

/* Signature logo: the PNG is used as a mask so it takes the surrounding text colour (ivory over the hero, espresso on cream) */
.logo-sig { display: block; flex: 0 0 auto; width: 68px; height: 38px; background-color: currentColor;
  -webkit-mask: url(/img/signature.png) center / contain no-repeat; mask: url(/img/signature.png) center / contain no-repeat; }
.logo-sig-lg { width: 96px; height: 54px; }

/* Home ribbon: stack the three parts on phones instead of leaving dangling separators */
@media (max-width: 760px) { .ribbon { flex-direction: column; gap: 4px !important; } .ribbon .rib-dot { display: none; } }

/* Where we work map (Home) — shapes come from src/map.svg, generated by tools/make-map.mjs */
.map-row { max-width: 1760px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(28px,5vw,80px); align-items: center; }
.map-text { flex: 1 1 320px; max-width: 520px; }
.map-art { flex: 1.2 1 360px; max-width: 620px; margin-left: auto; }
.work-map { display: block; width: 100%; height: auto; }
.work-map .m-base { fill: #E6DCCB; stroke: #FAF6EF; stroke-width: .8; }
.work-map .m-open { fill: #E8B79A; stroke: #FAF6EF; stroke-width: .8; }
.work-map .m-work { fill: #B45B3E; stroke: #FAF6EF; stroke-width: .8; }
.work-map path { transition: opacity .3s; }
.work-map .m-label { font: 600 18px 'Figtree', sans-serif; letter-spacing: .12em; fill: #FAF6EF; text-anchor: middle; }
.work-map .m-city { fill: #2B211A; stroke: #FAF6EF; stroke-width: 2; r: 5px; }
.work-map .m-city-label { font: 500 17px 'Figtree', sans-serif; letter-spacing: .04em; fill: #2B211A; }
.work-map .m-region { font: 600 15px 'Figtree', sans-serif; letter-spacing: .32em; fill: #B45B3E; text-anchor: middle; }
.map-key { list-style: none; margin: clamp(24px,3vw,36px) 0 0; padding: 0; border-top: 1px solid rgba(43,33,26,.16); }
.map-key li { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(43,33,26,.1); font-family: 'Instrument Serif', serif; font-size: clamp(20px,1.8vw,26px); color: #2B211A; }
.map-key small { grid-column: 2; font-family: 'Figtree', sans-serif; font-size: 13px; font-weight: 300; color: #6B5B4D; margin-top: 2px; }
.map-swatch { width: 16px; height: 16px; border-radius: 3px; }
.map-swatch.work { background: #B45B3E; }
.map-swatch.open { background: #E8B79A; }
@media (max-width: 760px) { .map-art { margin-left: 0; } }

/* Map capitals + text list (Contact) */
.work-map .m-cap circle { fill: #2B211A; stroke: #FAF6EF; stroke-width: 1.5; }
.work-map .m-cap text { font: 500 13px 'Figtree', sans-serif; fill: #2B211A; paint-order: stroke; stroke: #FAF6EF; stroke-width: 3px; stroke-linejoin: round; }
.work-map .m-cap-work circle { r: 5px; }
.work-map .m-cap-work text { font-weight: 600; font-size: 15px; }
.map-places { max-width: 1760px; margin: clamp(28px,4vw,52px) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px clamp(24px,4vw,64px); border-top: 1px solid rgba(43,33,26,.16); padding-top: clamp(20px,2.4vw,30px); }
.map-places h3 { margin: 0 0 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #B45B3E; }
.map-places ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.map-places li { font-size: 13.5px; font-weight: 300; line-height: 1.9; color: #5A4C40; break-inside: avoid; }

/* Contact: the map as a full-width sand ribbon */
.map-ribbon { background: #EFE6D8; border-top: 1px solid rgba(43,33,26,.1); border-bottom: 1px solid rgba(43,33,26,.1); padding: clamp(36px,4.4vw,64px) clamp(24px,5.55vw,80px); }
.map-ribbon .map-row { align-items: center; }
.map-ribbon .sh2 { font-size: clamp(36px,4.4vw,64px); }
.map-ribbon .map-art { flex: 1 1 340px; max-width: 520px; }
.map-ribbon .work-map { max-height: 540px; width: 100%; }
.map-ribbon .work-map .m-base { fill: #FAF6EF; stroke: #EFE6D8; }
.map-ribbon .work-map .m-open, .map-ribbon .work-map .m-work { stroke: #EFE6D8; }
.map-ribbon .work-map .m-cap text { stroke: #EFE6D8; }
.map-ribbon .map-places { margin-top: 22px; padding-top: 18px; grid-template-columns: 1fr; gap: 16px; }
.map-ribbon .map-places li { font-size: 13px; line-height: 1.75; }