.export-inline-0{position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent}
.export-inline-1{color:transparent}
button:disabled{opacity:.72;cursor:not-allowed}button.nav-create{border:0;font:inherit}article.style-tile{cursor:default}.preview-status{padding:48px max(6vw,24px);background:var(--sage);text-align:center}.preview-status h2{font-family:var(--serif);font-size:36px}.preview-status p{max-width:780px;margin:12px auto;color:var(--muted)}
@media(max-width:760px){.demo-bar-detail{display:inline}.demo-bar{height:auto;min-height:35px;padding:8px 16px;flex-wrap:wrap;text-align:center}.preview-status h2{font-size:30px}}

/* The original film keeps its natural proportions; the complete copy follows it. */
.hero.hero-film-first {
  display: block;
  width: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
}
.hero-film-first .hero-video-visual {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.hero-film-first .hero-story-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto 16 / 9;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.hero-film-first .hero-video-visual::after { display: none; }
.hero-video-caption {
  margin: 0;
  padding: 12px 18px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.hero-film-first .hero-copy {
  align-items: center;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) max(24px, 6vw);
  text-align: center;
}
.hero-film-first h1 {
  max-width: 20ch;
  font-size: clamp(42px, 5.5vw, 88px);
}
.hero-film-first .hero-copy > p {
  max-width: 44ch;
  font-size: 14px;
}
.hero-film-first .hero-details {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  white-space: normal;
  font-size: 10px;
}
.hero-film-first .hero-note { text-align: left; }
.hero-film-first .hero-story-video:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -3px;
}
@media (max-width: 760px) {
  .hero-video-caption { font-size: 11px; padding: 10px 16px; }
}

/* Let the existing three-column collection fit above its mobile breakpoint. */
@media (min-width: 761px) and (max-width: 1100px) {
  .style-grid > .style-tile { min-width: 0; }
}

