/* ========================================================================== INTEGRATED WELLNESS UK ========================================================================== Layout principle ---------------- Nothing in this file sets a column count. Repeating blocks use .iw-autofit, a wrapping flex row driven by two custom properties: --iw-basis the ideal width of one item --iw-max the widest a lone item is allowed to become The browser fits as many items per row as --iw-basis allows and wraps the rest, so 1, 3, 5 or 20 items all produce a balanced row. Items never drop below min(100%, --iw-basis), which is what makes the phone layout stack without a single media query. Colours come from the "Site Basics" admin screen as CSS variables, so re-theming is a one-field change. ========================================================================== */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { --iw-font-display: 'Lora', Georgia, 'Times New Roman', serif; --iw-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Overridden inline from Site Basics — these are the design defaults. */ --iw-forest: #2d5a4e; --iw-forest-rgb: 45, 90, 78; --iw-forest-dark: #1d3d34; --iw-forest-dark-rgb: 29, 61, 52; --iw-amber: #c4955a; --iw-amber-rgb: 196, 149, 90; --iw-parchment: #faf7f2; --iw-parchment-rgb: 250, 247, 242; --iw-cream: #f0ebe0; --iw-cream-rgb: 240, 235, 224; --iw-ink: #1a1a18; --iw-ink-rgb: 26, 26, 24; --iw-muted: #8a8078; /* Both are overridden inline from the Header and Footer screens; these are the design defaults, used if the stylesheet is ever served without them. */ --iw-logo-h: 80px; --iw-logo-h-footer: 64px; --iw-shell: 1280px; --iw-pad: 24px; --iw-pad-lg: 40px; --iw-section: 96px; --iw-r-card: 24px; --iw-r-pill: 999px; --iw-r-tile: 16px; } /* ── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--iw-font-body); font-size: 16px; line-height: 1.6; color: var(--iw-ink); background: var(--iw-parchment); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * Nothing may ever scroll the page sideways. * * overflow-x: hidden on alone is not enough — on mobile the * element still scrolls, which is why a phone could be dragged sideways. * `clip` is used in preference to `hidden` because it does not turn the element * into a scroll container, so position: sticky and scroll-behavior keep working. */ html, body { overflow-x: hidden; /* fallback for older browsers */ overflow-x: clip; max-width: 100%; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } /* Long unbroken words (pasted URLs, German compounds) must not force a horizontal scrollbar. */ h1, h2, h3, h4, p, li, blockquote, figcaption, cite, td, th, dd, dt { overflow-wrap: break-word; } :focus-visible { outline: 2px solid var(--iw-amber); outline-offset: 3px; border-radius: 3px; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--iw-forest-rgb), .25); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--iw-forest-rgb), .5); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .iw-skip { position: absolute; top: -60px; left: 16px; z-index: 100; padding: 10px 18px; border-radius: var(--iw-r-pill); background: var(--iw-forest); color: var(--iw-parchment); font-size: 14px; transition: top .2s; } .iw-skip:focus { top: 16px; } /* Invisible in-page link target. */ .iw-anchor { display: block; height: 0; overflow: hidden; } /* ── Layout utilities ───────────────────────────────────────────────────── */ .iw-container { width: 100%; max-width: var(--iw-shell); margin-inline: auto; padding-inline: var(--iw-pad); } .iw-container--mid { max-width: 1024px; } .iw-container--narrow { max-width: 896px; } @media (min-width: 1024px) { .iw-container { padding-inline: var(--iw-pad-lg); } } /* The auto-layout engine. */ .iw-autofit { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--iw-gap, 24px); } .iw-autofit > * { flex: 1 1 var(--iw-basis, 260px); min-width: min(100%, var(--iw-basis, 260px)); max-width: var(--iw-max, 100%); min-height: 0; } /* Section backgrounds. Light sections do not hard-code a colour — PHP alternates parchment and cream in render order, so any combination of sections on any page keeps the rhythm of the original design with no two identical bands touching. */ .iw-bg--parchment { background: var(--iw-parchment); } .iw-bg--cream { background: var(--iw-cream); } /* Scroll reveal */ .iw-reveal { opacity: 1; transform: translateY(32px); transition: opacity .75s ease var(--iw-delay, 0ms), transform .75s ease var(--iw-delay, 0ms); } .iw-reveal--left { transform: translateX(-36px); } .iw-reveal--right { transform: translateX(36px); } .iw-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .iw-reveal, .iw-reveal.is-in { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── Typography primitives ──────────────────────────────────────────────── */ /* --iw-hl-color is set inline when the client picks a colour for a specific heading, so the highlighted words follow it instead of the palette. */ .iw-hl { font-style: normal; color: var(--iw-hl-color, var(--iw-forest)); } .iw-hl--gold { color: var(--iw-hl-color, var(--iw-amber)); } .iw-hl--green { color: var(--iw-hl-color, var(--iw-forest)); } .iw-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--iw-amber); margin-bottom: 12px; } .iw-eyebrow--gold { font-size: 11px; letter-spacing: .2em; margin-bottom: 10px; } .iw-head { text-align: center; max-width: 780px; margin: 0 auto 56px; } .iw-head__title { font-family: var(--iw-font-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600; line-height: 1.15; color: var(--iw-ink); margin-bottom: 16px; text-wrap: balance; } .iw-head__intro { max-width: 560px; margin-inline: auto; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--iw-muted); } .iw-head__intro p + p { margin-top: 1em; } .iw-head--dark .iw-head__title { color: var(--iw-parchment); } .iw-head--dark .iw-head__intro { color: rgba(var(--iw-parchment-rgb), .78); } .iw-chip { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; border-radius: var(--iw-r-pill); padding: 7px 18px; } .iw-chip--gold { color: #d4a96c; background: rgba(var(--iw-amber-rgb), .15); border: 1px solid rgba(var(--iw-amber-rgb), .28); } .iw-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; } .iw-tag { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--iw-forest); background: rgba(var(--iw-forest-rgb), .08); border: 1px solid rgba(var(--iw-forest-rgb), .15); padding: 5px 13px; border-radius: var(--iw-r-pill); } .iw-tags--xs { gap: 6px; margin-bottom: 0; } .iw-tags--xs .iw-tag { font-size: 10px; padding: 3px 9px; } .iw-bullets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; } .iw-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; min-width: 0; } .iw-bullets__dot { flex-shrink: 0; margin-top: 4px; font-size: 9px; line-height: 1; color: var(--iw-amber); } /* Two-up on wide columns, one-up when the column narrows. */ .iw-bullets--two { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; } .iw-bullets--two > li { flex: 1 1 200px; min-width: min(100%, 200px); } .iw-bullets--tight { gap: 6px; margin-bottom: 18px; } /* ── Rich text ──────────────────────────────────────────────────────────── */ /* * Everything the client writes in the full editor lands in one of these * containers. The global reset removes list markers, so they are put back here * — otherwise a bulleted list typed in the editor would render as plain lines. */ /* * Every list, heading and quote the theme itself renders carries a class; * everything the WordPress editor produces does not. Targeting :not([class]) * therefore styles the client's rich text without touching a single piece of * theme furniture — and needs no extra markup in the templates. */ .iw-main ul:not([class]), .iw-main ol:not([class]), .iw-footer ul:not([class]), .iw-footer ol:not([class]) { margin: .6em 0; padding-left: 1.3em; } .iw-main ul:not([class]), .iw-footer ul:not([class]) { list-style: disc; } .iw-main ol:not([class]), .iw-footer ol:not([class]) { list-style: decimal; } .iw-main li:not([class]) { margin-bottom: .3em; } .iw-main li:not([class])::marker { color: var(--iw-amber); } .iw-main :is(h3, h4, h5):not([class]) { font-family: var(--iw-font-display); font-weight: 600; line-height: 1.25; margin: 1.2em 0 .4em; color: inherit; } .iw-main h3:not([class]) { font-size: 1.25em; } .iw-main h4:not([class]) { font-size: 1.1em; } .iw-main blockquote:not([class]) { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--iw-amber); font-style: italic; } /* Links and emphasis inside body copy. */ .iw-main p:not([class]) a, .iw-main li:not([class]) a { text-decoration: underline; text-underline-offset: 3px; } .iw-main u { text-decoration: underline; text-underline-offset: 2px; } /* ── Buttons ────────────────────────────────────────────────────────────── */ .iw-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .iw-btns--lg { gap: 16px; } .iw-btns--center { justify-content: center; } .iw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 500; line-height: 1.3; text-align: center; padding: 14px 32px; border: 1.5px solid transparent; border-radius: var(--iw-r-pill); cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .iw-btn--sm { font-size: 13px; padding: 10px 22px; } /* Every button reads --iw-btn-bg / --iw-btn-fg first and falls back to the palette. Setting those two inline on one button recolours only that button, hover state included, with no extra CSS. */ .iw-btn--gold { background: var(--iw-btn-bg, var(--iw-amber)); color: var(--iw-btn-fg, #fff); } .iw-btn--gold:hover { background: var(--iw-btn-bg, var(--iw-amber)); /* fallback for old browsers */ background: color-mix(in srgb, var(--iw-btn-bg, var(--iw-amber)) 88%, #000); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(var(--iw-amber-rgb), .4); } .iw-btn--green { background: var(--iw-btn-bg, var(--iw-forest)); color: var(--iw-btn-fg, var(--iw-parchment)); } .iw-btn--green:hover { background: var(--iw-forest-dark); background: color-mix(in srgb, var(--iw-btn-bg, var(--iw-forest)) 84%, #000); transform: translateY(-2px); } /* Outline on a dark background */ .iw-btn--outline { border-color: var(--iw-btn-bg, rgba(var(--iw-parchment-rgb), .4)); color: var(--iw-btn-fg, var(--iw-parchment)); } .iw-btn--outline:hover { background: rgba(var(--iw-parchment-rgb), .12); } /* Outline on a light background */ .iw-btn--outline-dark { border-color: var(--iw-btn-bg, rgba(var(--iw-forest-rgb), .3)); color: var(--iw-btn-fg, var(--iw-forest)); } .iw-btn--outline-dark:hover { background: rgba(var(--iw-forest-rgb), .07); } .iw-btn--ghost-gold { align-self: flex-start; font-size: 13px; padding: 8px 18px; color: var(--iw-parchment); background: rgba(var(--iw-amber-rgb), .25); border-color: rgba(var(--iw-amber-rgb), .5); } .iw-btn--ghost-gold:hover { background: rgba(var(--iw-amber-rgb), .45); } .iw-btn--ig { color: var(--iw-parchment); background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); padding: 13px 32px; font-size: 14px; } .iw-btn--ig:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(131, 58, 180, .3); } /* ── Header ─────────────────────────────────────────────────────────────── */ .iw-nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s ease, box-shadow .4s ease, border-color .4s ease; border-bottom: 1px solid transparent; isolation: isolate; } .iw-nav__inner { max-width: var(--iw-shell); margin-inline: auto; padding: 16px var(--iw-pad); display: flex; align-items: center; justify-content: space-between; gap: 20px; } @media (min-width: 1024px) { .iw-nav__inner { padding-inline: var(--iw-pad-lg); } } .iw-nav--solid, .iw-nav.is-scrolled { background: rgba(var(--iw-parchment-rgb), .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: rgba(var(--iw-forest-rgb), .1); box-shadow: 0 2px 32px rgba(0, 0, 0, .07); } .iw-nav--transparent { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } /* * A faint scrim behind the transparent header. Over the dark hero it is * invisible; over a pale or busy photograph it is what keeps the white links * and logo readable. Without it the header depends entirely on whatever is * underneath it, which is a promise the theme cannot make. */ .iw-nav--transparent::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; pointer-events: none; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .10) 55%, transparent 100%); transition: opacity .4s ease; } .iw-nav.is-scrolled::before { opacity: 0; } .iw-nav__brand { display: inline-flex; flex-shrink: 0; } .iw-nav__logo { height: var(--iw-logo-h); width: auto; /* Room for the tallest setting the admin allows without the mark being clipped, whatever shape the client's logo happens to be. */ max-width: 280px; object-fit: contain; transition: filter .4s ease; } /* * The dark-background logo. * * brightness(0) invert(1) repaints EVERY opaque pixel white, which is right for * a one-colour mark on transparency and wrong for anything else — a badge with * its own light disc becomes a solid white circle. So the filter is opt-in via * Site Basics, and a client who has a proper light logo can supply that instead. */ .iw-logo-invert .iw-nav--transparent .iw-nav__logo { filter: brightness(0) invert(1); } /* Two-image mode: swap the file rather than filter it. */ .iw-nav__logo--dark { display: none; } .iw-nav--transparent .iw-nav__brand--dual .iw-nav__logo--light { display: none; } .iw-nav--transparent .iw-nav__brand--dual .iw-nav__logo--dark { display: block; } .iw-nav__name { font-family: var(--iw-font-display); font-size: 20px; font-weight: 600; color: var(--iw-forest); } .iw-nav--transparent .iw-nav__name { color: var(--iw-parchment); } .iw-nav__links { display: none; align-items: center; gap: 28px; min-width: 0; } .iw-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; min-width: 0; } .iw-nav__list a, .iw-nav__link { font-size: 14px; font-weight: 500; color: var(--iw-forest); transition: opacity .2s; } .iw-nav--transparent .iw-nav__list a, .iw-nav--transparent .iw-nav__link { color: rgba(var(--iw-parchment-rgb), .88); } .iw-nav__list a:hover, .iw-nav__link:hover { opacity: .6; } /* The page you are on. */ .iw-nav__list .current-menu-item > a, .iw-nav__list .current_page_item > a, .iw-nav__list .current-menu-ancestor > a { color: var(--iw-amber); } .iw-nav__cta { flex-shrink: 0; } /* ── Header dropdowns (only if the client nests menu items) ─────────────── */ .iw-nav__list li { position: relative; } .iw-nav__list .sub-menu { position: absolute; top: 100%; left: 50%; z-index: 20; min-width: 220px; margin: 0; padding: 8px; transform: translate(-50%, 8px); border-radius: 14px; background: var(--iw-parchment); border: 1px solid rgba(var(--iw-forest-rgb), .1); box-shadow: 0 18px 44px rgba(0, 0, 0, .14); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s; } .iw-nav__list li:hover > .sub-menu, .iw-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .iw-nav__list .sub-menu a { display: block; padding: 9px 14px; border-radius: 9px; font-size: 13.5px; color: var(--iw-forest); white-space: nowrap; } .iw-nav__list .sub-menu a:hover { opacity: 1; background: rgba(var(--iw-forest-rgb), .07); } /* A parent item keeps its colour even when the bar is transparent. */ .iw-nav--transparent .iw-nav__list .sub-menu a { color: var(--iw-forest); } .iw-nav__list .menu-item-has-children > a::after { content: ""; display: inline-block; margin-left: 6px; vertical-align: 2px; border-top: 4px solid currentColor; border-inline: 4px solid transparent; opacity: .7; } .iw-nav__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border: 0; background: none; cursor: pointer; } /* Declared after the base rules above so the desktop state always wins. */ @media (min-width: 1024px) { /* * The menu sits in the middle of the bar. * * The nav takes all the room left over beside the logo, and the list centres * itself inside it with automatic margins — which splits the free space * evenly on both sides instead of piling all of it up on the left, where it * read as a gap between the logo and "Services". The call-to-action stays * hard right, after the auto margin. */ .iw-nav__links { display: flex; flex: 1; } .iw-nav__list { margin-inline: auto; } .iw-nav__burger { display: none; } .iw-nav__mobile { display: none; } } .iw-nav__burger-bar { display: block; height: 1.5px; width: 100%; border-radius: 2px; background: var(--iw-forest); transition: transform .3s ease, opacity .2s ease, background .4s ease; } .iw-nav--transparent .iw-nav__burger-bar { background: var(--iw-parchment); } .iw-nav.is-open .iw-nav__burger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .iw-nav.is-open .iw-nav__burger-bar:nth-child(2) { opacity: 0; } .iw-nav.is-open .iw-nav__burger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .iw-nav__mobile { padding: 8px var(--iw-pad) 24px; background: rgba(var(--iw-parchment-rgb), .98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid rgba(var(--iw-forest-rgb), .08); max-height: calc(100svh - 84px); overflow-y: auto; } .iw-nav__mobile[hidden] { display: none; } .iw-nav__mobile-list a { display: block; padding: 13px 2px; font-size: 15px; color: var(--iw-forest); border-bottom: 1px solid rgba(var(--iw-forest-rgb), .08); } .iw-nav__mobile-list .current-menu-item > a, .iw-nav__mobile-list .current_page_item > a { color: var(--iw-amber); } /* Child pages are simply indented — no extra tap needed to reach them. */ .iw-nav__mobile-list .sub-menu a { padding-left: 18px; font-size: 14px; color: var(--iw-muted); } .iw-nav__mobile-list .sub-menu a::before { content: "— "; opacity: .5; } .iw-nav__mobile-cta { display: flex; width: 100%; margin-top: 16px; } .iw-main { display: block; } /* ── Hero ───────────────────────────────────────────────────────────────── */ .iw-hero { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--iw-forest-dark); isolation: isolate; } .iw-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: var(--iw-hero-opacity, .55); z-index: -2; } .iw-hero__wash { position: absolute; inset: 0; z-index: -1; background: linear-gradient( 100deg, rgba(var(--iw-forest-dark-rgb), .96) 0%, rgba(var(--iw-forest-dark-rgb), .82) 42%, rgba(var(--iw-forest-dark-rgb), .35) 75%, rgba(var(--iw-forest-dark-rgb), .10) 100% ); } .iw-hero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 75% 60%, rgba(var(--iw-amber-rgb), .15) 0%, transparent 55%); } .iw-hero__inner { position: relative; display: grid; gap: 48px; align-items: center; padding-block: 136px 120px; } @media (min-width: 1024px) { .iw-hero--has-card .iw-hero__inner { grid-template-columns: minmax(0, 1fr) 380px; } } .iw-hero__content { min-width: 0; } .iw-hero__title { font-family: var(--iw-font-display); font-size: clamp(2.6rem, 5.5vw, 4.8rem); font-weight: 600; line-height: 1.08; color: var(--iw-parchment); margin: 22px 0 24px; text-wrap: balance; } .iw-hero__body { max-width: 520px; margin-bottom: 40px; font-size: clamp(1rem, 1.3vw, 1.18rem); font-weight: 300; line-height: 1.78; color: rgba(var(--iw-parchment-rgb), .78); } .iw-hero__body p + p { margin-top: 1em; } .iw-hero__stats { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(var(--iw-parchment-rgb), .1); } .iw-stat { min-width: 0; } .iw-stat__value { display: block; font-family: var(--iw-font-display); font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--iw-amber); } .iw-stat__label { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: rgba(var(--iw-parchment-rgb), .5); } .iw-hero__aside { display: none; } @media (min-width: 1024px) { .iw-hero__aside { display: block; } } .iw-hero__card { position: relative; } .iw-hero__card-media { position: relative; height: 480px; border-radius: var(--iw-r-card); overflow: hidden; box-shadow: 0 48px 80px rgba(0, 0, 0, .4); } .iw-hero__card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .iw-hero__card-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--iw-forest-dark-rgb), .5) 0%, transparent 50%); } .iw-hero__badge { position: absolute; left: -20px; bottom: -20px; max-width: calc(100% + 20px); padding: 16px 20px; border-radius: var(--iw-r-tile); background: var(--iw-parchment); box-shadow: 0 8px 40px rgba(0, 0, 0, .18); } .iw-hero__badge-title { display: block; font-family: var(--iw-font-display); font-size: 14px; font-weight: 600; color: var(--iw-forest); } .iw-hero__badge-sub { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--iw-muted); } .iw-hero__dot { position: absolute; top: -28px; right: -28px; width: 96px; height: 96px; border-radius: 50%; background: var(--iw-amber); opacity: .2; } .iw-hero__scroll { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: .6; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(var(--iw-parchment-rgb), .7); } .iw-hero__scroll-line { width: 1px; height: 32px; background: rgba(var(--iw-parchment-rgb), .4); } @media (max-width: 767px) { .iw-hero__inner { padding-block: 120px 96px; } .iw-hero__scroll { display: none; } .iw-hero__stats { gap: 20px 28px; margin-top: 40px; padding-top: 28px; } } /* ── Philosophy ─────────────────────────────────────────────────────────── */ .iw-philosophy { background: var(--iw-forest); } .iw-philosophy__inner { display: grid; gap: 48px; align-items: center; padding-block: 80px; } @media (min-width: 1024px) { .iw-philosophy__inner { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 80px; padding-block: 96px; } } .iw-philosophy__quote { font-family: var(--iw-font-display); font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.3; color: var(--iw-parchment); text-wrap: pretty; } .iw-philosophy__body { max-width: 620px; margin-top: 20px; font-size: 16px; font-weight: 300; line-height: 1.7; color: rgba(var(--iw-parchment-rgb), .72); } .iw-philosophy__pillars { gap: 12px; } .iw-pillar { padding: 20px; border-radius: var(--iw-r-tile); background: rgba(var(--iw-parchment-rgb), .07); } .iw-pillar__symbol { display: block; margin-bottom: 8px; font-size: 22px; line-height: 1; color: var(--iw-amber); } .iw-pillar__label { display: block; font-size: 13px; font-weight: 600; color: var(--iw-parchment); } .iw-pillar__desc { display: block; margin-top: 3px; font-size: 11px; line-height: 1.5; color: rgba(var(--iw-parchment-rgb), .5); } /* ── Services ───────────────────────────────────────────────────────────── */ .iw-services { padding-block: var(--iw-section); } .iw-scard__inner { position: relative; display: block; height: 460px; border-radius: var(--iw-r-card); overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, .1); transition: transform .45s ease, box-shadow .45s ease; background: var(--iw-forest-dark); } .iw-scard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .6s ease; } .iw-scard__veil { position: absolute; inset: 0; background: linear-gradient( to top, rgba(var(--iw-forest-dark-rgb), .9) 0%, rgba(var(--iw-forest-dark-rgb), .32) 60%, transparent 100% ); transition: background .45s ease; } .iw-scard__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; color: var(--iw-parchment); } .iw-scard__eyebrow { margin-bottom: 8px; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--iw-amber); } .iw-scard__title { font-family: var(--iw-font-display); font-size: 26px; font-weight: 600; line-height: 1.15; margin-bottom: 0; transition: margin-bottom .4s ease; } /* 0fr → 1fr grows to whatever the content needs — six bullet points or sixteen, nothing is clipped and nothing needs a magic pixel height. */ .iw-scard__reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s ease; } .iw-scard__reveal-inner { overflow: hidden; min-height: 0; } .iw-scard__desc { margin-bottom: 12px; font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(var(--iw-parchment-rgb), .85); } .iw-scard__body .iw-bullets li { color: rgba(var(--iw-parchment-rgb), .75); font-size: 12px; } @media (hover: hover) { .iw-scard__inner:hover, .iw-scard__inner.is-open { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(0, 0, 0, .22); } .iw-scard__inner:hover .iw-scard__img, .iw-scard__inner.is-open .iw-scard__img { transform: scale(1.07); } .iw-scard__inner:hover .iw-scard__veil, .iw-scard__inner.is-open .iw-scard__veil { background: linear-gradient( to top, rgba(var(--iw-forest-dark-rgb), .96) 0%, rgba(var(--iw-forest-dark-rgb), .72) 60%, rgba(var(--iw-forest-dark-rgb), .28) 100% ); } .iw-scard__inner:hover .iw-scard__title, .iw-scard__inner.is-open .iw-scard__title { margin-bottom: 14px; } .iw-scard__inner:hover .iw-scard__reveal, .iw-scard__inner.is-open .iw-scard__reveal { grid-template-rows: 1fr; } } /* Touch devices cannot hover, so the detail is simply always shown and the card grows to fit it. */ @media (hover: none) { .iw-scard__inner { height: auto; min-height: 460px; } .iw-scard__body { position: relative; inset: auto; min-height: 460px; } /* The detail is always on show here, so the wash has to stay readable over the full height — but light enough that the photograph still reads. */ .iw-scard__veil { background: linear-gradient( to top, rgba(var(--iw-forest-dark-rgb), .93) 0%, rgba(var(--iw-forest-dark-rgb), .72) 45%, rgba(var(--iw-forest-dark-rgb), .5) 100% ); } .iw-scard__reveal { grid-template-rows: 1fr; } .iw-scard__title { margin-bottom: 14px; } } /* ── Tabs (shared by Approach, Team and Pricing) ────────────────────────── */ .iw-tabs__bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; } /* A section narrowed to a single tab has nothing to switch between, so PHP marks the bar hidden. An author `display` always beats the browser's default styling of [hidden], so it has to be turned off explicitly. */ .iw-tabs__bar[hidden] { display: none; } .iw-tabs__btn { flex: 0 0 auto; max-width: 100%; padding: 11px 26px; border: 0; border-radius: var(--iw-r-pill); background: rgba(var(--iw-forest-rgb), .08); color: var(--iw-forest); font-size: 14px; font-weight: 500; line-height: 1.3; cursor: pointer; transition: background .3s ease, color .3s ease; } .iw-tabs__btn:hover { background: rgba(var(--iw-forest-rgb), .16); } .iw-tabs__btn.is-active { background: var(--iw-forest); color: var(--iw-parchment); } .iw-tabs__panel[hidden] { display: none !important; } /* * On narrow screens the pills become a single swipeable line rather than * stacking into a tall block. * * The strip is inset with padding rather than pulled out with negative margins, * and it fades at whichever edge has more content, so it reads as swipeable * instead of looking like the design has been cut off. */ @media (max-width: 767px) { .iw-tabs__bar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 16px; margin-inline: calc(var(--iw-pad) * -1); padding-inline: var(--iw-pad); padding-bottom: 10px; margin-bottom: 26px; scrollbar-width: none; max-width: 100vw; } .iw-tabs__bar::-webkit-scrollbar { display: none; } .iw-tabs__btn { scroll-snap-align: center; white-space: nowrap; padding: 10px 18px; font-size: 13.5px; } /* Soften the edge the content runs off, so it is obvious there is more. */ .iw-tabs__bar.is-scrollable { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 34px), transparent 100%); } .iw-tabs__bar.is-scroll-start { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); } .iw-tabs__bar.is-scroll-end { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px); mask-image: linear-gradient(to right, transparent 0, #000 34px); } } /* ── Approach ───────────────────────────────────────────────────────────── */ .iw-approach { padding-block: var(--iw-section); } .iw-approach__grid { display: grid; gap: 48px; align-items: center; } @media (min-width: 1024px) { .iw-approach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .iw-approach__media { height: 460px; border-radius: var(--iw-r-card); overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, .12); } .iw-approach__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .iw-approach__content { min-width: 0; } .iw-approach__title { font-family: var(--iw-font-display); font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 600; line-height: 1.2; margin-bottom: 16px; } .iw-approach__body { margin-bottom: 24px; font-size: 16px; font-weight: 300; line-height: 1.78; color: var(--iw-muted); } .iw-approach__body p + p { margin-top: 1em; } .iw-approach__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; } .iw-approach__price { font-family: var(--iw-font-display); font-size: 18px; font-weight: 600; color: var(--iw-forest); } @media (max-width: 1023px) { .iw-approach__media { height: clamp(260px, 55vw, 420px); } } /* ── Team ───────────────────────────────────────────────────────────────── */ .iw-team { padding-block: var(--iw-section); } .iw-profile { display: grid; gap: 56px; align-items: center; } @media (min-width: 1024px) { .iw-profile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } } .iw-profile__media { position: relative; } .iw-profile__photo { height: 560px; border-radius: var(--iw-r-card); overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, .12); } .iw-profile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .iw-profile__quote { position: absolute; right: -20px; bottom: -24px; max-width: min(320px, calc(100% - 24px)); padding: 20px 24px; border-radius: var(--iw-r-tile); background: var(--iw-forest); box-shadow: 0 12px 40px rgba(var(--iw-forest-dark-rgb), .3); } .iw-profile__quote p { font-family: var(--iw-font-display); font-size: 14px; font-style: italic; line-height: 1.5; color: var(--iw-parchment); } .iw-profile__quote cite { display: block; margin-top: 10px; font-size: 11px; font-style: normal; color: var(--iw-amber); } .iw-profile__dot { position: absolute; top: -20px; left: -20px; width: 80px; height: 80px; border-radius: 50%; background: none !important; opacity: .15; } .iw-profile__content { min-width: 0; } .iw-profile__name { font-family: var(--iw-font-display); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 600; line-height: 1.1; margin-bottom: 6px; } .iw-profile__role { margin-bottom: 20px; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--iw-amber); } .iw-profile__bio { margin-bottom: 28px; font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--iw-muted); } .iw-profile__bio p + p { margin-top: 1.1em; } .iw-profile__subhead { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--iw-forest); } @media (max-width: 1023px) { /* * A portrait photograph in a short, full-width frame has to zoom enormously * to cover it, and almost all of the subject is then cropped away. Giving * the frame a portrait aspect ratio instead means the picture is shown * close to how it was taken. */ .iw-profile__photo { height: auto; aspect-ratio: 4 / 5; max-height: 560px; } .iw-profile__quote { right: 0; max-width: min(320px, 100%); } .iw-profile__dot { left: 0; } } /* Fees box */ .iw-fees { margin-bottom: 32px; padding: 24px; border-radius: var(--iw-r-tile); background: var(--iw-cream); border: 1px solid rgba(var(--iw-forest-rgb), .1); } .iw-fees__title { margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--iw-forest); } .iw-fees__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid rgba(var(--iw-forest-rgb), .07); } .iw-fees__row:last-child { border-bottom: 0; } .iw-fees__label { min-width: 0; } .iw-fees__name { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; } .iw-fees__detail { display: block; font-size: 11px; color: var(--iw-muted); } .iw-fees__price { flex-shrink: 0; font-family: var(--iw-font-display); font-size: 16px; font-weight: 600; color: var(--iw-forest); } /* Group layout */ .iw-team__banner { margin-bottom: 40px; padding: 32px; border-radius: var(--iw-r-card); background: var(--iw-forest); text-align: center; } .iw-team__banner-title { margin-bottom: 12px; font-family: var(--iw-font-display); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 600; color: var(--iw-parchment); } .iw-team__banner-text { max-width: 640px; margin-inline: auto; font-size: 15px; font-weight: 300; line-height: 1.75; color: rgba(var(--iw-parchment-rgb), .8); } .iw-member { display: flex; flex-direction: column; border-radius: var(--iw-r-card); overflow: hidden; background: var(--iw-parchment); box-shadow: 0 4px 24px rgba(0, 0, 0, .07); border: 1px solid rgba(var(--iw-forest-rgb), .05); } .iw-member__top { display: flex; align-items: stretch; gap: 0; } .iw-member__photo { flex: 0 0 140px; width: 140px; min-height: 160px; } .iw-member__photo img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; object-position: center top; } .iw-member__meta { flex: 1 1 auto; min-width: 0; padding: 20px; } .iw-member__name { font-family: var(--iw-font-display); font-size: 16px; font-weight: 600; line-height: 1.2; } .iw-member__role { margin-top: 3px; font-size: 11px; line-height: 1.4; letter-spacing: .08em; color: var(--iw-amber); } .iw-member__meta .iw-tags { margin-top: 12px; } .iw-member__bio { padding: 14px 20px 20px; border-top: 1px solid rgba(var(--iw-forest-rgb), .07); font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--iw-muted); } @media (max-width: 560px) { .iw-member__top { flex-direction: column; } /* Same reasoning as the profile photo: a 200px-tall full-width strip showed nothing but the top of a head. 4:3 keeps the face in the frame. */ .iw-member__photo { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 4 / 3; min-height: 0; } .iw-member__photo img { min-height: 0; } } .iw-team__strip { margin-top: 32px; } .iw-team__strip-item { /* A short, wide letterbox reduced these to a band across the middle of what are mostly upright photographs. A square shows far more of the picture whichever way round it was taken, and the focal-point control on each row decides which part is kept. */ aspect-ratio: 1 / 1; border-radius: var(--iw-r-tile); overflow: hidden; } .iw-team__strip-item img { width: 100%; height: 100%; object-fit: cover; } /* ── Testimonials ───────────────────────────────────────────────────────── */ .iw-quotes { background: var(--iw-forest-dark); padding-block: var(--iw-section); } .iw-quotes__box { position: relative; padding: 48px; border-radius: 28px; background: rgba(var(--iw-parchment-rgb), .06); border: 1px solid rgba(var(--iw-parchment-rgb), .1); text-align: center; } .iw-quotes__mark { display: block; font-size: 52px; font-weight: 700; line-height: 1; color: var(--iw-amber); opacity: .3; margin-bottom: -8px; } /* All slides share one grid cell, so the box is as tall as the longest quote and never resizes as it rotates. */ .iw-quotes__stack { display: grid; } .iw-quotes__item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; } .iw-quotes__item.is-active { opacity: 1; visibility: visible; } .iw-quotes__text { margin-bottom: 28px; font-family: var(--iw-font-display); font-size: clamp(1rem, 1.6vw, 1.22rem); font-style: italic; line-height: 1.75; color: rgba(var(--iw-parchment-rgb), .9); text-wrap: pretty; } .iw-quotes__name { display: block; font-size: 14px; font-weight: 600; color: var(--iw-parchment); } .iw-quotes__meta { display: block; margin-top: 3px; font-size: 12px; color: var(--iw-amber); } .iw-quotes__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; } .iw-quotes__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--iw-r-pill); background: rgba(var(--iw-parchment-rgb), .25); cursor: pointer; transition: width .3s ease, background .3s ease; } .iw-quotes__dot.is-active { width: 28px; background: var(--iw-amber); } @media (max-width: 639px) { .iw-quotes__box { padding: 32px 24px; } } /* ── Pricing ────────────────────────────────────────────────────────────── */ .iw-pricing { padding-block: var(--iw-section); } .iw-price-card { --iw-accent: var(--iw-forest); border-radius: var(--iw-r-card); overflow: hidden; background: var(--iw-parchment); box-shadow: 0 4px 32px rgba(0, 0, 0, .07); } .iw-price-card__head { padding: 28px 36px; background: var(--iw-accent); } .iw-price-card__title { font-family: var(--iw-font-display); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--iw-parchment); } .iw-price-card__sub { margin-top: 4px; font-size: 12px; color: rgba(var(--iw-parchment-rgb), .65); } .iw-price-card__body { padding: 36px; } .iw-price-list__group { margin: 28px 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--iw-amber); } .iw-price-list__group:first-child { margin-top: 0; } .iw-price-list__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid rgba(var(--iw-forest-rgb), .08); } .iw-price-list__label { min-width: 0; } .iw-price-list__name { display: block; font-size: 15px; font-weight: 500; line-height: 1.45; } .iw-price-list__detail { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--iw-muted); } .iw-price-list__price { flex-shrink: 0; font-family: var(--iw-font-display); font-size: 20px; font-weight: 600; color: var(--iw-accent); } .iw-price-tiles { margin-top: 32px; } .iw-price-tile { position: relative; /* See .iw-team__strip-item — 300x120 cropped these workshop photographs to a sliver. */ aspect-ratio: 1 / 1; border-radius: var(--iw-r-tile); overflow: hidden; } .iw-price-tile img { width: 100%; height: 100%; object-fit: cover; } .iw-price-tile__label { position: absolute; inset: auto 0 0; padding: 8px 12px; font-size: 12px; font-weight: 500; color: var(--iw-parchment); background: linear-gradient(to top, rgba(var(--iw-forest-dark-rgb), .8) 0%, transparent 100%); } .iw-price-note { margin-top: 32px; padding: 20px; border-radius: var(--iw-r-tile); background: rgba(var(--iw-forest-rgb), .05); border: 1px solid rgba(var(--iw-forest-rgb), .1); font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--iw-muted); } .iw-price-note strong { color: var(--iw-forest); font-weight: 600; } .iw-price-note p + p { margin-top: .8em; } .iw-pricing__footnote { display: flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; max-width: 100%; margin: 40px auto 0; padding: 16px 28px; border-radius: var(--iw-r-tile); background: rgba(var(--iw-forest-rgb), .07); border: 1px solid rgba(var(--iw-forest-rgb), .12); font-size: 14px; line-height: 1.6; color: var(--iw-forest); text-align: left; } .iw-pricing__footnote .iw-icon { flex-shrink: 0; } .iw-pricing__footnote strong { font-weight: 600; } @media (max-width: 639px) { .iw-price-card__head { padding: 22px 20px; } .iw-price-card__body { padding: 24px 20px; } .iw-price-list__row { gap: 14px; } } /* ── Instagram ──────────────────────────────────────────────────────────── */ .iw-ig { padding-block: var(--iw-section); } .iw-ig__handle { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--iw-forest); } .iw-ig__item { list-style: none; } .iw-ig__link { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--iw-r-tile); overflow: hidden; } .iw-ig__link img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .5s ease; } .iw-ig__hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--iw-forest-dark-rgb), .6); color: #fff; opacity: 0; transition: opacity .35s ease; } .iw-ig__link:hover img, .iw-ig__link:focus-visible img { transform: scale(1.08); } .iw-ig__link:hover .iw-ig__hover, .iw-ig__link:focus-visible .iw-ig__hover { opacity: 1; } .iw-ig__cta { margin-top: 40px; text-align: center; } /* ── FAQ ────────────────────────────────────────────────────────────────── */ .iw-faq { padding-block: var(--iw-section); } .iw-faq__list { display: flex; flex-direction: column; gap: 12px; } .iw-faq__item { border-radius: var(--iw-r-tile); overflow: hidden; background: var(--iw-parchment); border: 1px solid rgba(var(--iw-forest-rgb), .08); transition: border-color .3s ease; } .iw-faq__item.is-open { border-color: rgba(var(--iw-forest-rgb), .2); } .iw-faq__q { margin: 0; } .iw-faq__btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 28px; border: 0; background: none; text-align: left; cursor: pointer; } .iw-faq__label { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--iw-ink); min-width: 0; } .iw-faq__sign { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--iw-forest-rgb), .08); color: var(--iw-forest); font-size: 18px; line-height: 1; transition: background .3s ease, color .3s ease, transform .3s ease; } .iw-faq__item.is-open .iw-faq__sign { background: var(--iw-forest); color: var(--iw-parchment); transform: rotate(45deg); } /* Same 0fr → 1fr technique: any answer length animates and none is clipped. */ .iw-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; } .iw-faq__item.is-open .iw-faq__a { grid-template-rows: 1fr; } .iw-faq__a-inner { overflow: hidden; min-height: 0; font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--iw-muted); } .iw-faq__a-inner p { padding: 0 28px 24px; } .iw-faq__a-inner p + p { padding-top: 0; margin-top: -10px; } @media (max-width: 639px) { .iw-faq__btn { padding: 16px 18px; } .iw-faq__a-inner p { padding: 0 18px 18px; } } /* ── Community programmes ───────────────────────────────────────────────── */ .iw-community { padding-block: var(--iw-section); } .iw-prog { display: flex; flex-direction: column; border-radius: var(--iw-r-card); overflow: hidden; background: var(--iw-parchment); border: 1px solid rgba(var(--iw-forest-rgb), .08); box-shadow: 0 4px 24px rgba(0, 0, 0, .06); transition: transform .35s ease, box-shadow .35s ease; } .iw-prog:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 0, 0, .12); } .iw-prog__media { height: 190px; overflow: hidden; } .iw-prog__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .iw-prog__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 26px 26px 0; border-radius: 50%; background: rgba(var(--iw-amber-rgb), .14); border: 1px solid rgba(var(--iw-amber-rgb), .3); color: var(--iw-amber); } .iw-prog__body { padding: 22px 26px 26px; } .iw-prog__title { font-family: var(--iw-font-display); font-size: 20px; font-weight: 600; line-height: 1.25; margin-bottom: 8px; } .iw-prog__desc { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--iw-muted); } .iw-community__panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; margin-top: 48px; padding: 36px 40px; border-radius: var(--iw-r-card); background: var(--iw-forest); } .iw-community__panel-text { flex: 1 1 420px; min-width: 0; } .iw-community__panel-title { font-family: var(--iw-font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.2; color: var(--iw-parchment); text-wrap: balance; } .iw-community__panel-body { margin-top: 12px; font-size: 15.5px; font-weight: 300; line-height: 1.75; color: rgba(var(--iw-parchment-rgb), .8); } .iw-community__panel .iw-btns { flex-shrink: 0; } @media (max-width: 639px) { .iw-community__panel { padding: 26px 22px; } } /* ── Enquiry form ───────────────────────────────────────────────────────── */ .iw-form-sec { padding-block: var(--iw-section); } .iw-form-sec__grid { display: grid; gap: 28px; align-items: start; } @media (min-width: 900px) { .iw-form-sec__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 36px; } } .iw-form-card { padding: 36px; border-radius: var(--iw-r-card); background: var(--iw-parchment); border: 1px solid rgba(var(--iw-forest-rgb), .1); box-shadow: 0 8px 40px rgba(0, 0, 0, .07); } .iw-form__row { display: flex; flex-wrap: wrap; gap: 0 20px; } .iw-form__row > .iw-form__field { flex: 1 1 240px; min-width: min(100%, 240px); } .iw-form__field { margin-bottom: 20px; } .iw-form__label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--iw-forest); } .iw-form__req { margin-left: 3px; color: var(--iw-amber); } .iw-form__input { width: 100%; max-width: 100%; padding: 13px 16px; font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--iw-ink); background: #fff; border: 1.5px solid rgba(var(--iw-forest-rgb), .18); border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; } .iw-form__input::placeholder { color: #b3aca4; } .iw-form__input:focus { outline: none; border-color: var(--iw-forest); box-shadow: 0 0 0 3px rgba(var(--iw-forest-rgb), .12); } .iw-form__input.has-error { border-color: #b3453a; background: #fdf7f6; } .iw-form__textarea { resize: vertical; min-height: 150px; } .iw-form__select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232d5a4e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 42px; cursor: pointer; } .iw-form__fieldset { margin: 0 0 20px; padding: 0; border: 0; } .iw-form__choices { display: flex; flex-wrap: wrap; gap: 10px; } .iw-form__choice { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: var(--iw-r-pill); border: 1.5px solid rgba(var(--iw-forest-rgb), .18); background: #fff; font-size: 14px; cursor: pointer; transition: border-color .2s ease, background .2s ease; } .iw-form__choice:hover { border-color: rgba(var(--iw-forest-rgb), .4); } .iw-form__choice input { accent-color: var(--iw-forest); margin: 0; } .iw-form__choice:has(input:checked) { border-color: var(--iw-forest); background: rgba(var(--iw-forest-rgb), .06); } .iw-form__consent { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.65; color: var(--iw-muted); cursor: pointer; } .iw-form__consent input { flex-shrink: 0; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--iw-forest); } .iw-form__consent p { margin: 0; } .iw-form__consent a { color: var(--iw-forest); text-decoration: underline; text-underline-offset: 2px; } .iw-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(var(--iw-forest-rgb), .1); } .iw-form__note { flex: 1 1 220px; font-size: 12.5px; line-height: 1.6; color: var(--iw-muted); } .iw-form__err { margin-top: 6px; font-size: 13px; color: #b3453a; } .iw-form__alert { margin-bottom: 24px; padding: 14px 18px; border-radius: 12px; background: #fdf1ef; border: 1px solid #e8c4bd; font-size: 14px; line-height: 1.6; color: #8f3529; } /* The honeypot must be unreachable but not display:none, which some bots skip. */ .iw-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .iw-form__success { display: flex; align-items: flex-start; gap: 16px; padding: 8px 0; font-size: 16px; line-height: 1.75; color: var(--iw-ink); } .iw-form__success-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--iw-forest-rgb), .1); color: var(--iw-forest); } .iw-form__success p { margin-bottom: .7em; } .iw-form__success p:last-child { margin-bottom: 0; } .iw-form__success strong { color: var(--iw-forest); } /* Side panel */ .iw-form-aside { padding: 32px 30px; border-radius: var(--iw-r-card); background: var(--iw-forest); color: rgba(var(--iw-parchment-rgb), .82); } .iw-form-aside__title { font-family: var(--iw-font-display); font-size: 21px; font-weight: 600; color: var(--iw-parchment); margin-bottom: 10px; } .iw-form-aside__body { font-size: 14.5px; font-weight: 300; line-height: 1.75; margin-bottom: 22px; } .iw-form-aside__list { display: flex; flex-direction: column; gap: 18px; } .iw-form-aside__item { display: flex; align-items: flex-start; gap: 14px; font-size: 14px; line-height: 1.6; } .iw-form-aside__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--iw-parchment-rgb), .1); color: var(--iw-amber); } .iw-form-aside__item strong { display: block; font-weight: 600; color: var(--iw-parchment); } .iw-form-aside__item em { display: block; margin-top: 2px; font-style: normal; font-size: 13px; color: rgba(var(--iw-parchment-rgb), .6); } @media (max-width: 639px) { .iw-form-card { padding: 24px 20px; } .iw-form-aside { padding: 26px 22px; } } /* ── Closing CTA ────────────────────────────────────────────────────────── */ .iw-cta { position: relative; overflow: hidden; background: var(--iw-forest-dark); padding-block: var(--iw-section); isolation: isolate; } .iw-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .1; z-index: -2; } .iw-cta__wash { position: absolute; inset: 0; z-index: -1; background: rgba(var(--iw-forest-dark-rgb), .9); } .iw-cta__inner { position: relative; text-align: center; } .iw-cta .iw-head { margin-bottom: 40px; } .iw-cta__contacts { margin-top: 64px; padding-top: 48px; border-top: 1px solid rgba(var(--iw-parchment-rgb), .1); } .iw-cta__contact { text-align: center; } .iw-cta__contact-icon { display: inline-flex; margin-bottom: 10px; color: var(--iw-amber); } .iw-cta__contact-label { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--iw-amber); } .iw-cta__contact-value { display: block; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(var(--iw-parchment-rgb), .7); } .iw-cta__contact-value a:hover { color: var(--iw-parchment); text-decoration: underline; } /* ── Gallery ────────────────────────────────────────────────────────────── */ .iw-gallery { padding-block: var(--iw-section); } .iw-gallery__item { list-style: none; } /* One item can be promoted to double width to break up the grid. */ .iw-gallery__item--wide { flex-basis: calc(var(--iw-basis, 320px) * 2); } .iw-gallery__figure { position: relative; height: 100%; border-radius: var(--iw-r-tile); overflow: hidden; background: rgba(var(--iw-forest-rgb), .06); box-shadow: 0 6px 24px rgba(0, 0, 0, .08); } .iw-gallery__figure img, .iw-gallery__video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--iw-forest-dark); } /* Clips filmed on a phone are portrait, and cropping one to a landscape frame takes the dancers' heads and feet off. Fit the whole frame instead and let the dark backing show at the sides — the client can upload any shape and it will always be shown in full. */ .iw-gallery__video { object-fit: contain; } .iw-gallery__badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--iw-r-pill); background: rgba(var(--iw-forest-dark-rgb), .82); color: var(--iw-parchment); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; } .iw-gallery__caption { padding: 12px 14px 14px; font-size: 13px; line-height: 1.5; color: var(--iw-muted); background: var(--iw-parchment); } .iw-bg--cream .iw-gallery__caption { background: var(--iw-cream); } /* ── Mood Moved series ──────────────────────────────────────────────────── */ .iw-mm { padding-block: var(--iw-section); } .iw-mm__logo { display: flex; justify-content: center; margin-bottom: 24px; } .iw-mm__logo img { width: 132px; height: auto; } .iw-mm__list { display: flex; flex-direction: column; gap: 72px; } .iw-mm__row { display: grid; gap: 40px; align-items: center; } @media (min-width: 900px) { .iw-mm__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } /* Alternate which side the picture sits on, without reordering the DOM for screen readers. */ .iw-mm__row--flip .iw-mm__media { order: 2; } } .iw-mm__media { border-radius: var(--iw-r-card); overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, .12); background: var(--iw-forest-dark); } .iw-mm__media img, .iw-mm__video { display: block; width: 100%; /* Every workshop photograph is portrait — between 0.44 and 0.76 wide-to-tall — so the old 4:3 landscape frame cropped a third of each one away, taking heads and feet with it. An upright frame matches the pictures, and "contain" guarantees the whole photograph is visible whatever shape the client uploads next. The dark green behind is the section's own colour, so a narrower picture reads as a deliberate mount rather than a gap. */ aspect-ratio: 3 / 4; max-height: 660px; object-fit: contain; } /* See the note on .iw-gallery__video — portrait clips are shown whole. The taller frame stops a phone-shaped video being squeezed into a letterbox. */ .iw-mm__video { aspect-ratio: 1 / 1; object-fit: contain; background: var(--iw-forest-dark); } .iw-mm__content { min-width: 0; } .iw-mm__num { display: inline-block; margin-bottom: 10px; font-family: var(--iw-font-display); font-size: 13px; font-weight: 600; letter-spacing: .18em; color: var(--iw-amber); } .iw-mm__title { font-family: var(--iw-font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.2; margin-bottom: 10px; text-wrap: balance; } .iw-mm__who { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--iw-forest); } .iw-mm__who .iw-icon { color: var(--iw-amber); } .iw-mm__meta { margin-bottom: 16px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--iw-muted); } .iw-mm__desc { margin-bottom: 20px; font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--iw-muted); } .iw-mm__desc p + p { margin-top: .9em; } .iw-mm__foot { display: grid; gap: 32px; margin-top: 72px; padding: 36px; border-radius: var(--iw-r-card); background: rgba(var(--iw-forest-rgb), .05); border: 1px solid rgba(var(--iw-forest-rgb), .1); } @media (min-width: 900px) { .iw-mm__foot { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } } .iw-mm__foot-title { margin-bottom: 16px; font-family: var(--iw-font-display); font-size: 1.25rem; font-weight: 600; } .iw-mm__note { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--iw-muted); } .iw-mm__note strong { color: var(--iw-forest); font-weight: 600; } @media (max-width: 767px) { .iw-mm__list { gap: 52px; } .iw-mm__foot { padding: 24px 20px; margin-top: 52px; } } /* ── Practitioner link-out ──────────────────────────────────────────────── */ .iw-member__link { margin-top: 24px; font-size: 13px; font-weight: 500; } .iw-member__link a { color: var(--iw-forest); text-decoration: underline; text-underline-offset: 3px; } .iw-member__link a:hover { color: var(--iw-amber); } /* ── Footer ─────────────────────────────────────────────────────────────── */ .iw-footer { background: var(--iw-ink); color: rgba(var(--iw-parchment-rgb), .5); padding-block: 64px 40px; } .iw-footer__top { display: grid; gap: 48px; padding-bottom: 48px; margin-bottom: 40px; border-bottom: 1px solid rgba(var(--iw-parchment-rgb), .08); } @media (min-width: 1024px) { .iw-footer__top { grid-template-columns: 260px minmax(0, 1fr); gap: 64px; } } .iw-footer__logo { /* Set on the Footer screen, independently of the header. */ height: var(--iw-logo-h-footer, 64px); width: auto; max-width: 260px; object-fit: contain; margin-bottom: 20px; opacity: .9; } /* Same opt-in rule as the header — see the note there. */ .iw-footer__logo--invert { filter: brightness(0) invert(1); opacity: .85; } .iw-footer__name { display: block; margin-bottom: 16px; font-family: var(--iw-font-display); font-size: 20px; font-weight: 600; color: var(--iw-parchment); } .iw-footer__desc { margin-bottom: 20px; font-size: 13px; font-weight: 300; line-height: 1.75; } .iw-footer__socials { display: flex; flex-wrap: wrap; gap: 12px; } .iw-footer__social { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--iw-parchment-rgb), .06); color: rgba(var(--iw-parchment-rgb), .55); transition: background .2s ease, color .2s ease; } .iw-footer__social:hover { background: rgba(var(--iw-amber-rgb), .2); color: var(--iw-amber); } .iw-footer__columns { justify-content: flex-start; --iw-gap: 32px; } .iw-footer__col-title { margin-bottom: 16px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--iw-amber); } .iw-footer__list { display: flex; flex-direction: column; gap: 12px; } .iw-footer__list a { font-size: 13px; line-height: 1.5; transition: color .2s ease; } .iw-footer__list a:hover { color: var(--iw-parchment); } /* Accreditation & membership logos. They arrive as mixed artwork — some on white, some transparent — so each sits on its own light plaque to look deliberate rather than pasted on. */ .iw-footer__badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 0 0 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(var(--iw-parchment-rgb), .08); } .iw-footer__badge { display: flex; align-items: center; justify-content: center; height: 62px; padding: 10px 18px; border-radius: 12px; background: rgba(var(--iw-parchment-rgb), .94); } .iw-footer__badge img { max-height: 42px; width: auto; object-fit: contain; } .iw-footer__badge a { display: flex; } @media (max-width: 639px) { .iw-footer__badges { gap: 10px; } .iw-footer__badge { height: 52px; padding: 8px 12px; } .iw-footer__badge img { max-height: 34px; } } .iw-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .iw-footer__copy { font-size: 12px; font-weight: 300; color: rgba(var(--iw-parchment-rgb), .35); } .iw-footer__legal { display: flex; flex-wrap: wrap; gap: 24px; } .iw-footer__legal a { font-size: 11px; color: rgba(var(--iw-parchment-rgb), .3); transition: color .2s ease; } .iw-footer__legal a:hover { color: rgba(var(--iw-parchment-rgb), .6); } /* ── Interior pages ─────────────────────────────────────────────────────── */ .iw-page { background: var(--iw-parchment); } /* No header band, so leave room for the fixed nav. */ .iw-page:not(.iw-page--hero) { padding-top: 160px; } .iw-page__head { margin-bottom: 40px; } .iw-page__media { margin-bottom: 40px; border-radius: var(--iw-r-card); overflow: hidden; } /* ── Page header band ───────────────────────────────────────────────────── */ .iw-phero { position: relative; overflow: hidden; background: var(--iw-forest-dark); isolation: isolate; } .iw-phero--compact .iw-phero__inner { padding-block: 168px 72px; } .iw-phero--tall .iw-phero__inner { padding-block: 200px 116px; } .iw-phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: var(--iw-phero-opacity, .4); z-index: -2; } /* * Two washes, not one. * * The diagonal wash alone left the top-right corner light, so a bright * photograph bled through directly under the fixed header and the band looked * washed out before it reached the green. The vertical layer guarantees the * strip behind the header is always dark. */ .iw-phero__wash { position: absolute; inset: 0; z-index: -1; background: linear-gradient( to bottom, rgba(var(--iw-forest-dark-rgb), .92) 0%, rgba(var(--iw-forest-dark-rgb), .55) 42%, rgba(var(--iw-forest-dark-rgb), .35) 100% ), linear-gradient( 105deg, rgba(var(--iw-forest-dark-rgb), .92) 0%, rgba(var(--iw-forest-dark-rgb), .80) 45%, rgba(var(--iw-forest-dark-rgb), .55) 100% ); } .iw-phero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 85% 20%, rgba(var(--iw-amber-rgb), .16) 0%, transparent 60%); } .iw-phero__inner { position: relative; max-width: 900px; text-align: center; } .iw-phero__crumbs { margin-bottom: 18px; font-size: 12px; color: rgba(var(--iw-parchment-rgb), .55); } .iw-phero__crumbs a { color: var(--iw-amber); } .iw-phero__crumbs a:hover { text-decoration: underline; } .iw-eyebrow--on-dark { color: var(--iw-amber); } .iw-phero__title { font-family: var(--iw-font-display); font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 600; line-height: 1.12; color: var(--iw-parchment); text-wrap: balance; } .iw-phero__intro { max-width: 620px; margin: 18px auto 0; font-size: 17px; font-weight: 300; line-height: 1.75; color: rgba(var(--iw-parchment-rgb), .78); } .iw-phero__intro p + p { margin-top: 1em; } .iw-phero .iw-btns { justify-content: center; margin-top: 32px; } @media (max-width: 767px) { .iw-phero--compact .iw-phero__inner { padding-block: 128px 56px; } .iw-phero--tall .iw-phero__inner { padding-block: 140px 72px; } } /* ── Page content ───────────────────────────────────────────────────────── */ /* A full-bleed grid: written content sits in a readable centre column while any section dropped in by shortcode spans the entire width. */ .iw-page__content { display: grid; grid-template-columns: [full-start] 1fr [main-start] min(896px, 100% - (var(--iw-pad) * 2)) [main-end] 1fr [full-end]; padding-block: var(--iw-section); } .iw-page__content > * { grid-column: main; } .iw-page__content > section, .iw-page__content > .alignfull, .iw-page__content > .wp-block-cover { grid-column: full; } .iw-page__content > .alignwide { grid-column: full; width: min(1180px, 100% - (var(--iw-pad) * 2)); margin-inline: auto; } /* A section rendered inside the content brings its own padding. */ .iw-page__content > section:first-child { margin-top: calc(var(--iw-section) * -1); } .iw-page__content > section:last-child { margin-bottom: calc(var(--iw-section) * -1); } .iw-prose { font-size: 16px; font-weight: 300; line-height: 1.8; color: #3b3b38; } .iw-prose > * + * { margin-top: 1.2em; } .iw-prose h2, .iw-prose h3, .iw-prose h4 { font-family: var(--iw-font-display); font-weight: 600; line-height: 1.25; color: var(--iw-ink); margin-top: 1.8em; } .iw-prose h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); } .iw-prose h3 { font-size: 1.3rem; } .iw-prose a { color: var(--iw-forest); text-decoration: underline; text-underline-offset: 3px; } .iw-prose ul, .iw-prose ol { padding-left: 1.4em; } .iw-prose ul { list-style: disc; } .iw-prose ol { list-style: decimal; } .iw-prose li + li { margin-top: .5em; } .iw-prose blockquote { padding: 4px 0 4px 24px; border-left: 3px solid var(--iw-amber); font-family: var(--iw-font-display); font-style: italic; color: var(--iw-forest); } .iw-prose img, .iw-prose figure { border-radius: var(--iw-r-tile); overflow: hidden; } .iw-prose :where(table) { width: 100%; border-collapse: collapse; } .iw-prose :where(th, td) { padding: 10px 12px; border: 1px solid rgba(var(--iw-forest-rgb), .12); } .iw-post { display: flex; flex-direction: column; border-radius: var(--iw-r-card); overflow: hidden; background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, .06); } .iw-post__media { display: block; aspect-ratio: 16 / 10; } .iw-post__media img { width: 100%; height: 100%; object-fit: cover; } .iw-post__body { padding: 22px; } .iw-post__date { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--iw-amber); } .iw-post__title { margin: 8px 0 10px; font-family: var(--iw-font-display); font-size: 20px; font-weight: 600; line-height: 1.25; } .iw-post__excerpt { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--iw-muted); } .iw-posts { justify-content: flex-start; } .pagination, .iw-pagelinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; } .pagination .page-numbers, .iw-pagelinks a, .iw-pagelinks > span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--iw-r-pill); background: rgba(var(--iw-forest-rgb), .08); color: var(--iw-forest); font-size: 14px; } .pagination .page-numbers.current, .iw-pagelinks > span { background: var(--iw-forest); color: var(--iw-parchment); } .iw-empty { text-align: center; color: var(--iw-muted); } .iw-comments { padding-bottom: var(--iw-section); } /* ── Responsive scale ───────────────────────────────────────────────────── */ @media (max-width: 767px) { :root { --iw-section: 64px; } .iw-head { margin-bottom: 36px; } .iw-tabs__bar { margin-bottom: 28px; } .iw-price-card__body { padding-inline: 20px; } .iw-team__banner { padding: 24px 20px; } .iw-cta__contacts { margin-top: 44px; padding-top: 32px; } .iw-footer { padding-block: 48px 32px; } /* Top spacing only, and only when there is no header band to sit under. Adding padding-bottom here left a strip of page background between the last section and the footer. */ .iw-page:not(.iw-page--hero) { padding-top: 120px; } .iw-btn { padding: 13px 26px; font-size: 14px; } /* A logo sized for a desktop header would take a third of a phone screen before the visitor had read a word, so it is capped here. Anything the client sets below the cap still applies exactly as they set it. */ .iw-nav__logo { height: min(var(--iw-logo-h), 56px); } .iw-footer__logo { height: min(var(--iw-logo-h-footer), 56px); } } @media (max-width: 400px) { .iw-scard__body { padding: 20px; } .iw-quotes__box { padding: 24px 18px; } } /* ── Print ──────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ BOOKING Four steps on one page. Nothing here fixes a column count — the practitioner cards, the reassurance list and the time slots all reflow, so adding a third practitioner or a tenth session needs no CSS change. ═══════════════════════════════════════════════════════════════════════════ */ /* The band itself, matching every other section on the site. */ .iw-booking { padding-block: var(--iw-section); } .iw-bk { max-width: 900px; margin-inline: auto; } /* ── Progress rail ────────────────────────────────────────────────────────── */ .iw-bk__steps { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 28px; padding: 0; list-style: none; } .iw-bk__step { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: rgba(var(--iw-ink-rgb), .45); transition: color .2s ease; } .iw-bk__step-n { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: rgba(var(--iw-ink-rgb), .08); font-size: .78rem; font-weight: 600; transition: background .2s ease, color .2s ease; } .iw-bk__step.is-current { color: var(--iw-ink); font-weight: 600; } .iw-bk__step.is-current .iw-bk__step-n { background: var(--iw-forest); color: #fff; } .iw-bk__step.is-done { color: rgba(var(--iw-ink-rgb), .7); } .iw-bk__step.is-done .iw-bk__step-n { background: var(--iw-amber); color: #fff; } @media (max-width: 640px) { .iw-bk__step-t { display: none; } .iw-bk__step.is-current .iw-bk__step-t { display: inline; } } /* ── Panels ───────────────────────────────────────────────────────────────── */ .iw-bk__panel[hidden] { display: none; } .iw-bk__title { margin: 0 0 6px; font-family: var(--iw-font-display); font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.25; } .iw-bk__title:focus { outline: none; } /* The 6px above is meant for the "with Jade Taussig" line that follows the heading on most steps. Where a step has no such line the heading would otherwise sit right on top of its content, so give those blocks their own breathing room. */ .iw-bk__title + .iw-bk__people, .iw-bk__title + .iw-bk__recap, .iw-bk__title + .iw-bk__free-note, .iw-bk__title + p { margin-top: 22px; } .iw-bk__with, .iw-bk__summary { margin: 0 0 20px; color: rgba(var(--iw-ink-rgb), .62); font-size: .95rem; } .iw-bk__back { margin-bottom: 12px; padding: 0; border: 0; background: none; color: rgba(var(--iw-ink-rgb), .6); font: inherit; font-size: .85rem; cursor: pointer; } .iw-bk__back:hover { color: var(--iw-forest); } .iw-bk__alert { margin-bottom: 18px; padding: 12px 16px; border-radius: var(--iw-r-tile); background: rgba(190, 70, 50, .09); color: #8c2f20; font-size: .9rem; } .iw-bk__alert[hidden] { display: none; } /* ── Step 1 · practitioners ───────────────────────────────────────────────── */ .iw-bk__people { padding: 0; margin: 0; list-style: none; } .iw-bk__person { display: flex; } .iw-bk__person-btn { display: flex; flex-direction: column; width: 100%; padding: 0 0 20px; border: 1px solid rgba(var(--iw-ink-rgb), .1); border-radius: var(--iw-r-card); background: #fff; text-align: left; font: inherit; cursor: pointer; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .iw-bk__person-btn:hover, .iw-bk__person-btn:focus-visible { border-color: var(--iw-forest); box-shadow: 0 14px 36px rgba(0, 0, 0, .1); transform: translateY(-2px); } .iw-bk__person-photo { display: block; } .iw-bk__person-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .iw-bk__person-body { display: block; padding: 18px 20px 0; } .iw-bk__person-name { display: block; font-family: var(--iw-font-display); font-size: 1.15rem; color: var(--iw-ink); } .iw-bk__person-role { display: block; margin-top: 2px; color: var(--iw-amber); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; } .iw-bk__person-blurb { display: block; margin-top: 10px; color: rgba(var(--iw-ink-rgb), .66); font-size: .9rem; line-height: 1.55; } .iw-bk__person-pay { display: inline-block; margin-top: 14px; padding: 4px 12px; border-radius: 999px; background: rgba(var(--iw-forest-rgb), .09); color: var(--iw-forest); font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; } /* ── Step 2 · sessions ────────────────────────────────────────────────────── */ .iw-bk__services { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .iw-bk__services[hidden] { display: none; } .iw-bk__service { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 20px; border: 1px solid rgba(var(--iw-ink-rgb), .1); border-radius: var(--iw-r-tile); background: #fff; text-align: left; font: inherit; cursor: pointer; transition: border-color .2s ease, background .2s ease; } .iw-bk__service:hover, .iw-bk__service:focus-visible { border-color: var(--iw-forest); background: rgba(var(--iw-forest-rgb), .03); } .iw-bk__service--free { border-style: dashed; border-color: rgba(var(--iw-amber-rgb), .6); } .iw-bk__service-main { min-width: 0; } .iw-bk__service-name { display: block; font-weight: 600; color: var(--iw-ink); } .iw-bk__service-meta { display: block; margin-top: 3px; color: rgba(var(--iw-ink-rgb), .55); font-size: .85rem; } .iw-bk__service-price { flex: none; font-family: var(--iw-font-display); font-size: 1.15rem; color: var(--iw-forest); } /* ── The free-call hand-off ───────────────────────────────────────────────── */ .iw-bk__free, .iw-bk__done { padding: 32px 28px; border-radius: var(--iw-r-card); background: #fff; border: 1px solid rgba(var(--iw-ink-rgb), .08); text-align: center; } .iw-bk__free-icon, .iw-bk__done-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: rgba(var(--iw-forest-rgb), .1); color: var(--iw-forest); } .iw-bk__free-note { margin-bottom: 22px; color: rgba(var(--iw-ink-rgb), .7); } .iw-bk__free .iw-bk__with { margin-bottom: 14px; } /* ── Step 3 · calendar ────────────────────────────────────────────────────── */ .iw-bk__cal { /* A month is only seven columns wide — left to fill the content column the cells become enormous. Capped so it reads as a date picker. */ max-width: 520px; margin-inline: auto; padding: 20px; border: 1px solid rgba(var(--iw-ink-rgb), .1); border-radius: var(--iw-r-card); background: #fff; } .iw-bk__cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .iw-bk__month { font-family: var(--iw-font-display); font-size: 1.1rem; } .iw-bk__nav { width: 36px; height: 36px; border: 1px solid rgba(var(--iw-ink-rgb), .12); border-radius: 50%; background: #fff; font: inherit; cursor: pointer; transition: border-color .2s ease, color .2s ease; } .iw-bk__nav:hover { border-color: var(--iw-forest); color: var(--iw-forest); } .iw-bk__dow, .iw-bk__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .iw-bk__dow { margin-bottom: 6px; color: rgba(var(--iw-ink-rgb), .4); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; text-align: center; } .iw-bk__day { display: grid; place-items: center; aspect-ratio: 1; min-height: 40px; padding: 0; border: 1px solid transparent; border-radius: var(--iw-r-tile); background: none; font: inherit; font-size: .9rem; color: rgba(var(--iw-ink-rgb), .25); } .iw-bk__day--pad { visibility: hidden; } .iw-bk__day.is-free { border-color: rgba(var(--iw-forest-rgb), .28); background: rgba(var(--iw-forest-rgb), .06); color: var(--iw-forest); font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; } .iw-bk__day.is-free:hover { background: rgba(var(--iw-forest-rgb), .16); } .iw-bk__day.is-chosen { background: var(--iw-forest); color: #fff; border-color: var(--iw-forest); } .iw-bk__empty { margin: 14px 0 0; color: rgba(var(--iw-ink-rgb), .55); font-size: .88rem; text-align: center; } .iw-bk__times { max-width: 520px; margin: 22px auto 0; } .iw-bk__times[hidden] { display: none; } .iw-bk__times-title { margin: 0 0 12px; font-family: var(--iw-font-display); font-size: 1.05rem; } .iw-bk__slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .iw-bk__slot { padding: 9px 16px; border: 1px solid rgba(var(--iw-forest-rgb), .3); border-radius: 999px; background: #fff; color: var(--iw-forest); font: inherit; font-size: .9rem; cursor: pointer; transition: background .15s ease, color .15s ease; } .iw-bk__slot:hover { background: rgba(var(--iw-forest-rgb), .1); } .iw-bk__slot.is-chosen { background: var(--iw-forest); color: #fff; } /* ── Step 4 · details ─────────────────────────────────────────────────────── */ .iw-bk__recap { display: grid; gap: 8px; margin-bottom: 24px; padding: 18px 20px; border-radius: var(--iw-r-tile); background: rgba(var(--iw-forest-rgb), .05); } .iw-bk__recap > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .92rem; } .iw-bk__recap span { color: rgba(var(--iw-ink-rgb), .6); } .iw-bk__recap strong { color: var(--iw-ink); text-align: right; } .iw-bk__form { display: grid; gap: 18px; } .iw-bk__submit { justify-self: start; } .iw-bk__submit.is-busy { opacity: .6; pointer-events: none; } .iw-bk__smallprint { margin: 0; color: rgba(var(--iw-ink-rgb), .5); font-size: .82rem; } .iw-bk__ref { margin: 6px 0 18px; font-family: var(--iw-font-display); font-size: 1.05rem; color: var(--iw-forest); } /* ── Reassurance ──────────────────────────────────────────────────────────── */ .iw-bk__reassure { margin: 32px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(var(--iw-ink-rgb), .08); list-style: none; } .iw-bk__reassure li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.5; } .iw-bk__reassure strong { display: block; color: var(--iw-ink); } .iw-bk__reassure span span { color: rgba(var(--iw-ink-rgb), .6); } .iw-bk__reassure-icon { flex: none; color: var(--iw-amber); margin-top: 1px; } @media (prefers-reduced-motion: reduce) { .iw-bk__person-btn { transition: none; } .iw-bk__person-btn:hover { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════ SERVICE DETAIL PANELS Each card opens a panel of fuller detail beneath the grid, rather than stretching its own card out of line with the others. ═══════════════════════════════════════════════════════════════════════════ */ .iw-scard--opens .iw-scard__inner { cursor: pointer; } .iw-scard--opens .iw-scard__inner:focus-visible { outline: 3px solid var(--iw-amber); outline-offset: 3px; } .iw-scard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--iw-amber); font-size: .82rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; } .iw-scard__more::after { content: "→"; transition: transform .2s ease; } .iw-scard--opens .iw-scard__inner:hover .iw-scard__more::after { transform: translateX(3px); } .iw-scard--opens.is-open .iw-scard__inner, .iw-scard__inner.is-open { box-shadow: 0 0 0 2px var(--iw-amber); } .iw-service-detail { margin-top: 28px; border-radius: var(--iw-r-card); background: #fff; border: 1px solid rgba(var(--iw-ink-rgb), .08); box-shadow: 0 14px 44px rgba(0, 0, 0, .07); } .iw-service-detail[hidden] { display: none; } .iw-service-detail__inner { padding: clamp(24px, 4vw, 44px); } .iw-service-detail__title { margin: 0 0 18px; font-family: var(--iw-font-display); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; color: var(--iw-ink); } .iw-service-detail__body { max-width: 70ch; color: rgba(var(--iw-ink-rgb), .78); line-height: 1.7; } .iw-service-detail__body p { margin: 0 0 1em; } .iw-service-detail__body p:last-child { margin-bottom: 0; } .iw-service-detail__body ul { margin: 0 0 1.2em; padding-left: 1.1em; display: grid; gap: 6px; } @media (min-width: 700px) { .iw-service-detail__body ul { grid-template-columns: 1fr 1fr; column-gap: 28px; } } .iw-service-detail__body li { list-style: disc; } .iw-service-detail .iw-btn { margin-top: 8px; } .iw-service-detail__close { display: block; margin-top: 18px; padding: 0; border: 0; background: none; color: rgba(var(--iw-ink-rgb), .55); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; } .iw-service-detail__close:hover { color: var(--iw-forest); } /* ═══════════════════════════════════════════════════════════════════════════ TEAM — stacked profiles, and photographs all the same shape ═══════════════════════════════════════════════════════════════════════════ */ /* Without tabs, every panel shows and they simply follow one another. */ .iw-tabs--stack .iw-tabs__panel { display: block; opacity: 1; transform: none; } .iw-tabs--stack .iw-tabs__panel + .iw-tabs__panel { margin-top: clamp(48px, 7vw, 96px); } /* The member photographs were each a different height because the pictures are. A fixed portrait frame makes the row read evenly, and the focal point on each row decides what is kept — which is what stopped Cara's chin being cropped on a phone. */ .iw-member__photo { aspect-ratio: 3 / 4; width: 100%; max-width: 190px; flex: none; border-radius: var(--iw-r-tile); overflow: hidden; } .iw-member__photo img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 700px) { /* On a phone the card stacks, so the photograph goes full width and a gentler ratio keeps whole faces in frame. */ .iw-member__photo { max-width: none; aspect-ratio: 3 / 3; } } .iw-profile__link { margin: 14px 0 0; font-size: .92rem; } .iw-profile__link a { color: var(--iw-forest); text-decoration: underline; text-underline-offset: 3px; } .iw-profile__link a:hover { color: var(--iw-amber); } /* ═══════════════════════════════════════════════════════════════════════════ MOOD MOVED — bullet headings, the closing block and further reading ═══════════════════════════════════════════════════════════════════════════ */ .iw-mm__points-title, .iw-mm__suitable-intro { margin: 18px 0 10px; font-size: .95rem; font-weight: 600; color: var(--iw-ink); } .iw-mm__suitable-intro { font-weight: 400; color: rgba(var(--iw-ink-rgb), .7); } .iw-mm__link { margin: 14px 0 0; font-size: .92rem; } .iw-mm__link a { color: var(--iw-forest); text-decoration: underline; text-underline-offset: 3px; } .iw-mm__link a:hover { color: var(--iw-amber); } .iw-mm__further { margin: 18px 0 0; font-size: .95rem; } .iw-mm__further a { color: var(--iw-forest); text-decoration: underline; text-underline-offset: 3px; } .iw-mm__further a:hover { color: var(--iw-amber); } /* ═══════════════════════════════════════════════════════════════════════════ COMMUNITY — the two lists that replaced the programme cards ═══════════════════════════════════════════════════════════════════════════ */ .iw-prog__desc ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; } .iw-prog__desc li { list-style: disc; } /* ═══════════════════════════════════════════════════════════════════════════ "VIEW MORE" — long copy, shown in proportion The new profile and workshop copy is several times longer than what the design was drawn around, which left tall columns of text beside a small photograph. Long passages are clamped to a readable opening and expand on request, so the first impression stays balanced. ═══════════════════════════════════════════════════════════════════════════ */ .iw-expand { position: relative; overflow: hidden; max-height: var(--iw-expand-max, 320px); transition: max-height .35s ease; } /* Until the script has measured it, nothing is clamped — so with JavaScript off every word is readable. */ .iw-expand:not(.is-clamped) { max-height: none; } .iw-expand.is-open { max-height: var(--iw-expand-full, none); } /* The fade only belongs on a panel that is actually cut short. */ .iw-expand.is-clamped:not(.is-open)::after { content: ""; position: absolute; inset: auto 0 0; height: 96px; background: linear-gradient(to bottom, transparent, var(--iw-expand-bg, var(--iw-parchment)) 82%); pointer-events: none; } .iw-expand-toggle { display: none; align-items: center; gap: 7px; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--iw-forest); font: inherit; font-size: .92rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; } .iw-expand-toggle.is-live { display: inline-flex; } /* Space below so the toggle never sits flush against the next heading. */ .iw-expand-toggle.is-live { margin-bottom: 26px; } .iw-expand-toggle:hover { color: var(--iw-amber); } .iw-expand-toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; } .iw-expand-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); } .iw-expand-toggle:focus-visible { outline: 2px solid var(--iw-amber); outline-offset: 3px; border-radius: 3px; } /* On a cream band the fade has to match the band, not the page. */ .iw-bg--cream .iw-expand { --iw-expand-bg: var(--iw-cream); } .iw-member .iw-expand { --iw-expand-bg: var(--iw-parchment); } /* ═══════════════════════════════════════════════════════════════════════════ PROFILE — photograph and copy in proportion ═══════════════════════════════════════════════════════════════════════════ */ .iw-profile { /* Centring worked when the biography was four lines; with the new copy it floated a small photograph beside a very tall column. */ align-items: start; } @media (min-width: 900px) { /* The portrait travels with the reader instead of scrolling away, which keeps the two columns visually tied together however long the copy is. */ .iw-profile__media { position: sticky; top: 108px; } .iw-profile__photo { height: 620px; } } .iw-profile__bio { max-width: 68ch; } /* ═══════════════════════════════════════════════════════════════════════════ WORKSHOP ROWS — the same treatment for the longer descriptions ═══════════════════════════════════════════════════════════════════════════ */ .iw-mm__row { align-items: start; } @media (min-width: 900px) { .iw-mm__media { position: sticky; top: 108px; } } /* ═══════════════════════════════════════════════════════════════════════════ MOOD MOVED — the badge, and the buttons under each workshop On a page where the section's heading block is switched off the badge was left stranded in the middle of the band's own top padding, and the two calls to action under a workshop — the facilitator's portfolio link and the button directly beneath it — ran into one another with nothing between them. ═══════════════════════════════════════════════════════════════════════════ */ .iw-mm__logo { /* Sits higher in the band. The bottom margin absorbs the same amount again so only the badge moves: whatever follows stays where it was. */ margin-top: -34px; margin-bottom: 58px; } /* The portfolio link sits directly above the button, so the button carries the gap between them — and keeps it however the workshop above is filled in. */ .iw-mm__content > .iw-btn { margin-top: 20px; } @media (max-width: 767px) { .iw-mm__logo { margin-top: -20px; margin-bottom: 44px; } } /* ═══════════════════════════════════════════════════════════════════════════ TEAM — "Book with …" and "See Fees" side by side Two buttons under a profile, wrapping onto separate lines on a phone rather than shrinking into each other. ═══════════════════════════════════════════════════════════════════════════ */ .iw-profile__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; } /* ═══════════════════════════════════════════════════════════════════════════ POLICY PAGES — the tick-box and signature blocks The Mood Moved policies carry printed forms: consent tick boxes, a signature line, the version footer. They are lists in the markup so the client can edit them like anything else, but a disc bullet in front of a tick box reads as a mistake, so these ones lose their marker. ═══════════════════════════════════════════════════════════════════════════ */ .iw-prose .iw-form-list { list-style: none; padding-left: 0; } /* Long signature rules must wrap on a phone rather than push the page sideways. */ .iw-prose .iw-form-list li { overflow-wrap: anywhere; } /* ═══════════════════════════════════════════════════════════════════════════ TEAM (continued) ═══════════════════════════════════════════════════════════════════════════ */ /* Under the co-facilitator grid the row is centred, matching the cards. */ .iw-team__members + .iw-profile__btns, .iw-team__strip + .iw-profile__btns { justify-content: center; margin-top: 36px; } .iw-mm__desc { max-width: 68ch; } /* ═══════════════════════════════════════════════════════════════════════════ CO-FACILITATOR CARDS — equal height, tidy rhythm ═══════════════════════════════════════════════════════════════════════════ */ /* * The cards are laid out as a grid rather than as the wrapping flex row the * rest of the site uses, for one reason: a flex row can only make cards equal * to the others beside it on the same line. With four co-facilitators on two * lines that left the second pair a different height from the first. Grid rows * set to 1fr make every card in the section the same height as the tallest, * however many lines they run to. * * The column rule is the same auto-fitting behaviour .iw-autofit gives, driven * by the same --iw-basis, so no column count is hard-coded here either and the * cards still stack by themselves on a narrow screen. */ .iw-team__members { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--iw-basis, 430px)), 1fr)); gap: var(--iw-gap, 24px); align-items: stretch; } .iw-team__members > li { display: flex; flex-direction: column; /* * Not height: 100%. A flex or grid item only stretches to its row when its * cross size is auto, and a percentage height is not auto — which is what * stopped these cards levelling up in the first place. */ height: auto; } .iw-member__bio { display: flex; flex-direction: column; /* Takes up whatever height the tallest card in the section decided on. */ flex: 1 1 auto; } /* * Whichever of the two comes last drops to the foot of the card, so the * "View more" toggles and the portfolio links sit on one line across the row * instead of floating wherever each biography happens to end. */ .iw-member__bio .iw-expand-toggle { margin-top: auto; align-self: flex-start; } .iw-member__link { margin-top: auto; } .iw-expand-toggle.is-live + .iw-member__link { margin-top: 12px; } @media (min-width: 900px) { /* Only once there is more than one card to a line. On a phone every card is its own row, and levelling them there would just add empty space. */ .iw-team__members { grid-auto-rows: 1fr; } } @media print { .iw-nav, .iw-hero__bg, .iw-cta__bg, .iw-ig, .iw-skip { display: none !important; } .iw-reveal { opacity: 1 !important; transform: none !important; } .iw-tabs__panel[hidden] { display: block !important; } body { background: #fff; } }