Tidewell Movement Studio — Organic Wellness The Studio Page for Divi 5

The layout opens with a split-column hero where a portrait-ratio (4:5) studio photograph fills the left column while a cream-tinted card group on the right is pulled 128px over the photo edge using a negative left margin. The card carries a 1px warm-sand border (#dccdb4), a 28px corner radius, and a soft drop shadow set in the layout's own box-shadow values, creating physical depth without a line of custom CSS. Inside it, an uppercase DM Sans eyebrow at 14px sits above a Fraunces H1 at 52px (scaling to 40px on tablet and 32px on phone via explicit breakpoint overrides), a two-sentence body paragraph, and a forest-green pill CTA button. On phones, the negative margin resets to zero, the card receives a -64px top pull instead so it tucks under the stacked image, and both columns expand to full width, preserving the layered impression at every viewport.

The second section cycles through three alternating image-and-text rows, each introduced by a small uppercase numeral (01, 02, 03) set in DM Sans above a Fraunces H3 at 32px. The rows alternate direction: on desktop the first and third pairs place the photo on the left, while the second reverses the columns. That second row also applies a phone order: -1 rule to its image column so that when the layout stacks vertically, the photo still reads before its text, keeping the rhythm consistent regardless of orientation. Each feature block caps its body copy at a 480px max-width container and closes with a standalone underlined text link rather than a button, a low-pressure CTA style that suits a studio whose identity is built on calm rather than conversion pressure.

The third section builds a six-image editorial spread from three equal columns, each holding a Divi Group with two stacked Image modules and a 16px row gap. Column one alternates a 4:5 portrait over a 4:3 landscape; column two leads with a 4:3 then a 4:5; column three mirrors column one. The images cascade at different heights across the row, producing the look of editorial masonry without any custom grid code. The section header is itself a flex row with the H2 left-aligned and a short caption right-aligned to flex-end, so both elements land at the visual bottom of the row regardless of how much heading text is present.

Two full-bleed image sections close the content. Each uses a Pexels background photo with a flat 70% dark gradient overlay (rgba 34, 26, 16) to hold text contrast. The first carries a single pullquote in Fraunces at 42px, prefaced by a decorative 120px opening quotation mark used as a typographic accent, then closed by a 64px divider and a two-line attribution block. The second presents a four-column timeline grid that collapses to two columns on tablet and one on phone, with each milestone entry topped by a 2px solid border, a large year in Fraunces at 48px, and a one-sentence description in DM Sans. The layout closes on a solid forest-green (#41603a) CTA band where a Fraunces H2 and a cream-coloured pill button share a horizontal flex row with space-between alignment on desktop and stack vertically on phones.