.R0Hqwq_visual:has(.public-family-portrait){height:auto;aspect-ratio:1112/1416;display:flex;align-items:center;justify-content:center;background:#f2ede3;padding:0}.public-family-portrait{display:block;position:static;width:100%;height:auto;max-height:none;object-fit:contain;transform:none;border:0;box-shadow:none}.public-collection-art{padding:0;background:transparent;aspect-ratio:1112/1416;overflow:visible}.public-collection-portrait{width:100%;height:auto;object-fit:contain;border:0;box-shadow:none}.public-collection-art .art-label{background:#fffdf9e8;padding:3px 7px}@media(max-width:760px){.R0Hqwq_visual:has(.public-family-portrait){height:auto;aspect-ratio:1112/1416}}

/* Full-bleed family film: wide 21:9 master, separately composed 9:16 film on narrow/portrait screens. */
.hero-film-first .hero-film-layer { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: #f4f0e7; }
.hero-film-first .hero-film-layer .hero-story-video { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (max-width: 820px) and (orientation: portrait), (max-width: 560px) { .hero-film-first .hero-film-layer { aspect-ratio: 9 / 16; } .hero-film-first .hero-film-toggle { top: 10px; bottom: auto; } }
.hero-film-toggle { position: absolute; right: clamp(10px,1.6vw,24px); bottom: clamp(10px,1.6vw,24px); z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; font: 500 13px var(--sans); color: #fffdf9; background: rgba(48,46,41,.62); border: 0; border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px); }
.hero-film-toggle:hover { background: rgba(48,46,41,.78); }
.hero-film-toggle:focus-visible { outline: 3px solid #fffdf9; outline-offset: 2px; box-shadow: 0 0 0 6px var(--ink); }
.hero-film-toggle svg { width: 14px; height: 14px; }
.hero-film-toggle svg[hidden] { display: none; }

/* Photo equation demo: Photo + Photo + ... = Portrait */
.eq-demo { padding: clamp(56px, 8vw, 110px) max(16px, 5vw) clamp(48px, 7vw, 96px); background: linear-gradient(180deg, var(--cream) 0%, #f3eee4 100%); text-align: center; overflow: hidden; }
.eq-kicker { margin: 0 0 12px; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--olive); }
.eq-head h2 { margin: 0 auto; max-width: 22ch; font: 500 clamp(34px, 4.6vw, 64px)/1.06 var(--serif); letter-spacing: -1px; }
.eq-head h2 em { color: var(--olive); }
.eq-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 28px auto 34px; padding: 6px; background: #fffdf9; border: 1px solid var(--line); border-radius: 999px; }
.eq-tabs button { font: 500 14px var(--sans); color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: background .3s, color .3s; }
.eq-tabs button[aria-selected=true] { background: var(--ink); color: #fffdf7; }
.eq-tabs button:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.eq-stage { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, .9fr); align-items: center; gap: clamp(16px, 3vw, 44px); max-width: 1240px; margin: 0 auto; }
.eq-sources { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 6px; }
.eq-card { width: clamp(64px, 8.5vw, 118px); aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: center 25%; background: #fff; border: 5px solid #fffdf8; box-shadow: 0 10px 24px rgba(60,42,28,.18); transform: rotate(calc((var(--i) - 2) * 1.6deg)); }
.eq-sources[data-n="7"] .eq-card { width: clamp(56px, 6.8vw, 96px); }
.eq-plus, .eq-equals { font: 400 clamp(26px, 3vw, 44px)/1 var(--serif); color: var(--olive); }
.eq-equals { font-size: clamp(40px, 5vw, 72px); }
.eq-result { margin: 0; }
.eq-result img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; box-shadow: 0 26px 50px rgba(55,38,24,.22); }
.eq-result figcaption { margin-top: 18px; font: italic 400 clamp(18px, 1.8vw, 24px)/1.3 var(--serif); color: var(--ink); }
.eq-note { margin: 26px 0 0; font-size: 11px; color: var(--muted); }
@media (max-width: 820px) { .eq-stage { grid-template-columns: 1fr; } .eq-result img { max-width: 360px; } }
/* motion: cards rise in turn, + and = pop, the portrait develops from pencil sketch to colour */
.eq-stage.play .eq-card { animation: eqCard .7s cubic-bezier(.2,.9,.3,1.25) both; animation-delay: calc(var(--i) * .16s); }
.eq-stage.play .eq-plus { animation: eqPop .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * .16s - .05s); }
.eq-stage.play .eq-equals { animation: eqPop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--n) * .16s + .1s); }
.eq-stage.play .eq-result img { animation: eqDevelop 2.4s cubic-bezier(.45,0,.2,1) both; animation-delay: calc(var(--n) * .16s + .35s); }
.eq-stage.play .eq-result figcaption { animation: eqFade .8s ease both; animation-delay: calc(var(--n) * .16s + 1.9s); }
@keyframes eqCard { from { opacity: 0; transform: translateY(36px) rotate(calc((var(--i) - 2) * 6deg)) scale(.85); } }
@keyframes eqPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes eqDevelop {
  0% { opacity: 0; clip-path: polygon(0 0, 0 0, 0 0); filter: grayscale(1) contrast(1.4) sepia(.3); transform: scale(1.03); }
  45% { opacity: 1; clip-path: polygon(0 0, 200% 0, 0 200%); filter: grayscale(1) contrast(1.35) sepia(.3); }
  100% { opacity: 1; clip-path: polygon(0 0, 200% 0, 0 200%); filter: none; transform: scale(1); } }
@keyframes eqFade { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .eq-stage.play * { animation: none !important; } }

/* Stacked wordmark: original Tahanan lettering with cursive Frames underneath */
.brand .brand-logo { display: block; height: 68px; width: auto; }
.site-header .brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
footer .brand .brand-logo, .footer .brand .brand-logo { height: 88px; }
@media (max-width: 760px) { .brand .brand-logo { height: 52px; } }

/* Delivery section: pack the frame, then two routes (Metro Manila / provinces) */
.ship { padding: clamp(56px, 8vw, 110px) max(16px, 5vw); background: #f3eee4; text-align: center; overflow: hidden; }
.ship-head h2 { margin: 0 auto; max-width: 20ch; font: 500 clamp(34px, 4.6vw, 60px)/1.06 var(--serif); letter-spacing: -1px; }
.ship-head h2 em { color: var(--olive); }
.ship-pack { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(16px, 4vw, 56px); max-width: 1000px; margin: 34px auto 10px; }
.pack-svg { width: 100%; max-width: 520px; justify-self: end; }
.pack-svg .floor { fill: rgba(55,38,24,.12); }
.pack-svg .oak { fill: #c9955f; } .pack-svg .mat { fill: #fff; }
.pack-svg .tissue { fill: rgba(252,249,243,.9); transform-box: fill-box; transform-origin: top; transform: scaleY(0); }
.pack-svg .corners { fill: #a98560; opacity: 0; }
.pack-svg .kraft { fill: #c4a072; } .pack-svg .kraft-dark { fill: #9c7a55; } .pack-svg .edge { fill: none; stroke: rgba(74,52,39,.45); stroke-width: 2; }
.pack-svg .flap { fill: #b48f63; stroke: rgba(74,52,39,.4); stroke-width: 1.5; transform-box: fill-box; }
.pack-svg .flap-l { transform-origin: left top; transform: translateY(-44px) scaleY(-1) translateY(-44px); }
.pack-svg .flap-r { transform-origin: right top; transform: translateY(-44px) scaleY(-1) translateY(-44px); }
.pack-svg .label { opacity: 0; } .pack-svg .label-bg { fill: #fbf8f2; stroke: rgba(74,52,39,.3); }
.pack-steps { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 14px; }
.pack-steps li { position: relative; padding-left: 40px; font: 500 clamp(17px, 1.6vw, 21px)/1.3 var(--serif); color: var(--ink); opacity: .35; }
.pack-steps li::before { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; border: 1.5px solid var(--olive); background: #fffdf9; }
.pack-steps li::after { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 11px; margin-top: -8px; border: solid #fffdf9; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.ship-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 32px); max-width: 1000px; margin: 30px auto 0; }
.route { background: #fffdf9; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px 26px; text-align: left; }
.route h3 { margin: 6px 0 4px; font: 500 28px/1.1 var(--serif); }
.route p { margin: 0; color: var(--muted); font-size: 14px; }
.route .route-time { margin: 2px 0 8px; color: var(--olive); font-size: 15px; }
.route .route-time strong { color: var(--ink); }
.route-svg { width: 100%; height: auto; display: block; }
.route-svg .road { fill: none; stroke: #e7dfd1; stroke-width: 10; stroke-linecap: round; }
.route-svg .road-draw { fill: none; stroke: var(--olive); stroke-width: 2.5; stroke-dasharray: .012 .02; stroke-linecap: round; opacity: .8; }
.route-svg .isles ellipse { fill: #e2e8d6; }
.route-svg .pin-body { fill: var(--olive); } .route-svg .pin-house { fill: #fffdf9; }
.route-svg .pin { opacity: 0; }
.route-svg .rider { offset-rotate: 0deg; offset-distance: 0%; }
.route-svg .veh rect, .route-svg .veh path { fill: var(--ink); } .route-svg .veh .wheel { fill: #c4a072; stroke: var(--ink); stroke-width: 2; }
.route-svg .parcel rect { fill: #c4a072; stroke: #7d5f3f; stroke-width: 1.5; } .route-svg .parcel path { stroke: #7d5f3f; stroke-width: 1.5; fill: none; }
@media (max-width: 760px) { .ship-pack, .ship-routes { grid-template-columns: 1fr; } .pack-svg { justify-self: center; } .pack-steps { justify-self: center; } }
/* motion (≈ 9 s): tissue → corners → frame drops in → flaps close → label → steps tick → routes draw → vehicles travel → pins drop */
.ship.play .tissue { animation: shipTissue .7s ease-in-out .5s both; }
.ship.play .corners { animation: shipFade .4s ease 1.1s both; }
.ship.play .frame-drop { animation: shipDrop 1s cubic-bezier(.6,0,.3,1) 1.7s both; }
.ship.play .flap-l, .ship.play .flap-r { animation: shipFlap .6s cubic-bezier(.5,0,.3,1) 2.8s both; }
.ship.play .label { animation: shipPop .5s cubic-bezier(.3,1.5,.5,1) 3.4s both; }
.ship.play .pack-steps li { animation: shipStep .4s ease both; animation-delay: calc(.9s + var(--s) * 1.2s); }
.ship.play .pack-steps li::after { animation: shipFade .3s ease both; animation-delay: calc(1.1s + var(--s) * 1.2s); }
.ship.play .pack-steps li::before { animation: shipDot .3s ease both; animation-delay: calc(1s + var(--s) * 1.2s); }
.ship.play .road-draw { animation: shipRoad 2.2s ease-in-out 4.2s both; }
.ship.play .rider { animation: shipRide 2.6s cubic-bezier(.45,0,.25,1) 4.4s both; }
.ship.play .route-prov .road-draw { animation-delay: 4.8s; } .ship.play .route-prov .rider { animation-delay: 5s; }
.ship.play .pin { animation: shipPop .5s cubic-bezier(.3,1.6,.5,1) 7s both; } .ship.play .route-prov .pin { animation-delay: 7.6s; }
.ship.done .tissue { transform: scaleY(1); } .ship.done .corners, .ship.done .label, .ship.done .pin { opacity: 1; } .ship.done .frame-drop { transform: translateY(210px); }
.ship.done .flap-l, .ship.done .flap-r { transform: none; } .ship.done .pack-steps li { opacity: 1; } .ship.done .pack-steps li::after { opacity: 1; } .ship.done .pack-steps li::before { background: var(--olive); }
.ship.done .rider { offset-distance: 100%; }
@keyframes shipTissue { to { transform: scaleY(1); } }
@keyframes shipFade { to { opacity: 1; } }
@keyframes shipDrop { to { transform: translateY(210px); } }
@keyframes shipFlap { to { transform: none; } }
@keyframes shipPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; } }
@keyframes shipStep { to { opacity: 1; } }
@keyframes shipDot { to { background: var(--olive); } }
@keyframes shipRoad { from { stroke-dashoffset: 1; stroke-dasharray: 0 1; } to { stroke-dasharray: 1 0; } }
@keyframes shipRide { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.ship.play .pin, .ship.play .label { transform-box: fill-box; transform-origin: center bottom; }


.eq-break { flex-basis: 100%; height: 0; }   /* 5 photos: 3 over 2; 7 photos: 4 over 3 */

.eq-sources[data-n="7"] .eq-card { width: clamp(60px, 7.6vw, 108px); }   /* 4 over 3 leaves room for bigger cards */

/* site-wide: never hyphenate or split words across lines (owner) */
body, body * { hyphens: none !important; -webkit-hyphens: none !important; }

/* Digital copy motion graphic */
.dc { padding: clamp(56px, 8vw, 110px) max(16px, 5vw); background: linear-gradient(180deg, #f3eee4 0%, var(--cream) 100%); text-align: center; overflow: hidden; }
.dc-head h2 { margin: 0 auto; max-width: none; font: 500 clamp(34px, 4.6vw, 64px)/1.06 var(--serif); letter-spacing: -1px; }
.dc-head h2 em { color: var(--olive); }
.dc-sub { max-width: 560px; margin: 18px auto 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.dc-stage { position: relative; max-width: 1060px; margin: 36px auto 0; aspect-ratio: 16 / 9.6; }   /* tall enough to contain the phone */
.dc-frame { position: absolute; left: 9%; top: 9%; width: 26%; border-radius: 6px; overflow: hidden; box-shadow: 0 15px 35px rgba(55,38,24,.22); opacity: 0; }   /* digital file only: no frame mock-up */
.dc-frame img, .dc-file img { display: block; width: 100%; height: auto; }
.dc-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.dc-line { fill: none; stroke: #606847; stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.dc-glow { fill: none; stroke: rgba(96,104,71,.18); stroke-width: 10; stroke-linecap: round; opacity: 0; }
.dc-spark { fill: #fffdf8; stroke: #606847; stroke-width: 2.5; opacity: 0; }
.dc-file { position: absolute; left: 0; top: 0; z-index: 4; transform-origin: center; will-change: transform, opacity; width: 15%; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: #fffdf9; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 26px rgba(55,38,24,.18); text-align: left; opacity: 0; }
.dc-file img { width: 34%; border-radius: 4px; }
.dc-file span { font-size: clamp(9px, .95vw, 12px); color: var(--muted); line-height: 1.3; } .dc-file b { display: block; color: var(--ink); font-weight: 600; }
.dc-points { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 64px auto 0; padding: 0; }
.dc-points li { font: 600 13px var(--sans); color: var(--ink); background: #fffdf9; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; }
/* iPhone Pro Max style phone (19.5:9) with a Messages-style group chat; sizes in cqw so the UI scales with the phone */
.dc-phone { position: absolute; left: 59%; top: 0; width: 28%; aspect-ratio: 77.6 / 163; container-type: inline-size; padding: .55%; border-radius: 15% / 7.1%; background: linear-gradient(135deg, #d9d4cc 0%, #a9a49b 22%, #e8e3db 48%, #8f8a82 74%, #cfcac2 100%); box-shadow: 0 34px 70px rgba(40,28,18,.30), inset 0 0 0 1px rgba(255,255,255,.5); }
.dc-bezel { width: 100%; height: 100%; padding: 2.2cqw; border-radius: 14cqw; background: #0d0d0f; }
.dc-screen { position: relative; width: 100%; height: 100%; border-radius: 12cqw; background: #fff; overflow: hidden; display: flex; flex-direction: column; text-align: left; font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif; color: #000; }
.dc-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 11cqw; padding: 0 7cqw 0 9cqw; font-size: 4.3cqw; flex: none; }
.dc-status b { font-weight: 600; letter-spacing: -.1px; }
.dc-island { position: absolute; left: 50%; top: 2.6cqw; width: 30cqw; height: 8.6cqw; margin-left: -15cqw; border-radius: 99px; background: #000; }
.dc-sys { display: flex; align-items: center; gap: 1.4cqw; } .dc-sys svg { height: 3.2cqw; width: auto; fill: currentColor; } .dc-sys svg:last-child { height: 3.4cqw; }
.dc-nav { position: relative; display: flex; align-items: flex-start; justify-content: center; padding: 1cqw 4cqw 3cqw; background: rgba(249,249,249,.94); border-bottom: .3cqw solid #e2e2e4; flex: none; }
.dc-back { position: absolute; left: 3cqw; top: 6cqw; } .dc-back svg { width: 3.2cqw; height: auto; fill: none; stroke: #0a84ff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dc-video { position: absolute; right: 4cqw; top: 6.4cqw; } .dc-video svg { width: 6.4cqw; height: auto; fill: none; stroke: #0a84ff; stroke-width: 1.8; stroke-linejoin: round; }
.dc-who { display: flex; flex-direction: column; align-items: center; gap: 1cqw; font-size: 3.3cqw; }
.dc-who b { font-weight: 500; color: #000; } .dc-who em { font-style: normal; color: #8e8e93; }
.dc-faces { display: flex; } .dc-faces i { width: 9cqw; height: 9cqw; margin-left: -2.4cqw; border-radius: 50%; border: .6cqw solid #f9f9f9; display: grid; place-items: center; font: 600 3.6cqw/1 -apple-system, system-ui, sans-serif; font-style: normal; color: #fff; background: linear-gradient(#a3a3a8, #85858b); }
.dc-faces i:first-child { margin-left: 0; background: linear-gradient(#b7a58b, #8f7b61); } .dc-faces i:nth-child(2) { background: linear-gradient(#8c977a, #66704f); }
.dc-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.4cqw; padding: 3cqw 3.6cqw 3cqw; position: relative; }
.dc-time { margin: 0 0 2cqw; text-align: center; font-size: 2.9cqw; color: #8e8e93; } .dc-time b { font-weight: 600; }
.dc-msg { opacity: 0; font-size: 4cqw; line-height: 1.3; }
.dc-sent { align-self: flex-end; width: 56%; position: relative; }
.dc-sent img { display: block; width: 100%; height: auto; border-radius: 5cqw; }
.dc-receipt { align-self: flex-end; margin: -.4cqw 1cqw 1.6cqw 0; font-size: 2.8cqw; color: #8e8e93; font-weight: 500; }
.dc-react { position: absolute; left: -5cqw; top: -4cqw; display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: #0a84ff; border: .7cqw solid #fff; opacity: 0; }
.dc-react svg { width: 4.4cqw; height: auto; fill: #fff; }
.dc-in { align-self: flex-start; max-width: 76%; display: flex; flex-direction: column; }
.dc-in small { margin: 0 0 .6cqw 3.6cqw; font-size: 2.8cqw; color: #8e8e93; }
.dc-in span { padding: 2cqw 3.6cqw; background: #e9e9eb; border-radius: 4.8cqw; color: #000; }
.dc-typing { position: absolute; left: 3.6cqw; bottom: 3cqw; display: flex; gap: 1cqw; padding: 2.8cqw 3.6cqw; background: #e9e9eb; border-radius: 99px; opacity: 0; }
.dc-typing i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: #8e8e93; animation: dcDot 1s infinite; }
.dc-input { display: flex; align-items: center; gap: 2.4cqw; padding: 1.6cqw 3.6cqw 2cqw; flex: none; }
.dc-plus { width: 7.6cqw; height: 7.6cqw; border-radius: 50%; background: #e9e9eb; display: grid; place-items: center; color: #8e8e93; font-size: 5.4cqw; line-height: 1; }
.dc-field { flex: 1; height: 7.6cqw; border: .3cqw solid #d1d1d6; border-radius: 99px; padding: 0 3.4cqw; display: flex; align-items: center; font-size: 3.6cqw; color: #b0b0b5; }
.dc-home { width: 34%; height: 1.3cqw; margin: 1.6cqw auto 2.4cqw; border-radius: 99px; background: #000; flex: none; }
/* 0.2 frame · 1.0 file pops · 1.5–2.6 flies to the phone · 2.7 sent · 3.4 typing · 4.2 / 5.4 replies · 6.0 hearts */
@keyframes dcDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
@media (max-width: 760px) {
  .dc-stage { aspect-ratio: 4 / 5; }
  .dc-frame { left: 4%; top: 6%; width: 44%; }
  .dc-phone { left: 48%; top: 10%; width: 50%; }
  .dc-file { width: 34%; }
}
.dc-frame { position: absolute; }
.dc-badge { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,253,248,.94); box-shadow: 0 4px 6px rgba(55,38,24,.15); font: 600 12px var(--sans); color: #302e29; white-space: nowrap; }
.dc-badge b { padding: 3px 8px; border-radius: 999px; background: #302e29; color: #fffdf8; font-size: 12px; letter-spacing: .5px; }
.dc-sent { transform-origin: 100% 100%; } .dc-typing { transform-origin: 0 100%; } .dc-react { transform-origin: center; }
.dc.done .dc-frame, .dc.done .dc-sent, .dc.done .dc-receipt, .dc.done .m1, .dc.done .m2, .dc.done .dc-react { opacity: 1; }
/* end digital copy */
/* Art style row */
.as-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.as-points li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink); }
.as-points li::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--olive); }
.as-points li::after { content: ""; position: absolute; left: 5.5px; top: 50%; width: 4px; height: 8px; margin-top: -6px; border: solid #fffdf8; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.R0Hqwq_visual.as { position: relative; aspect-ratio: 1112 / 1416; height: auto; padding: 0; background: #f2ede3; overflow: hidden; }
.as-card { position: absolute; margin: 0; }
.as-card img { display: block; width: 100%; height: auto; }
.as-card figcaption { margin-top: 12px; font: 600 clamp(13px, 1.3vw, 17px)/1.25 var(--serif); color: var(--ink); text-align: left; }
.as-card figcaption span { font: 400 clamp(11px, 1vw, 13px) var(--sans); color: var(--olive); letter-spacing: .3px; }
.as-photo { left: 8%; top: 7%; width: 34%; transform: rotate(-4deg); }
.as-photo img { border: 6px solid #fffdf8; box-shadow: 0 12px 26px rgba(55,38,24,.18); }
.as-pencil { right: 7%; bottom: 9%; width: 54%; }
.as-pencil img { border-radius: 6px; box-shadow: 0 24px 46px rgba(55,38,24,.24); }
.as-arrow { position: absolute; left: 40%; top: 18%; width: 22%; height: auto; overflow: visible; }
.as-arrow path { fill: none; stroke: #606847; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 0; }
#art-style-heading, .as-copy, .as-points { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; }
.as-copy { text-align: justify; text-justify: inter-word; }
/* end art style row */
/* Real-life slideshow */
.rl { padding: 96px max(16px, 5vw); background: #f3eee4; text-align: center; overflow: hidden; }
.rl-head h2 { margin: 0 auto; max-width: none; font: 500 clamp(36px, 4.6vw, 60px)/1.06 var(--serif); letter-spacing: -1px; }
.rl-head h2 em { color: var(--olive); }
.rl-sub { max-width: 34em; margin: 16px auto 0; font-size: 16px; line-height: 1.6; color: #5f5a50; }
.rl-mode { display: inline-flex; flex-wrap: wrap; justify-content: center; margin: 32px auto 0; padding: 4px; border-radius: 12px; background: #e6dfd2; gap: 4px; }
.rl-mode button { font: 600 14px var(--sans); color: #5f5a50; background: none; border: 0; border-radius: 8px; padding: 12px 20px; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.rl-mode button[aria-pressed=true] { background: #fffdf9; color: var(--ink); box-shadow: 0 1px 3px rgba(55,38,24,.18); }
.rl-mode button:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.rl-tabs { display: flex; width: max-content; max-width: 100%; margin: 16px auto 48px; }
.rl-stage { position: relative; max-width: 1180px; margin: 0 auto; display: grid; }
.rl-slide { grid-area: 1 / 1; margin: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) 96px minmax(0, .82fr); align-items: center; gap: 24px; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
.rl-slide.on { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.rl-photo { position: relative; transform: rotate(-2deg); }
.rl-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 8px solid #fffdf8; box-shadow: 0 10px 24px rgba(55,38,24,.18); }
.rl-tag { position: absolute; left: 16px; top: 16px; z-index: 2; font: 600 12px var(--sans); letter-spacing: .6px; text-transform: uppercase; color: #302e29; background: rgba(255,253,248,.92); border-radius: 999px; padding: 6px 12px; }
.rl-cards { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 48px; }
.rl-cards .rl-tag { left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rl-cardrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 8px; }
.rl-break { flex-basis: 100%; height: 0; }
.rl-cards .rl-card { width: clamp(80px, 9.5vw, 132px); transform: rotate(calc((var(--j) - 2) * 1.6deg)); }
.rl-cards[data-n="2"] .rl-card, .rl-cards[data-n="3"] .rl-card { width: clamp(100px, 12vw, 164px); }
.rl-cards[data-n="7"] .rl-card { width: clamp(68px, 8vw, 112px); }
.rl-slide.on .rl-cards .rl-card { animation: rlCard .6s cubic-bezier(.2,.9,.3,1.25) both; animation-delay: calc(var(--j) * .1s); }
.rl-combo { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 48px; }
.rl-combo .rl-tag { left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rl-photo-sm { flex: 1 1 0; min-width: 0; }
.rl-add { margin: 0; flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rl-add figcaption { font: 600 12px/1.3 var(--sans); color: #5f5a50; max-width: 14ch; text-align: center; }
.rl-card { width: clamp(96px, 11vw, 148px); aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: center 25%; border: 6px solid #fffdf8; box-shadow: 0 10px 24px rgba(55,38,24,.18); transform: rotate(3deg); }
.rl-plus { font: 400 30px/1 var(--serif); color: var(--olive); }
.rl-arrow { width: 96px; height: auto; overflow: visible; } .rl-arrow path { fill: none; stroke: var(--olive); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rl-por img { display: block; width: 100%; height: auto; box-shadow: 0 15px 35px rgba(55,38,24,.24); }
.rl-slide figcaption { grid-column: 1 / -1; margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.rl-slide figcaption b { font: italic 400 24px/1.3 var(--serif); color: var(--ink); }
.rl-slide figcaption small { font-size: 12px; color: #6b665c; }
.rl-slide.on .rl-por img { animation: rlDevelop 1.6s cubic-bezier(.45,0,.2,1) both .25s; }
.rl-slide.on .rl-add { animation: rlCard .6s cubic-bezier(.2,.9,.3,1.25) both .35s; }
@keyframes rlDevelop { from { opacity: 0; transform: translateY(16px) scale(.97); filter: grayscale(1) contrast(1.25) brightness(1.08); } 60% { opacity: 1; filter: grayscale(.5); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rlCard { from { opacity: 0; transform: translateY(24px) scale(.85); } }
@media (max-width: 820px) {
  .rl { padding: 64px 16px; }
  .rl-mode button { padding: 10px 12px; font-size: 13px; }
  .rl-tabs { flex-wrap: wrap; justify-content: center; }
  .rl-slide { grid-template-columns: 1fr; gap: 16px; }
  .rl-arrow { justify-self: center; transform: rotate(90deg); width: 64px; }
  .rl-por { max-width: 360px; justify-self: center; }
  .rl-combo { flex-wrap: wrap; } .rl-photo-sm { flex-basis: 100%; } .rl-card { width: 96px; }
  .rl-slide figcaption b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .rl-slide, .rl-slide.on { transition: none; } .rl-slide.on .rl-por img, .rl-slide.on .rl-add { animation: none; } }
/* end real-life slideshow */
/* Frame mockup + details */
.R0Hqwq_visual.home-mock { aspect-ratio: 1082 / 1352; height: auto; padding: 0; background: #e9e1d5; overflow: hidden; }
.home-mock-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.R0Hqwq_visual.fd { position: relative; aspect-ratio: 1112 / 1416; height: auto; padding: 0; background: #f2ede3; overflow: hidden; }
.fd-por { position: absolute; left: 4%; top: 20%; width: 60%; height: auto; box-shadow: 0 18px 36px rgba(55,38,24,.18); }
.fd-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fd-lines path { fill: none; stroke: #606847; stroke-width: .35; } .fd-lines circle { fill: #606847; }
.fd-call { position: absolute; left: 69%; width: 28%; text-align: left; }
.fd-c1 { top: 7%; } .fd-c2 { top: 50%; }
.fd-zoom { width: 100%; aspect-ratio: 1; border-radius: 50%; background-image: url(/portraits/siblings_3.webp); background-size: 800% auto; background-repeat: no-repeat; border: 3px solid #fffdf8; box-shadow: 0 0 0 1px #606847, 0 14px 30px rgba(55,38,24,.2); }
.fd-call p { margin: 12px 0 0; font-size: clamp(11px, 1.05vw, 14px); line-height: 1.45; color: var(--muted); }
.fd-call b { display: block; margin-bottom: 3px; font: 600 clamp(14px, 1.4vw, 19px)/1.2 var(--serif); color: var(--ink); }
.R0Hqwq_visual.fd { background: none; border-radius: 0; overflow: visible; }   /* no card: sits directly on the page (owner) */
.fd-por { box-shadow: 0 24px 48px rgba(55,38,24,.22); }
/* end frame mockup + details */
/* Delivery map v3: 3D walnut islands on parchment (Astra design), Manila close-up → whole Philippines */
.ship-map3 { position: relative; max-width: 1180px; margin: 40px auto 0; aspect-ratio: 1672 / 941; border-radius: 18px; overflow: hidden; background: #efe6d8; border: 1px solid var(--line); --inA: 0; --inB: 0; }
.ship-map3 .lyr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; transform-origin: 0 0; overflow: visible; }
.ship-map3 .lines .rt { fill: none; stroke: #4f5733; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ship-map3 .glowlines .rt { fill: none; stroke: #fff3d0; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .3; }
.ship-map3 .lyr-b .lines .rt { stroke-width: 2.6; }
.ship-map3 .stop, .ship-map3 .origin { opacity: 0; }
.ship-map3 .mpin .head { fill: #5e6640; stroke: #fdf6e6; stroke-width: 3; }
.ship-map3 .mpin .shine { fill: rgba(255,255,255,.75); }
.ship-map3 .mpin-o .head { fill: #4f5733; }
.ship-map3 .lbl { font: 600 19px var(--serif); fill: #2f2a22; paint-order: stroke; stroke: rgba(250,243,230,.9); stroke-width: 5px; stroke-linejoin: round; }
.ship-map3 .lyr-b .lbl { font-size: 21px; }
.ship-map3 .lbl-o { font-size: 23px; font-weight: 700; }
.ship-map3 .map-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(243,236,224,.94) 0%, rgba(243,236,224,.78) 30%, rgba(243,236,224,0) 46%); }
.ship-map3 .map-cap { position: absolute; left: clamp(18px, 4vw, 54px); top: 50%; transform: translateY(-50%); width: min(36%, 400px); text-align: left; }
.ship-map3 .map-cap h3 { margin: 0 0 10px; font: 500 clamp(26px, 3vw, 42px)/1.08 var(--serif); letter-spacing: -.5px; color: #302e29; }
.ship-map3 .map-cap h3 em { color: var(--olive); }
.ship-map3 .map-cap p:not(.eq-kicker) { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.ship-map3 .cap-a { opacity: var(--inA); } .ship-map3 .cap-b { opacity: var(--inB); }
.ship-map3 .couriers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ship-map3 .couriers span { display: flex; align-items: center; justify-content: center; width: 136px; height: 48px; box-sizing: border-box; background: #fffdf9; border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; box-shadow: 0 6px 16px rgba(55,38,24,.08); }
.ship-map3 .couriers img { display: block; width: 100%; height: 26px; object-fit: contain; }   /* both logos in the same box, scaled to fit, never cropped */
@media (max-width: 760px) {
  .ship-map3 { aspect-ratio: auto; height: min(720px, calc(100vw * 1.55)); }
  .ship-map3 .lyr { height: 58%; }
  .ship-map3 .map-veil { background: linear-gradient(180deg, rgba(243,236,224,0) 50%, rgba(243,236,224,1) 60%); }
  .ship-map3 .map-cap { top: 58%; transform: none; left: 18px; right: 18px; width: auto; padding-top: 8px; }
  .ship-map3 .map-cap h3 { font-size: 24px; } .ship-map3 .map-cap p:not(.eq-kicker) { font-size: 13.5px; }
  .ship-map3 .lbl { font-size: 26px; } .ship-map3 .lyr-b .lbl { font-size: 30px; } .ship-map3 .lbl-o { font-size: 30px; }
}
/* end delivery map v3 */
/* "by Lit Studios" under the Tahanan Frames logo (one-line Lit Studios wordmark, small) */
.brand { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.brand-by { display: inline-flex; align-items: center; gap: 5px; font: 500 10px/1 var(--sans); letter-spacing: .4px; color: #6b665c; }
.brand-by img { height: 9px; width: auto; display: block; }
.site-footer .brand-by { font-size: 11px; } .site-footer .brand-by img { height: 11px; }

.site-header .brand, .site-footer .brand { flex-direction: column; align-items: center !important; }   /* centre "by Lit Studios" under the logo */

/* Packing envelope */
.ev .ev-floor { fill: rgba(55,38,24,.10); }
.ev .ev-env { transform: translateY(340px); }
.ev .ev-back { fill: #a9845a; stroke: #4a3427; stroke-width: 1.4; }
.ev .ev-flap-open { fill: url(#evFlapIn); stroke: #4a3427; stroke-width: 1.4; stroke-linejoin: round; }
.ev .ev-print, .ev .ev-frame, .ev .ev-wrap, .ev .ev-label, .ev .ev-seal { opacity: 0; }
.ev .ev-wrap { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.ev .ev-wrap-film { fill: rgba(226,234,238,.55); stroke: rgba(255,255,255,.95); stroke-width: 1.2; }
.ev .ev-wrap-shine { fill: none; stroke: rgba(255,255,255,.8); stroke-width: 3; stroke-linecap: round; }
.ev .ev-wrap-tape { fill: rgba(222,198,160,.7); }
.ev .ev-front { fill: #c4a072; stroke: #4a3427; stroke-width: 1.4; }
.ev .ev-pad { fill: none; stroke: rgba(74,52,39,.35); stroke-width: 1.2; }
.ev .ev-fragile { font: 800 30px var(--sans); letter-spacing: 3px; fill: #4a3427; } .ev .ev-upright { font: 700 12px var(--sans); letter-spacing: 2px; fill: #4a3427; }
.ev .ev-arrow { fill: none; stroke: #4a3427; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ev .ev-flap { fill: #c4a072; stroke: #4a3427; stroke-width: 1.4; stroke-linejoin: round; transform-box: view-box; transform-origin: 280px 252px; transform: scaleY(-1); opacity: 0; }
.ev .ev-seal { fill: rgba(74,52,39,.18); }
.ev .ev-label-bg { fill: #fbf8f2; stroke: rgba(74,52,39,.28); }
.ev .ev-icons rect, .ev .ev-icons path { fill: none; stroke: #4a3427; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
/* .4 print · 1.2 frame · 1.9 bubble wrap · 2.7 turns sideways to fit · 3.3 envelope rises · 3.9 slides in · 4.9 flap closes · 5.5 label */
.ev .ev-rot { transform-box: view-box; transform-origin: 280px 150px; }
.ship.play .ev-rot { animation: evRot .6s cubic-bezier(.5,0,.3,1) 2.7s both; }
.ship.play .ev-print { animation: bxIn .6s ease .4s both; }
.ship.play .ev-frame { animation: bxIn .5s ease 1.2s both; }
.ship.play .ev-wrap { animation: evWrap .7s cubic-bezier(.5,0,.3,1) 1.9s both; }
.ship.play .ev-env { animation: evRise .6s cubic-bezier(.3,.9,.3,1) 3.3s both; }
.ship.play .ev-item { animation: evSlide .9s cubic-bezier(.6,0,.35,1) 3.9s both; }
.ship.play .ev-flap-open { animation: evHide .01s linear 4.9s both; }
.ship.play .ev-flap { animation: evFlap .5s cubic-bezier(.5,0,.3,1) 4.9s both; }
.ship.play .ev-seal { animation: bxIn .2s ease 5.4s both; }
.ship.play .ev-label { animation: shipPop .5s cubic-bezier(.3,1.5,.5,1) 5.5s both; transform-box: fill-box; transform-origin: center; }
.ship.play .pack-steps li:nth-child(1) { animation-delay: .5s; } .ship.play .pack-steps li:nth-child(1)::before { animation-delay: .6s; } .ship.play .pack-steps li:nth-child(1)::after { animation-delay: .7s; }
.ship.play .pack-steps li:nth-child(2) { animation-delay: 1.3s; } .ship.play .pack-steps li:nth-child(2)::before { animation-delay: 1.4s; } .ship.play .pack-steps li:nth-child(2)::after { animation-delay: 1.5s; }
.ship.play .pack-steps li:nth-child(3) { animation-delay: 5.5s; } .ship.play .pack-steps li:nth-child(3)::before { animation-delay: 5.6s; } .ship.play .pack-steps li:nth-child(3)::after { animation-delay: 5.7s; }
.ship.done .ev-env { transform: none; } .ship.done .ev-item { transform: translateY(220px); } .ship.done .ev-rot { transform: rotate(-90deg); } .ship.done .ev-flap-open { opacity: 0; }
.ship.done .ev-print, .ship.done .ev-frame, .ship.done .ev-label, .ship.done .ev-seal { opacity: 1; }
.ship.done .ev-wrap { opacity: 1; transform: none; } .ship.done .ev-flap { opacity: 1; transform: scaleY(0); }
@keyframes bxIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes evWrap { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes evRise { from { transform: translateY(340px); } to { transform: none; } }
@keyframes evSlide { from { transform: none; } to { transform: translateY(220px); } }
@keyframes evRot { from { transform: none; } to { transform: rotate(-90deg); } }
@keyframes evHide { to { opacity: 0; } }
@keyframes evFlap { 0% { opacity: 1; transform: scaleY(1); } 100% { opacity: 1; transform: scaleY(0); } }
.ev.pack-svg { max-width: 640px; }
.ship-pack:has(.ev) { max-width: 1120px; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
@media (max-width: 760px) { .ship-pack:has(.ev) { grid-template-columns: 1fr; } }
/* end packing envelope */
/* header account link */
.nav-account { font: 600 14px var(--sans); color: var(--ink); text-decoration: none; padding: 8px 4px; }
.nav-account:hover { text-decoration: underline; }

/* accepted payment methods: under the closing "order" button, and as a "We accept" row in the footer */
.pay-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pay-badges li { display: block; line-height: 0; } .pay-badges svg { width: 72px; height: 45px; } .pay-badges span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pay-lock { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
.home-pay { display: grid; justify-items: center; gap: 12px; margin: 24px auto 0; max-width: 520px; }
.home-pay p { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 13px; line-height: 1.5; color: #6b6a5e; }
.footer-pay { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
.footer-pay .pay-badges { justify-content: flex-start; } .footer-pay .pay-badges svg { width: 60px; height: 38px; }
.footer-pay-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5f5e52; }
.footer-pay-by { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; color: #727164; }
@media (max-width: 700px) { .home-pay p { flex-direction: column; text-align: center; } .footer-pay-by { margin-left: 0; width: 100%; } }

/* footer brand block: the tagline sits centred under the centred logo */
.site-footer > div:first-child { justify-self: start; display: grid; justify-items: center; text-align: center; align-content: start; }
.site-footer > div:first-child p { margin-top: 12px; }