/* ========================================================================== The Bluff Technique - design tokens. The only file allowed to hold a raw color, a radius, a shadow or a type size. tools/audit.py fails the build on a hex anywhere else. Values come from docs/jimmy-design-standard.html, rewritten on 29 October 2026 from Ryan's redesign (docs/design/ryan-2026-10-29/); change the standard and this file together. ========================================================================== */ /* ---- faces -------------------------------------------------------------- RYAN'S FACES (Wil, 29 Oct 2026, with Maria's approval of Ryan's redesign): Fira Sans for body copy, Barlow Condensed for headings, Roboto for the main menu and the header's Book Now. Only the cuts the prototype sets are shipped (docs/design/ryan-2026-10-29/, read 29 Oct): Fira 400, 500, 600, 700 and italic 400, 700; Barlow 600, 700, 800 and italic 600, 700; Roboto 500. Latin subsets from Google Fonts (they carry the trademark sign, curly quotes and dashes); licenses sit beside the files in /fonts/. Barlow is set at its own size now. Until 29 Oct each cut carried a size-adjust that set it at Myriad Condensed's width, for the replica; Ryan's sizes were drawn with Barlow as it is. */ @font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap; src:url("/fonts/fira-sans-400.woff2") format("woff2")} @font-face{font-family:"Fira Sans";font-style:italic;font-weight:400;font-display:swap; src:url("/fonts/fira-sans-400-italic.woff2") format("woff2")} @font-face{font-family:"Fira Sans";font-style:normal;font-weight:500;font-display:swap; src:url("/fonts/fira-sans-500.woff2") format("woff2")} @font-face{font-family:"Fira Sans";font-style:normal;font-weight:600;font-display:swap; src:url("/fonts/fira-sans-600.woff2") format("woff2")} @font-face{font-family:"Fira Sans";font-style:normal;font-weight:700;font-display:swap; src:url("/fonts/fira-sans-700.woff2") format("woff2")} @font-face{font-family:"Fira Sans";font-style:italic;font-weight:700;font-display:swap; src:url("/fonts/fira-sans-700-italic.woff2") format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap; src:url("/fonts/barlow-condensed-600.woff2") format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:600;font-display:swap; src:url("/fonts/barlow-condensed-600-italic.woff2") format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap; src:url("/fonts/barlow-condensed-700.woff2") format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:700;font-display:swap; src:url("/fonts/barlow-condensed-700-italic.woff2") format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap; src:url("/fonts/barlow-condensed-800.woff2") format("woff2")} @font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap; src:url("/fonts/roboto-500.woff2") format("woff2")} /* Fallbacks shown until the web fonts arrive: Arial (Liberation Sans is its metric twin on Linux) scaled to each web font's width, so lines break in the same places and nothing jumps when the real font swaps in (PageSpeed CLS 0.188 on 3 Oct 2026, before there were any). Measured 29 Oct 2026 with fontTools, web font / Arial advance widths at the matching weight, over the home page's own copy; Barlow over the same copy in capitals, as its headings are set. */ @font-face{font-family:"Fira Sans Fallback";font-style:normal;font-weight:400;size-adjust:100.8%; src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans")} @font-face{font-family:"Fira Sans Fallback";font-style:italic;font-weight:400;size-adjust:99.8%; src:local("Arial Italic"),local("Arial-ItalicMT"),local("Liberation Sans Italic"),local("LiberationSans-Italic")} @font-face{font-family:"Fira Sans Fallback";font-style:normal;font-weight:500;size-adjust:101%; src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans")} @font-face{font-family:"Fira Sans Fallback";font-style:normal;font-weight:600 700;size-adjust:94.4%; src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold")} @font-face{font-family:"Fira Sans Fallback";font-style:italic;font-weight:700;size-adjust:92.9%; src:local("Arial Bold Italic"),local("Arial-BoldItalicMT"),local("Liberation Sans Bold Italic"),local("LiberationSans-BoldItalic")} @font-face{font-family:"Roboto Fallback";font-style:normal;font-weight:500;size-adjust:100.1%; src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans")} @font-face{font-family:"Barlow Condensed Fallback";font-style:normal;font-weight:600;size-adjust:67%; src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold")} @font-face{font-family:"Barlow Condensed Fallback";font-style:italic;font-weight:600;size-adjust:65.1%; src:local("Arial Bold Italic"),local("Arial-BoldItalicMT"),local("Liberation Sans Bold Italic"),local("LiberationSans-BoldItalic")} @font-face{font-family:"Barlow Condensed Fallback";font-style:normal;font-weight:700;size-adjust:68.4%; src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold")} @font-face{font-family:"Barlow Condensed Fallback";font-style:italic;font-weight:700;size-adjust:66.4%; src:local("Arial Bold Italic"),local("Arial-BoldItalicMT"),local("Liberation Sans Bold Italic"),local("LiberationSans-BoldItalic")} @font-face{font-family:"Barlow Condensed Fallback";font-style:normal;font-weight:800;size-adjust:69.8%; src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold")} :root{ /* ---- color ---- RYAN'S PALETTE (29 Oct 2026). The four brand colors are his, as the prototype sets them; he matched them by eye from screenshots (handoff flag 11) and Wil chose to use them as given. The tints and greys are the ones the prototype uses most, folded into a short set. The names are the replica's, so pages Ryan didn't redesign take the new palette unchanged. */ --navy: #263A6B; /* headings, menu, footer ground */ --blue: #1D75BC; /* actions, links, the announcement bar (white on it 4.9:1) */ --blue-deep: #1764A3; /* a blue button under the pointer */ --sky: #5BB8EE; /* light blue: hero accent, kickers and heads on navy */ --steel: #3A96C2; /* teal: kickers on white, large type only (3.3:1) */ --navy-ink: #1B2A4A; /* the header's phone number */ --slate: #3A4B63; /* closed accordion titles */ --ink: #2B2B2B; /* body copy */ --muted: #51627A; /* secondary copy: a menu item's hint, a group's line (6.2:1) */ --paper: #FFFFFF; --white: #FFFFFF; --mist: #F2F7FB; /* a menu link under the pointer; the palest band */ --pale: #E8F3FA; /* review cards, pale bands */ --rule: #E5EAF1; /* hairlines: under the header, between menu parts */ --line: #D6E2EF; /* card border */ --wash: #CFE3EF; /* inactive dots */ --off: #E3EBF5; /* copy on the navy footer */ --on-navy: #C5D6EE; /* copy on a navy card */ --star: #FFD84D; /* the five stars on the blue bar */ --star-gold: #F9B400; /* the five stars on white */ --field-line: #69727D; /* form control border */ --placeholder:#6F7782; --wash-edge: #BFDEEE; /* section washes: this at one edge, white by the middle */ --wash-meet: #CFE0EE; /* the "Meet Jimmy" wash, 30 degrees */ --veil-blue: rgba(29,117,188,.68); /* the quote band over the hero */ --wash-contact: #BCD9EE; /* the Contact page's icon row: white to this at the right */ --navy-deep: #1E2F58; /* the Contact page's form band overlay, at 90% */ --scrim-hero: rgba(43,43,43,.25); --scrim-control: rgba(43,43,43,.45); /* the hero video's pause button */ --scrim-drawer: rgba(30,47,88,.55); /* behind the phone menu drawer (navy-deep) */ --pulse: rgba(29,117,188,.55); /* the ring around a playing preview's play button (blue) */ --pulse-end: rgba(29,117,188,0); --scrim-zoom: rgba(38,58,107,.88); /* the expand icon on an image that opens larger (navy) */ --scrim-footer: rgba(43,43,43,.90); --bar-footer: rgba(255,255,255,.07); --frost: rgba(255,255,255,.97); /* the header's ground, over a blur */ --frost-line: rgba(255,255,255,.55); /* the My account pill's outline on the blue bar */ --frost-hover: rgba(255,255,255,.14); --ghost-line: rgba(255,255,255,.35); /* a second button on navy */ --map-line: rgba(255,255,255,.2); /* the footer map's frame */ --glow-mega: rgba(91,184,238,.32); /* the soft sky glow on a mega menu's booking card */ /* Ryan's page grounds (the home page, 29 Oct 2026) */ --line-soft: #E1EAF3; /* a card's hairline border */ --ice: #E6F2F9; /* the middle of a white-to-light-blue wash */ --wash-end: #D4E9F3; /* the foot of the Meet Jimmy wash */ --scrim-hero-a: rgba(14,24,48,.82); /* the hero's scrim, left to right */ --scrim-hero-b: rgba(14,24,48,.5); --scrim-hero-c: rgba(14,24,48,.2); --frost-pill: rgba(255,255,255,.12); /* the reviews pill on the hero */ --frost-pill-hover: rgba(255,255,255,.22); --ring-white: rgba(255,255,255,.9); /* the thin ring around a big circle photo */ --ring-glow: rgba(255,255,255,.25); /* the About pages (29 Oct 2026) */ --ice-soft: #EEF6FB; /* the long pages' story wash */ --navy-dark: #1F3260; /* the quote band's gradient, left to right */ --navy-light: #2D4C86; --veil-navy-a: rgba(38,58,107,.95); /* over the Dorian Yates band's photo */ --veil-navy-b: rgba(38,58,107,.7); --veil-play: rgba(38,58,107,.18); /* over a circle photo that plays a video */ --veil-play-hover: rgba(38,58,107,.32); --frost-card: rgba(255,255,255,.08); /* a card on navy */ --frost-card-line: rgba(255,255,255,.25); --todo: #FFE58A; /* a [placeholder] still to fill from the content docs - staging only, never at launch */ /* ---- shape and depth ---- */ --r-card: 28px; --r-field: 10px; --r-pill: 100px; --ring: 8px solid var(--white); --border-card: 2px solid var(--line); --sh-button: 0 4px 4px rgba(0,0,0,.2); --sh-card: 1px 1px 4px rgba(0,0,0,.2); --sh-portrait: 1px 1px 18px rgba(0,0,0,.18); --sh-drawer: -18px 0 46px rgba(30,47,88,.28); --sh-tabbar: 0 -4px 18px rgba(38,58,107,.12); /* the mobile footer menu, lifted off the page */ --sh-tabbar-book: 0 4px 10px rgba(29,117,188,.35); /* its raised Book button */ --sh-mega: 0 30px 60px -30px rgba(38,58,107,.35); /* the mega menu panel, Ryan's */ --r-btn: 11px; /* square-cornered buttons: the menu button, the mega card's two */ --r-mega: 16px; /* the mega menu's navy card */ --r-map: 14px; /* the footer map */ --r-panel: 22px; /* Ryan's big pale cards: what brings you in, Jimmy, the apprentices */ --r-tile: 18px; /* Ryan's cards: benefits, reviews, stories, before/after */ --r-thumb: 10px; /* a photo inside a card */ --r-form: 24px; /* the contact form's card */ --sh-float: 0 30px 60px -28px rgba(20,32,64,.5); /* "What brings you in?" */ --sh-soft: 0 14px 34px -26px rgba(38,58,107,.45); /* benefit cards, the techniques card */ --sh-review: 0 10px 30px -18px rgba(38,58,107,.35); /* review cards */ --sh-badge: 0 24px 50px -22px rgba(38,58,107,.5); /* the 20+ years badge */ --sh-pill: 0 10px 24px -16px rgba(38,58,107,.5); /* the reviews pill on light grounds */ --sh-tile: 0 14px 30px -22px rgba(38,58,107,.5); /* instagram tiles */ --sh-circle: 0 50px 90px -50px rgba(38,58,107,.5); /* the Academy's circle photo */ --sh-form: 0 40px 80px -50px rgba(38,58,107,.55); /* the contact form's card */ --sh-photo: 0 24px 50px -30px rgba(38,58,107,.55); /* Sessions & Classes photos */ --sh-play: 0 20px 40px -12px rgba(0,0,0,.45); /* the play button on a circle photo */ --r-card-lg: 20px; /* Our Company's cards and photos */ --r-faq: 16px; /* a question card */ /* ---- layout ---- Live, every section's content is 90% of the window, never wider than 1440px (Elementor's section--width): so 1140px at 1280, 1427px at 1600. The gutter is the other 10%, split. */ --wrap: 1440px; --gutter: 5vw; --tabbar-h: 64px; /* the mobile footer menu, without the phone's home bar */ --section-pad: 80px; /* live: 80px top and bottom, 40px on phones */ /* the announcement bar and header (Ryan's, 29 Oct 2026): their own measure, wider than the page's, 1920px with a 20-96px gutter */ --chrome-max: 1920px; --chrome-gutter: clamp(20px, 5vw, 96px); --chrome-gap: clamp(12px, 1.6vw, 40px); --header-h: 112px; /* 92px below 1320px, 76 on phones */ --header-stuck: var(--header-h); /* the header keeps its height once the bar scrolls away */ --logo-h: 60px; /* 72 from 1600px, 58 below 1320, 46 on phones */ --nav-gap: clamp(2px, 1vw, 22px); --nav-pad: clamp(4px, .55vw, 10px); --book-pad: 24px; /* Book Now's side padding: 34px from 1600px */ --stick-top: calc(var(--header-stuck) + 24px); /* where sticky photos and sidebars hold (live: 120-140px) */ /* ---- type faces and weights ---- */ --f-body: "Fira Sans", "Fira Sans Fallback", Arial, sans-serif; --f-cond: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Arial, sans-serif; --f-nav: "Roboto", "Roboto Fallback", Arial, sans-serif; /* the main menu and Book Now only (500) */ --w-black: 800; /* Barlow only: Fira ships 400-700 */ --w-bold: 700; --w-semi: 600; /* ---- type scale: desktop (tablet and phone below) ---- */ --t-display: 148px; /* hero H1 */ --t-banner: 148px; /* inner-page banner H1: as the hero, but 56px on phones */ --t-banner-long: min(148px, 11.5vw); /* a banner H1 with one very long word: 148px at 1280, smaller below so "RECONSTRUCTION™?" stays on screen (MarkUp board 58 #12); 40px on phones */ --t-kicker: 52px; /* hero line above the H1 */ --t-heroline: 42px; /* hero line below the H1 */ --t-h2: 88px; /* section heading */ --t-eyebrow: 38px; --lh-eyebrow: 30px; --t-accordion: 54px; --t-cardtitle: 48px; --t-learn-title: 48px; /* Level 1's "what you'll learn" titles: 40px at 1200 and below, so each stays on two lines (board 58 #18, #19) */ --t-name: 38px; --t-name-lg: 54px; /* Jimmy's own feature card */ --t-label: 32px; /* Before / After */ --t-foothead: 26px; /* footer heads (Ryan's) */ --t-foothead-sm: 24px; /* the brand column's "Contact Us" */ --t-foot-about: 15.5px; /* the brand column's paragraph */ --t-foot-btn: 20px; /* Get Directions */ --t-foot-bar: 14.5px; /* the blue bar under the footer */ --t-quote: clamp(34px, 3.44vw, 44px); /* 44px from 1280 up, scaling down to 35px at 1033 (board 58 #14) */ --t-quote-name: 24px; /* the name under a quote-band quote */ /* Ryan's page type (the home page first, 29 Oct 2026). Fluid where the prototype is, so most need no step at the breakpoints. */ --page-max: 1240px; /* a section's content, padding included */ --page-gutter: clamp(20px, 4vw, 40px); --rd-pad: 96px; /* a section's padding; 64px on phones */ --t-results-quote: clamp(20px, 2.2vw, 28px); /* the results band's review */ --t-results-title: 22px; /* the result's name */ --t-results-tag: 12px; /* Before and After on the photo */ --t-rd-kicker: clamp(28px, 3vw, 44px); /* teal capitals above a head */ --t-rd-h2: clamp(48px, 6.4vw, 96px); /* a section head */ --t-rd-h2-md: clamp(40px, 5vw, 64px); /* What People Are Saying, Instagram */ --t-rd-h2-xl: clamp(52px, 7vw, 112px); /* The Bluff Academy */ --t-hero-kicker: clamp(24px, 2.4vw, 34px); --t-hero-title: clamp(56px, 8.6vw, 132px); --t-hero-line: clamp(26px, 3.2vw, 46px); --t-pill: 15.5px; /* the reviews pill */ --t-needs: clamp(28px, 3vw, 38px); --t-meet-h2: clamp(44px, 5.4vw, 72px); --t-meet-role: clamp(22px, 2.2vw, 30px); --t-meet-quote: clamp(20px, 1.8vw, 24px); --t-copy: 17.5px; /* Meet Jimmy's paragraphs */ --t-copy-sm: 16.5px; /* Jimmy's card, the techniques list */ --t-card-text: 15.5px; /* benefit, story and footer copy */ --t-caption: 15px; /* before/after captions */ --t-lead: clamp(17px, 1.3vw, 20px); /* an Academy level, the contact line */ --t-tile-h: 26px; /* benefit and before/after titles; Get Directions-size Barlow */ --t-person: 34px; /* an apprentice's name */ --t-person-lg: clamp(32px, 4vw, 44px); /* Jimmy's name on his card */ --t-story: 30px; /* a success story's name */ --t-level: clamp(34px, 3.6vw, 60px); /* an Academy level's title */ --t-ba-label: 20px; /* Before / After under a photo */ --t-reviewer-rd: 21px; /* a reviewer's name */ --t-call-k: 18px; /* CALL NOW */ --t-call: 30px; /* the number under it */ --t-badge-n: 20px; /* 20+ */ --t-badge: 22px; /* YEARS OF HEALING */ --t-handle: clamp(24px, 2.4vw, 32px); /* @jimmy_bluff */ --t-ways: 18px; /* the contact band's phone, email, address */ /* the About pages: Ryan's long-page template and Our Company (29 Oct 2026) */ --t-crumbs: 15px; --t-lp-kicker: clamp(24px, 2.6vw, 40px); --t-lp-title: clamp(42px, 4.8vw, 84px); --t-lp-title-big: clamp(56px, 8vw, 128px); /* Our Company */ --t-lp-lead: clamp(17px, 1.25vw, 19px); /* also the long pages' paragraphs */ --t-lp-h2: clamp(42px, 5.6vw, 88px); --t-lp-role: clamp(22px, 2vw, 28px); --t-lp-sub: clamp(30px, 3vw, 46px); --t-statement: clamp(28px, 2.8vw, 42px); --t-ticks: 17px; --t-pull: clamp(30px, 3.2vw, 52px); --t-pull-big: clamp(34px, 4.4vw, 78px); --t-pull-mark: 110px; --t-pull-by: clamp(22px, 2vw, 30px); --t-band: clamp(36px, 5vw, 80px); --t-co-card: clamp(28px, 2.6vw, 38px); --t-proof: clamp(36px, 5vw, 76px); --t-proof-name: clamp(26px, 2.6vw, 36px); --t-proof-title: clamp(18px, 1.6vw, 22px); --t-principle-label: 20px; --t-principle: clamp(19px, 1.6vw, 23px); --t-stars-lg: 24px; /* the content pages in Ryan's template (29 Oct 2026) */ --t-lp-toc-title: 22px; --t-lp-toc: 16px; --t-faq-q-rd: clamp(22px, 1.8vw, 26px); --t-center: clamp(44px, 5.4vw, 88px); --t-center-nap: clamp(18px, 1.4vw, 22px); /* the announcement bar, header and mega menus (Ryan's, 29 Oct 2026) */ --t-nav: clamp(15px, 1.08vw, 18px); --t-phone: clamp(20px, 1.35vw, 24px); --t-book: 19px; /* Book Now in the header */ --t-announce: clamp(15px, 1.4vw, 20px); --t-announce-sm: 14px; /* the bar's Google reviews */ --t-account: 15px; /* the bar's My account */ --t-mega-kicker: 12px; /* a group's name, the card's eyebrow: capitals, tracked */ --t-mega-line: 13.5px; /* a group's line, the footnote */ --t-mega-name: 15px; --t-mega-hint: 13px; --t-mega-all: 14.5px; /* the "all" link, the card's text */ --t-mega-title: 24px; /* the card's title */ --t-drawer: 17px; /* a top-level item in the drawer */ --t-body: 20px; --lh-body: 1.5; --t-card: 20px; --lh-card: 30px; /* live sets card and page copy at body size */ --t-card-sm: 17px; /* the apprentice cards only (home, /apprentices/) */ --t-reviewer: 20px; --t-btn-lg: 26px; /* Ryan's buttons are Barlow 600: 26 / 24 / 21px (29 Oct 2026) */ --t-btn: 24px; --t-btn-sm: 21px; --t-field: 18px; --t-small: 16px; /* submenus, footer bar */ --t-tag: 11px; /* the Tel / Mail / Visit labels in the drawer; a search suggestion's section */ --t-search-sug: 18px; /* a suggestion's title in the search panel under the header */ --t-tab: 12px; /* the mobile footer menu's labels (25 Oct 2026) */ --t-search-hit: 30px; /* a search result's title (25 Oct 2026): large text, so --blue on white passes */ --t-review: 19px; /* review card quote */ --t-faq: 28px; /* FAQ question, measured against the live page */ /* Academy heroes, read from each page's compiled Elementor CSS */ --t-acad-kicker: 31px; --t-acad-title: 74px; /* Level 1 */ --t-acad-kicker-lg: 52px; --t-acad-title-lg: 118px; /* Levels 2 and 3 */ /* service, condition and area templates, from their compiled Elementor CSS */ --t-tpl-title: 62px; --t-tpl-kicker: 31px; --t-toc: 24px; /* legal pages (terms, privacy): the theme's h2-h4, measured on the live pages */ --t-legal-h2: 48px; --t-legal-h3: 32px; --t-legal-h4: 24px; --t-h2-sm: 75px; /* the /service-areas/ heading */ --t-subhead: 54px; /* the theme's h4: apprentice offer, the workshops line on /jimmy-bluff/ */ /* the theme's h2 and h3 as the Academy pages use them, read at 1280 / 820 / 390 */ --t-h3: 58px; /* workshop, program and tier titles */ --t-h2-label: 68px; /* Sold Out, You Are Here */ --t-intro: 80px; /* the Level 1 intro headline */ --t-intro-xl: 148px; /* the Level 2 and 3 intro headlines */ --t-facts: 42px; /* the facts line under an intro headline, every width */ --lh-display: .9; --lh-tight: 1; } /* wide desktop: a larger logo and Book Now (Ryan's, from 1600px) */ @media (min-width:1600px){ :root{ --logo-h: 72px; --book-pad: 34px; } } /* below 1320px the menus move into the drawer (Ryan's breakpoint) */ @media (max-width:1319px){ :root{ --header-h: 92px; --logo-h: 58px; } } /* laptop: 1200px and below. The live kit puts Elementor's laptop step at 1200 (viewport_laptop), so 1201-1366 gets the desktop sizes, as measured at 1280. The menu steps down to 12px here too. */ @media (max-width:1200px){ :root{ --t-learn-title: 40px; --t-intro-xl: 110px; /* live's h1 steps 148 / 110 / 90 at 1200 and 1024 (board 58 #20) */ --t-acad-kicker: 28px; --t-acad-title: 52px; --t-acad-kicker-lg: 48px; --t-acad-title-lg: 80px; } } /* tablet: 1024px and below (Elementor's breakpoint, confirmed on the live site) */ @media (max-width:1024px){ :root{ --t-display: 72px; --t-banner: 72px; --t-banner-long: 72px; --t-kicker: 36px; --t-acad-kicker: 24px; --t-acad-title: 40px; --t-acad-kicker-lg: 42px; --t-acad-title-lg: 62px; --t-tpl-title: 52px; --t-tpl-kicker: 28px; --t-heroline: 26px; --t-h2: 65px; --t-accordion: 34px; --t-subhead: 34px; --t-h2-sm: 56px; --t-cardtitle: 40px; --t-quote: 24px; --t-h3: 42px; --t-h2-label: 45px; --t-intro-xl: 90px; } } /* phones: the header steps down at 699px (Ryan's) */ @media (max-width:699px){ :root{ --header-h: 76px; --logo-h: 46px; --rd-pad: 64px; } } /* phone: 767px and below */ @media (max-width:767px){ :root{ --t-display: 44px; --t-banner: 56px; --t-banner-long: 40px; --t-kicker: 24px; --t-acad-kicker: 21px; --t-acad-title: 31px; --t-acad-kicker-lg: 32px; --t-acad-title-lg: 48px; --t-tpl-title: 42px; --t-tpl-kicker: 24px; --t-toc: 20px; --t-heroline: 22px; --t-h2: 46px; --t-eyebrow: 30px; --lh-eyebrow: 27px; --t-cardtitle: 30px; --t-learn-title: 30px; --t-quote: 18px; --t-body: 18px; --t-card: 18px; --lh-card: 27px; --t-reviewer: 14px; --t-h3: 32px; --t-h2-label: 38px; --t-intro: 48px; --t-intro-xl: 48px; --section-pad: 40px; --t-quote-name: 16px; --t-faq: 22px; --t-h2-sm: 42px; --t-legal-h2: 28px; --t-legal-h3: 24px; --t-legal-h4: 20px; } } /* ========================================================================== The Bluff Technique - site styles. Colors, sizes and faces come from tokens.css only (tools/audit.py enforces it). One block per component, and a component's classes start with its own name, so a rule written for one part of a page can't reach another. ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-stuck) + 16px)} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body); font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased} img,video{max-width:100%;height:auto;display:block} a{color:inherit} sup{font-size:.4em;vertical-align:super;line-height:0} ul{list-style:none;margin:0;padding:0} h1,h2,h3,h4,h5,h6{margin:0;font-weight:inherit} :focus-visible{outline:2px solid var(--blue);outline-offset:2px} .wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)} .skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--navy);color:var(--white);padding:12px 20px} .skip-link:focus{left:0} /* ---- buttons ------------------------------------------------------------ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px; font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-btn);line-height:1; text-decoration:none;white-space:nowrap; padding:12px 40px;border:0;border-radius:var(--r-pill); background:var(--blue);color:var(--white);cursor:pointer;transition:background-color .2s,color .2s} /* RYAN'S BUTTONS (29 Oct 2026): Barlow Condensed semibold, set as written; a blue button darkens on hover, a navy one goes deeper navy. */ .btn:hover{background:var(--blue-deep)} .btn--navy{background:var(--navy)} .btn--navy:hover{background:var(--navy-deep)} .btn--line{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)} .btn--line:hover{background:var(--navy);color:var(--white)} .btn--steel{background:var(--steel)} .btn--steel:hover{background:var(--navy)} .btn--lg{font-size:var(--t-btn-lg);padding:14px 46px} .btn--sm{font-size:var(--t-btn-sm);padding:10px 30px} .btn--submit{background:var(--navy);text-transform:uppercase;padding:16px 60px} .btn--submit:hover{background:var(--navy-deep)} .btn--submit-steel{background:var(--steel)} .btn--submit-steel:hover{background:var(--navy)} .btn__icon{width:20px;height:20px;fill:currentColor;flex:none} .button-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:48px} @media (max-width:767px){ .btn--lg{font-size:var(--t-btn);padding:13px 34px} .btn{white-space:normal;text-align:center;line-height:1.1;max-width:100%} } /* ---- section head: eyebrow shows above the title, title comes first ----- */ .section-head{display:flex;flex-direction:column-reverse;gap:8px;margin-bottom:40px} .section-head__title{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-h2); line-height:var(--lh-display);text-transform:uppercase;color:var(--navy);text-wrap:balance} .section-head__eyebrow{margin:0;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-eyebrow); line-height:var(--lh-eyebrow);text-transform:uppercase;color:var(--steel)} .section-head__eyebrow a{text-decoration:none} .section-head__eyebrow a:hover{color:var(--navy)} .section-head__logo{display:inline-block;width:26px;height:auto;vertical-align:-2px;margin-left:4px} .section-head--center{text-align:center;max-width:840px;margin-inline:auto} /* live: centered heads are 840px wide */ .section-head--light,.section-head--wide{max-width:none} /* live: the contact band and a few Academy heads run wider than 840px */ .section-head--center.wrap{max-width:calc(840px + 2 * var(--gutter))} /* a head beside a photo is the smaller 75px, as live on About, Who is Jimmy / Maria and What is AMR (not /jimmy-bluff/) */ .split__body .section-head__title{font-size:var(--t-h2-sm)} .split__grid--even .split__body .section-head__title{font-size:var(--t-h2)} .section-head--light .section-head__title,.section-head--light .section-head__eyebrow{color:var(--white)} /* ---- washes: the edge color fading to white by the middle --------------- */ .wash--right{background:linear-gradient(270deg,var(--wash-edge) 0%,var(--white) 50%)} .wash--left{background:linear-gradient(90deg,var(--wash-edge) 0%,var(--white) 50%)} /* ---- announcement bar (Ryan's redesign, 29 Oct 2026) -------------------- Three parts on desktop: Google reviews, the line, My account. Blue, not the prototype's teal (Wil, 29 Oct: white on teal was 3.3:1; on blue it's 4.9:1). It scrolls away with the page; only the header below it stays. */ .announce{background:var(--blue);color:var(--white)} .announce__inner{max-width:var(--chrome-max);margin-inline:auto;padding:8px var(--chrome-gutter);min-height:52px; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px 16px} .announce a{color:var(--white);text-decoration:none} .announce__reviews{justify-self:start;display:inline-flex;align-items:center;gap:8px; font-weight:var(--w-semi);font-size:var(--t-announce-sm)} .announce__reviews:hover{color:var(--pale)} .announce__stars{color:var(--star);letter-spacing:1px} .announce__line{margin:0;text-align:center;font-weight:var(--w-bold);font-size:var(--t-announce);line-height:1.3;text-wrap:balance} .announce__line a:hover{text-decoration:underline} .announce__account{justify-self:end;display:inline-flex;align-items:center;gap:10px;padding:4px 14px 4px 4px; border:1.5px solid var(--frost-line);border-radius:var(--r-pill);font-weight:var(--w-bold);font-size:var(--t-account);white-space:nowrap} .announce__account:hover{background:var(--frost-hover);border-color:var(--white)} .announce__avatar{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--white);color:var(--navy)} .announce__avatar svg{width:17px;height:17px;fill:currentColor} /* below 1320px the reviews link gives way and the line sits left of My account, as the prototype */ @media (max-width:1319px){ .announce__inner{grid-template-columns:1fr auto} .announce__reviews{display:none} .announce__line{text-align:left} } /* tablets and phones: My account lives in the mobile footer menu (Wil, 25 Oct 2026), so the line has the bar to itself, centered */ @media (max-width:1024px){ .announce__inner{grid-template-columns:1fr;min-height:0} .announce__account{display:none} .announce__line{text-align:center} } /* ---- header --------------------------------------------------------------- Ryan's: logo, six menus, and the phone over Book Now, on frosted white with a hairline under it. 112px tall on desktop, 92 below 1320px, 76 on phones; it keeps its height when the bar scrolls away. The menus give way to the drawer below 1320px, as the prototype does: six names in Roboto don't fit beside the logo and the phone any narrower. */ .site-header{position:sticky;top:0;z-index:100;background:var(--frost);border-bottom:1px solid var(--rule); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .site-header__inner{position:relative;max-width:var(--chrome-max);margin-inline:auto;padding-inline:var(--chrome-gutter); display:flex;align-items:center;justify-content:space-between;gap:var(--chrome-gap);min-height:var(--header-h)} .site-header__logo{display:flex;align-items:center;flex:none} .site-header__logo img{height:var(--logo-h);width:auto;max-width:56vw;object-fit:contain} .site-header__nav{flex:1;min-width:0;display:flex;justify-content:center;align-self:stretch} .site-header__menu{display:flex;align-items:stretch;justify-content:center;gap:var(--nav-gap)} .site-header__item{display:flex;align-items:stretch} .site-header__item > a{display:flex;align-items:center;gap:6px;padding:0 var(--nav-pad);white-space:nowrap; font-family:var(--f-nav);font-weight:500;font-size:var(--t-nav);line-height:1.2;color:var(--navy);text-decoration:none; border-top:3px solid transparent;border-bottom:3px solid transparent} /* the chevron, drawn: the prototype's 12px stroke arrow */ .site-header__item--mega > a::after{content:"";flex:none;width:6px;height:6px;margin:-3px 0 0 2px; border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)} .site-header__item > a:hover, .site-header__item--mega:hover > a, .site-header__item--mega:focus-within > a, .site-header__item--mega[data-open] > a{color:var(--blue);border-bottom-color:var(--blue)} .site-header__item--mega.is-dismissed > a{border-bottom-color:transparent} .site-header__cta{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none} .site-header__line{display:flex;align-items:center;gap:8px} .site-header__phone{display:flex;align-items:center;gap:8px;font-family:var(--f-cond);font-weight:var(--w-bold); font-size:var(--t-phone);line-height:1;color:var(--navy-ink);text-decoration:none;white-space:nowrap} .site-header__phone:hover{color:var(--blue)} .site-header__phone svg{width:20px;height:20px;flex:none;fill:var(--navy)} .site-header__search{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px; border-radius:50%;color:var(--navy);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule)} .site-header__search svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .site-header__search:hover,.site-header__search[aria-expanded="true"]{color:var(--white);background:var(--navy)} .site-header__book{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--book-pad); border-radius:var(--r-pill);background:var(--blue);color:var(--white);text-decoration:none;white-space:nowrap; font-family:var(--f-nav);font-weight:500;font-size:var(--t-book);line-height:1;transition:background-color .2s} .site-header__book:hover{background:var(--blue-deep)} .site-header__burger{display:none} /* Below 1320px. Without script the burger stays hidden and the nav shows as an open list under the logo, so every page is still reachable. */ @media (max-width:1319px){ .site-header__inner{flex-wrap:wrap;gap:12px;padding-block:8px} .site-header__logo{margin-right:auto} .site-header__nav{order:10;flex-basis:100%;align-self:auto;flex-direction:column; margin-inline:calc(-1 * var(--chrome-gutter));padding:4px var(--chrome-gutter) 20px;border-top:1px solid var(--rule)} .site-header__menu{flex-direction:column;align-items:stretch;gap:0} .site-header__item{flex-direction:column;border-bottom:1px solid var(--rule)} .site-header__item > a{padding:14px 0;border:0;font-size:var(--t-btn-sm)} .site-header__item--mega > a::after{display:none} /* that open list is taller than the screen, so without script the header scrolls away with it rather than sticking over the page */ html:not(.js) .site-header{position:relative} /* With script: the menu lives in the drawer (TERRA's pattern) */ .js .site-header__inner{flex-wrap:nowrap} .js .site-header__nav{display:none} .site-header__burger:not([hidden]){display:grid;place-items:center;flex:none;width:46px;height:46px;padding:0;cursor:pointer; border:1.5px solid var(--rule);border-radius:var(--r-btn);background:var(--paper)} .site-header__burger-bars,.site-header__burger-bars::before,.site-header__burger-bars::after{ display:block;width:22px;height:2.4px;border-radius:2px;background:var(--navy)} .site-header__burger-bars{position:relative} .site-header__burger-bars::before,.site-header__burger-bars::after{content:"";position:absolute;left:0} .site-header__burger-bars::before{top:-7px} .site-header__burger-bars::after{top:7px} } /* Tablets and phones: Book Now lives in the mobile footer menu (Wil, 25 Oct 2026), so the header is logo, call (and search on a tablet) and the menu. */ @media (max-width:1024px){ .site-header__book{display:none} .site-header__cta{flex-direction:row;gap:12px} } /* phones: the call link shrinks to a round icon, search goes to the footer menu */ @media (max-width:699px){ .js .site-header__phone{width:44px;height:44px;justify-content:center;border-radius:50%;background:var(--blue)} .js .site-header__phone span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .js .site-header__phone svg{fill:var(--white)} .site-header__search{display:none} .site-header__burger:not([hidden]){width:44px;height:44px} } /* ---- mega menus (Ryan's redesign, 29 Oct 2026) --------------------------- Every group side by side - its name, a line, its links with a hint under each - then a footnote row, and a navy card with two buttons. The item stretches to the header's full height so the pointer never crosses a gap on its way down, and the panel hangs from the header itself (the item is not positioned), so it spans the window. It opens on hover and keyboard focus with no script; site.js adds Escape and the first tap on touch. */ .mega{position:absolute;left:0;right:0;top:100%;z-index:10;background:var(--paper);border-bottom:1px solid var(--rule); box-shadow:var(--sh-mega);opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s,transform .16s,visibility 0s linear .16s} .site-header__item--mega:hover > .mega, .site-header__item--mega:focus-within > .mega, .site-header__item--mega[data-open] > .mega{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .16s,visibility 0s} .site-header__item--mega.is-dismissed > .mega{opacity:0;visibility:hidden} /* Escape, until the pointer or focus leaves */ @media (prefers-reduced-motion:reduce){ .mega{transition:none} } .mega__inner{max-width:1240px;margin-inline:auto;padding:32px clamp(20px,4vw,40px) 28px; display:flex;flex-wrap:wrap;align-items:stretch;gap:36px;max-height:calc(100vh - var(--header-h));overflow-y:auto} .mega__main{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;gap:22px} .mega__groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:28px} .mega__title{margin:0;font-weight:var(--w-bold);font-size:var(--t-mega-kicker);line-height:1.3;letter-spacing:.12em; text-transform:uppercase;color:var(--blue)} .mega__intro{margin:6px 0 0;font-size:var(--t-mega-line);line-height:1.45;color:var(--muted);text-wrap:pretty} .mega__links{display:flex;flex-direction:column;gap:2px;margin-top:12px} .mega__links a{display:block;padding:9px 12px;margin:0 -12px;border-radius:var(--r-field);color:var(--navy);text-decoration:none; transition:background-color .15s,color .15s} .mega__links a:hover,.mega__links a:focus-visible{background:var(--mist);color:var(--blue)} .mega__name{display:block;font-weight:var(--w-bold);font-size:var(--t-mega-name);line-height:1.35} .mega__hint{display:block;font-weight:500;font-size:var(--t-mega-hint);line-height:1.4;color:var(--muted)} .mega__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px; padding-top:16px;border-top:1px solid var(--rule)} .mega__note{margin:0;font-weight:var(--w-semi);font-size:var(--t-mega-line);color:var(--muted)} .mega__all{display:inline-flex;gap:6px;align-items:center;font-weight:var(--w-bold);font-size:var(--t-mega-all);color:var(--blue);text-decoration:none} .mega__all:hover{color:var(--blue-deep);text-decoration:underline} .mega__card{flex:0 1 320px;display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--r-mega); background:var(--navy);color:var(--white)} .mega__card-eyebrow{margin:0;font-weight:var(--w-bold);font-size:var(--t-mega-kicker);line-height:1.3;letter-spacing:.12em; text-transform:uppercase;color:var(--sky)} .mega__card-title{margin:0;font-weight:var(--w-bold);font-size:var(--t-mega-title);line-height:1.1;letter-spacing:-.02em;text-wrap:balance} .mega__card-text{margin:0;font-size:var(--t-mega-all);line-height:1.55;color:var(--on-navy)} .mega__card-links{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:8px} .mega__btn{display:block;padding:13px;border-radius:var(--r-btn);background:var(--white);color:var(--navy);text-align:center; font-weight:var(--w-bold);font-size:var(--t-small);line-height:1.2;text-decoration:none;transition:background-color .15s,border-color .15s} .mega__btn:hover{background:var(--pale)} .mega__btn--line{padding:11.5px;background:transparent;color:var(--white);border:1.5px solid var(--ghost-line)} .mega__btn--line:hover{background:transparent;border-color:var(--white)} .mega a:focus-visible{outline-offset:-2px} .mega__card a:focus-visible{outline-color:var(--white);outline-offset:2px} /* Below 1320px without script the nav is an open list, so each menu shows its groups as titled lists of links; the hints, footnote and card stay out. */ @media (max-width:1319px){ .mega{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;background:transparent} .mega__inner{display:block;max-height:none;padding:0 0 12px 14px} .mega__groups{display:block} .mega__intro,.mega__hint,.mega__foot,.mega__card{display:none} .mega__title{margin:10px 0 2px} .mega__links{margin:0} .mega__links a{margin:0;padding:8px 0} .mega__name{font-weight:400} } /* ---- the drawer (TERRA's): slides in from the right over a scrim ---------- */ .drawer-scrim{position:fixed;inset:0;z-index:998;background:var(--scrim-drawer);opacity:0;pointer-events:none;transition:opacity .28s ease} .drawer-scrim[data-open="true"]{opacity:1;pointer-events:auto} .drawer{position:fixed;top:0;right:0;z-index:999;width:min(370px,86vw);height:100dvh; display:flex;flex-direction:column;padding:0 22px 28px;overflow-y:auto;overscroll-behavior:contain; background:var(--paper);box-shadow:var(--sh-drawer);color:var(--ink); transform:translateX(101%);visibility:hidden; transition:transform .32s cubic-bezier(.22,.7,.28,1),visibility 0s linear .32s} .drawer[data-open="true"]{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.22,.7,.28,1),visibility 0s} .drawer__head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:18px 0 14px;margin-bottom:4px;background:var(--paper);border-bottom:1px solid var(--rule)} .drawer__head img{height:40px;width:auto} .drawer__close{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;cursor:pointer; border:1.5px solid var(--rule);border-radius:var(--r-btn);background:var(--paper);color:var(--navy);font-size:var(--t-btn-lg);line-height:1} .drawer__close:hover{background:var(--navy);border-color:var(--navy);color:var(--white)} .drawer__link,.drawer__row{border-bottom:1px solid var(--rule)} .drawer__link{display:block;padding:15px 4px;font-family:var(--f-body);font-weight:var(--w-bold);font-size:var(--t-drawer); color:var(--navy);text-decoration:none} .drawer__link:hover{color:var(--blue)} .drawer__row{display:flex;align-items:stretch} .drawer__row .drawer__link{flex:1;border:0;text-align:left;background:none;cursor:pointer} .drawer__tgl{display:flex;align-items:center;justify-content:center;flex:none;width:52px;padding:0;border:0;background:none;cursor:pointer} .drawer__tgl::before{content:"";width:9px;height:9px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue); transform:translateY(-3px) rotate(45deg);transition:transform .18s} .drawer__tgl[aria-expanded="true"]::before{transform:translateY(1px) rotate(-135deg)} .drawer__sub{margin:0 0 10px;padding:0 4px 4px} .drawer__sub[hidden]{display:none} .drawer__sub a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-weight:var(--w-semi);font-size:var(--t-small); color:var(--navy);text-decoration:none} .drawer__sub a:hover{color:var(--blue)} /* a mega menu's group names (Back & Spine, Westside & Coast...) inside its drawer list */ .drawer__group{margin:14px 0 2px;font-size:var(--t-mega-kicker);font-weight:var(--w-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)} .drawer__group:first-child{margin-top:4px} .drawer__ctas{display:flex;flex-direction:column;gap:12px;margin-top:18px} .drawer__ctas .btn{width:100%} .drawer__ctas .btn--outline{background:var(--paper);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--rule)} .drawer__ctas .btn--outline:hover{background:var(--navy);color:var(--white)} .drawer__base{margin-top:auto;padding-top:24px} .drawer__contact{display:flex;flex-direction:column;gap:6px;padding-top:20px;border-top:1px solid var(--rule)} .drawer__contact li{display:flex;align-items:flex-start;gap:11px;min-height:44px;font-size:var(--t-small);line-height:1.5} .drawer__contact b{flex:none;width:38px;padding-top:3px;font-size:var(--t-tag);font-weight:var(--w-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)} .drawer__contact a{color:var(--ink);text-decoration:none} .drawer__contact a:hover{color:var(--blue)} .drawer__social{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding-top:16px;border-top:1px solid var(--rule)} .drawer__social a{display:block;width:44px;height:44px;border-radius:50%;overflow:hidden} .drawer__social img{width:44px;height:44px;object-fit:contain} .drawer a:focus-visible,.drawer button:focus-visible{outline:2px solid var(--blue);outline-offset:2px} html.drawer-open{overflow:hidden} @media (min-width:1320px){ .drawer,.drawer-scrim{display:none} } @media (prefers-reduced-motion:reduce){ .drawer,.drawer-scrim,.drawer__tgl::before{transition:none} } /* ---- hero --------------------------------------------------------------- */ .hero{position:relative;overflow:hidden;background:var(--ink);color:var(--white)} .hero__media{position:absolute;inset:0} .hero__poster,.hero__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} .hero__video{opacity:0;transition:opacity .6s} .hero__video.is-playing{opacity:1} .hero__scrim{position:absolute;inset:0;background:var(--scrim-hero)} /* live: 120px above the stars, 220px of video between the buttons and the quote band */ .hero__inner{position:relative;padding-block:120px 220px} .hero__rating{display:block;width:max-content} .hero__rating img{width:166px} .hero__kicker{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-kicker); line-height:var(--lh-display);margin:10px 0 0} .hero__title{font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-display); line-height:var(--lh-display);text-transform:uppercase;margin:9px 0 0} .hero__title-accent{display:block;color:var(--sky)} .hero__line{font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-heroline); line-height:var(--lh-tight);margin:11px 0 30px} /* the trademark on the kicker and the subline is three quarters size, as live */ .hero__kicker sup,.hero__line sup{font-size:.75em;vertical-align:baseline;position:relative;top:-.5em} .hero__buttons{display:flex;flex-wrap:wrap;gap:20px} .hero__pause{position:absolute;right:var(--gutter);bottom:40px;width:48px;height:48px;padding:0;cursor:pointer; border:2px solid var(--white);border-radius:50%;background:var(--scrim-control);color:var(--white); display:grid;place-items:center} .hero__pause[hidden]{display:none} .hero__pause::before{content:"";width:14px;height:16px;border-inline:5px solid currentColor} /* pause bars */ .hero__pause[aria-pressed="true"]::before{width:0;height:0;border:0;border-left:15px solid currentColor; border-block:9px solid transparent;margin-left:4px} /* play triangle */ .hero__pause:hover{background:var(--navy)} /* Out of sight until the hero is hovered or the button has keyboard focus (MarkUp #4, 27 Sep). A touch screen has no hover, so there it stays visible: WCAG 2.2.2 needs a way to pause. */ @media (hover:hover){ .hero__pause{opacity:0;transition:opacity .2s} .hero:hover .hero__pause,.hero__pause:focus-visible{opacity:1} } @media (max-width:1024px){ .hero__inner{padding-block:60px 48px} .hero__pause{bottom:16px} } @media (prefers-reduced-motion:reduce){ .hero__video{display:none} } /* ---- carousels: a scroll-snap list; script adds the arrows -------------- */ /* No scroll-behavior:smooth here: the browser's first snap (4px, to the review cards' shadow padding) then ran as an animated scroll, which Chrome takes as the visitor scrolling and stops measuring the largest paint (PageSpeed "NO_LCP", 3 Oct 2026). The arrows ask for smooth scrolling themselves, in site.js. */ .carousel__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;overscroll-behavior-x:contain} .carousel__track::-webkit-scrollbar{display:none} .carousel__track > *{scroll-snap-align:start;flex:0 0 100%} .carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px; border:0;border-radius:50%;background:var(--white);color:var(--navy);cursor:pointer; display:grid;place-items:center;box-shadow:var(--sh-card)} .carousel__arrow:hover{background:var(--pale)} .carousel__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3} .carousel__arrow--prev{left:4px} .carousel__arrow--next{right:4px} /* ---- academy ------------------------------------------------------------ */ .academy{padding-block:var(--section-pad)} /* live: two equal halves; the photo fills its half */ .academy__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start} .academy__media{display:flex;justify-content:center} .academy__media img{width:100%} .level{border-bottom:2px solid var(--line)} .level__title{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px; padding:18px 0;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-accordion); line-height:var(--lh-tight);color:var(--slate)} .level__title::-webkit-details-marker{display:none} .level__title::after{content:"";flex:none;width:30px;height:30px;border:2px solid var(--blue);border-radius:50%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23157EBF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 55% 50%/14px no-repeat; /* a > chevron (MarkUp #5) */ transition:transform .2s} /* the home page's levels, as live: no rules, 40px between levels, a 42px icon, and the panel copy at body size */ .academy__levels{display:grid;gap:40px} .academy .level{border-bottom:0} .academy .level__title{padding:0 0 20px} .academy .level__title::after{width:42px;height:42px;background-size:18px} .academy .level__panel{padding:0} .academy .level__panel p{font-size:var(--t-body);line-height:var(--lh-body)} .level[open] .level__title{color:var(--blue)} .level[open] .level__title::after{transform:rotate(90deg)} .level__panel{padding:0 0 24px} .level__panel p{margin:0 0 20px;font-size:var(--t-card);line-height:var(--lh-card)} .level__panel ul{list-style:disc;padding-left:22px;margin:0 0 16px;font-size:var(--t-card);line-height:1.6} @media (max-width:1024px){ .academy__grid{grid-template-columns:1fr} .academy__media{order:-1} .academy__media img{max-width:480px} } /* ---- portraits ---------------------------------------------------------- */ .portrait-ring{border-radius:50%;border:var(--ring);box-shadow:var(--sh-portrait);aspect-ratio:1;object-fit:cover} /* ---- reviews ------------------------------------------------------------ */ .review-carousel{position:relative;margin:0 auto 64px;max-width:1140px} /* live: two 498px cards at every desktop width */ .js .review-carousel{padding-inline:max(56px, 5%)} /* live: the cards take the middle 90% of the column */ @media (max-width:767px){ .js .review-carousel{padding-inline:0 } .js .review-carousel .carousel__arrow{top:auto;bottom:-56px;transform:none} .js .review-carousel .carousel__arrow--prev{left:calc(50% - 52px)} .js .review-carousel .carousel__arrow--next{right:calc(50% - 52px)} } .review-carousel__track{gap:30px;padding:6px 4px 10px} .review-carousel__track > .review-card{flex:0 0 calc((100% - 30px) / 2)} .review-card{display:flex;flex-direction:column;background:var(--pale);border-radius:var(--r-card); box-shadow:var(--sh-card);padding:50px} @media (max-width:767px){ .review-card{padding:30px} } .review-card__top{display:flex;justify-content:space-between;align-items:center} .review-card__g{width:24px} .stars{display:flex;gap:2px} .stars svg{width:22px;height:22px;fill:var(--blue)} .review-card__text{margin:20px 0 20px;font-weight:var(--w-semi);font-style:italic;font-size:var(--t-review);line-height:1.45} .review-card__more{align-self:flex-start;font-weight:var(--w-semi);font-size:var(--t-btn-sm);color:var(--ink);text-decoration:none} .review-card__more:hover{color:var(--blue);text-decoration:underline} .review-card__who{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:20px} .review-card__who img{width:44px;height:44px;border-radius:50%} .review-card__who span{font-weight:var(--w-semi);font-size:var(--t-reviewer);text-transform:uppercase;color:var(--navy)} @media (max-width:767px){ .review-carousel__track > .review-card{flex-basis:100%} } /* ---- before and after --------------------------------------------------- */ .gallery{padding-block:var(--section-pad)} .ba-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px} .ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ba__pair figure{margin:0} .ba__pair img{width:100%;aspect-ratio:300/465;object-fit:cover;border-radius:var(--r-card);box-shadow:var(--sh-card)} .ba__pair figcaption{margin-top:10px;text-align:center;font-family:var(--f-cond);font-weight:var(--w-bold); font-size:var(--t-label);line-height:var(--lh-tight);text-transform:uppercase;color:var(--navy)} .ba > p{margin:14px 0 0;text-align:center;font-size:var(--t-card);line-height:var(--lh-card)} .ba-grid .ba > p{font-size:var(--t-body)} /* live: the grid's captions are body size */ @media (max-width:1024px){ .ba-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 34px} } @media (max-width:767px){ .ba-grid{grid-template-columns:1fr} } /* ---- contact band ------------------------------------------------------- */ .contact-band{position:relative;overflow:hidden;background:var(--blue);color:var(--white);padding-block:var(--section-pad)} .contact-band__photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top center} .contact-band > .wrap{position:relative} .contact-band__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:stretch} .contact-band__lede{margin:0 auto 20px;max-width:430px;text-align:center;font-weight:var(--w-semi)} .contact-band__lede a{color:inherit} @media (min-width:768px){ .contact-band:not(.contact-band--navy) .contact-form{max-width:80%;margin-inline:auto} } /* live: the form is 80% of its half */ .contact-band__map{width:100%;min-height:500px;height:100%;border:8px solid var(--blue);border-radius:var(--r-card); box-shadow:var(--sh-portrait);background:var(--pale)} @media (max-width:1024px){ .contact-band__grid{grid-template-columns:1fr} } .contact-form{display:grid;gap:10px} .contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .contact-form__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .contact-form__field{width:100%;min-height:47px;font-family:var(--f-body);font-size:var(--t-field);color:var(--ink); background:var(--white);border:1px solid var(--field-line);border-radius:var(--r-field);padding:10px 10px 10px 15px} .contact-form__field::placeholder{color:var(--placeholder)} .contact-form__field:focus{outline:2px solid var(--navy);outline-offset:1px} .contact-form__select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%); background-position:calc(100% - 22px) 21px,calc(100% - 16px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px} .contact-form__message{min-height:110px;resize:vertical} .contact-form .btn{justify-self:center;margin-top:10px} .contact-form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} @media (max-width:767px){ .contact-form__row{grid-template-columns:1fr} } /* ---- footer (Ryan's redesign, 29 Oct 2026) ------------------------------- Navy, four columns on the chrome's measure, then a blue bar. Heads are light blue Barlow capitals (5:1 on navy); links white, light blue under the pointer. */ .site-footer{background:var(--navy);color:var(--white);padding-top:72px} .site-footer__grid{max-width:var(--chrome-max);margin-inline:auto;padding-inline:var(--chrome-gutter); display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:40px} .site-footer__brand{grid-column:span 2;min-width:0;max-width:460px;display:flex;flex-direction:column;gap:18px} .site-footer__brand p{margin:0;font-size:var(--t-foot-about);line-height:1.65;color:var(--off)} .site-footer__logo{height:84px;width:auto} .site-footer__social{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .site-footer__social a{display:block;width:44px;height:44px} .site-footer__social img{width:40px;height:40px;margin:2px;object-fit:contain} .site-footer__col--stack{display:flex;flex-direction:column;gap:32px} .site-footer__head{margin:0 0 14px;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-foothead);line-height:1.1; text-transform:uppercase;color:var(--sky)} .site-footer__head--sm{margin:0;font-size:var(--t-foothead-sm)} .site-footer__col ul{display:flex;flex-direction:column;gap:10px} .site-footer a{color:var(--white);text-decoration:none} .site-footer a:hover{color:var(--sky)} .site-footer__col li a{font-size:var(--t-small)} .site-footer__nap{font-style:normal} .site-footer__contact{gap:16px} .site-footer__contact li{display:flex;gap:12px;align-items:flex-start;line-height:1.5} .site-footer__contact img{width:26px;height:26px;flex:none;object-fit:contain} .site-footer__contact strong{font-weight:var(--w-semi)} .site-footer__directions{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;padding:0 24px; border-radius:var(--r-pill);background:var(--blue);font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-foot-btn)} .site-footer a.site-footer__directions:hover{background:var(--blue-deep);color:var(--white)} .site-footer__map{display:block;width:100%;aspect-ratio:4/3;height:auto;margin-top:16px;border:2px solid var(--map-line); border-radius:var(--r-map);background:var(--navy-deep)} .site-footer__bar{margin-top:56px;background:var(--blue);font-size:var(--t-foot-bar)} .site-footer__bar-inner{max-width:var(--chrome-max);margin-inline:auto;padding:16px var(--chrome-gutter); display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px} .site-footer__bar p{margin:0} .site-footer__bar ul{display:flex;flex-wrap:wrap;gap:6px 20px} .site-footer__bar a{display:inline-block;padding-block:4px} .site-footer__bar a:hover{color:var(--white);text-decoration:underline} .site-footer a:focus-visible{outline-color:var(--white)} @media (max-width:1024px){ .site-footer__brand{grid-column:1 / -1} } @media (max-width:767px){ .site-footer{padding-top:48px} .site-footer__brand{max-width:none} .site-footer__bar{margin-top:44px} } /* ---- inner-page banner: photo under a 70% ink veil ---------------------- */ .page-banner{position:relative;overflow:hidden;background:var(--steel);color:var(--white); padding-block:120px;text-align:center} .page-banner__photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} .page-banner::before{content:"";position:absolute;inset:0;z-index:1;background:var(--ink);opacity:.7} .page-banner__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px} .page-banner__title{font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-banner); line-height:var(--lh-display);text-transform:uppercase;text-wrap:balance} .breadcrumbs{font-size:var(--t-small)} .breadcrumbs a{color:var(--sky);text-decoration:none} .breadcrumbs a:hover{text-decoration:underline} @media (max-width:1024px){ .page-banner{padding-block:100px} } @media (max-width:767px){ .page-banner{padding-block:80px} } /* ---- washes at 30 and 330 degrees ("Meet Jimmy" and the About sections) -- */ .wash--meet{background:linear-gradient(30deg,var(--wash-meet) 10%,var(--white) 30%)} .wash--meet-reverse{background:linear-gradient(330deg,var(--wash-meet) 10%,var(--white) 30%)} /* ---- split: text beside a picture --------------------------------------- */ .split{padding-block:var(--section-pad)} .split__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start} .split--media-left .split__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} .split--media-left .split__media{order:-1} .split__media{display:flex;justify-content:center} .split__media > img{width:100%;max-width:520px} .split__body > p{margin:0 0 18px} .split__body .btn{margin-top:8px} .split__label{margin:24px 0 10px;font-weight:700} .split__quote{margin:18px 0;font-size:var(--t-body)} .split__pair{display:flex;gap:18px;margin:8px 0 24px} .split__pair img{width:min(200px,45%);aspect-ratio:1;border-radius:50%;object-fit:cover} .split__signature{width:198px;margin:10px 0 24px} @media (max-width:1024px){ .split__grid,.split--media-left .split__grid{grid-template-columns:1fr;gap:32px} .split__media{order:-1} .split__media > img{max-width:440px} .split__pair{justify-content:center} /* board 58 #11 */ } /* ---- pictures that run to the edge of the screen on desktop, as live ---- */ .split,.meet{overflow-x:clip} /* 100vw counts the scrollbar; never let it scroll sideways */ @media (min-width:1025px){ .bleed-left,.bleed-right{--to-edge:calc((100vw - min(100vw, var(--wrap) + 2 * var(--gutter))) / 2 + var(--gutter))} .bleed-left{margin-left:calc(-1 * var(--to-edge));justify-content:flex-start} .bleed-right{margin-right:calc(-1 * var(--to-edge));justify-content:flex-end} .bleed-left > img,.bleed-right > img{max-width:none;width:min(100%, 640px)} .meet__media.bleed-left > img{width:100%} /* live: Jimmy's photo is the full left half */ } /* ---- sticky media: on desktop, a photo (or video, or form) beside longer copy holds just under the header while the copy scrolls past, then leaves with its section. Live does this with Elementor's "sticky within parent" on 14 pages; here it is one rule, so every two-column section behaves the same. Phones and tablets stack the columns, so nothing sticks there. ---- */ @media (min-width:1025px){ .split__media,.meet__media,.academy__media,.feature-card__photo,.path__photo,.legal__logo,.faq-split__col > .faq-split__stick{ position:sticky;top:var(--stick-top);align-self:start} } /* ---- arrow list --------------------------------------------------------- */ .arrow-list{display:grid;gap:12px;margin:0 0 20px} .arrow-list li{position:relative;padding-left:30px;font-size:var(--t-card);line-height:1.45} .arrow-list li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;background:var(--blue); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-5.6-5.6L12 4l8 8-8 8-1.4-1.4 5.6-5.6H4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-5.6-5.6L12 4l8 8-8 8-1.4-1.4 5.6-5.6H4z'/%3E%3C/svg%3E") center/contain no-repeat} /* ---- circular photo that plays a video (tap to load) -------------------- */ .video-circle{position:relative;display:block;width:100%;max-width:520px;margin-inline:auto;border-radius:50%} .video-circle img{width:100%} .video-circle::after{content:"";position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E") 56% 50%/38px no-repeat; transition:transform .2s} .video-circle:hover::after{transform:scale(1.08)} /* ---- quote band on the blue photo --------------------------------------- */ .quote-band{position:relative;overflow:hidden;background:var(--blue);color:var(--white);text-align:center;padding-block:var(--section-pad)} .quote-band__photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} .quote-band .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px} .quote-band__quote{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-h2);line-height:var(--lh-display); text-transform:uppercase;text-wrap:balance;max-width:1000px} .quote-band__cite{font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-cardtitle);line-height:var(--lh-tight)} /* ---- show on tablets only / everywhere but tablets (as Elementor did) --- */ .only-tablet{display:none} @media (min-width:768px) and (max-width:1024px){ .only-tablet{display:block} .not-tablet{display:none} } /* ---- contact page: three ways to reach us -------------------------------- */ .contact-cards{padding-block:var(--section-pad);background:linear-gradient(90deg,var(--white) 60%,var(--wash-contact) 100%)} .contact-cards__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;text-align:center} .contact-card__icon{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 14px;border-radius:50%;background:var(--blue);color:var(--white)} .contact-card__icon svg{width:32px;height:32px;fill:currentColor} .contact-card__title{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-cardtitle);line-height:var(--lh-tight); text-transform:uppercase;color:var(--navy)} .contact-card__title a,.contact-card__value a{text-decoration:none} .contact-card__value{margin:4px 0 0;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-btn-lg);line-height:1.15;color:var(--navy)} .contact-card a:hover{color:var(--blue)} @media (max-width:767px){ .contact-cards__grid{grid-template-columns:1fr;gap:40px} } /* the contact page's form band: clients photo under deep navy, no map */ .contact-band--navy{background:var(--navy-deep)} .contact-band--navy::before{content:"";position:absolute;inset:0;z-index:1;background:var(--navy-deep);opacity:.9} .contact-band--navy > .wrap{z-index:2} .contact-band--navy .contact-band__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} @media (max-width:1024px){ .contact-band--navy .contact-band__grid{grid-template-columns:1fr} } .page-banner__buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} /* ---- FAQs: question form beside a filtered accordion -------------------- */ .faqs{padding-block:var(--section-pad)} .faqs__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:48px;align-items:start} .ask-card{background:var(--steel);color:var(--white);border-radius:var(--r-card);box-shadow:var(--sh-portrait); padding:30px 26px;text-align:center;position:sticky;top:var(--stick-top)} .ask-card__title{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-subhead);line-height:var(--lh-tight);margin-bottom:14px} .ask-card > p{margin:0 0 18px;font-size:var(--t-small);line-height:1.5} .faq-filter{border:0;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:10px 8px} .faq-filter__pill{position:relative;cursor:pointer} .faq-filter__pill input{position:absolute;opacity:0;width:1px;height:1px} .faq-filter__pill span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill); font-size:var(--t-btn);color:var(--steel)} .faq-filter__pill input:checked + span{background:var(--navy);color:var(--white)} .faq-filter__pill input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px} .faq__q{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0; font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-faq);line-height:1.2;color:var(--navy)} .faq__q::-webkit-details-marker{display:none} .faq__q::after{content:"";flex:none;width:22px;height:22px;border:2px solid var(--blue);border-radius:50%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23157EBF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 55% 50%/11px no-repeat;transition:transform .2s} .faq[open] .faq__q{color:var(--blue)} .faq[open] .faq__q::after{transform:rotate(90deg)} .faq__a{padding:4px 0 16px;font-size:var(--t-card);line-height:1.6} .faq__a p{margin:0 0 12px} .faq__a ul{list-style:disc;padding-left:22px;margin:0 0 12px} .faq[hidden]{display:none} @media (max-width:1024px){ .faqs__grid{grid-template-columns:1fr} .ask-card{position:static;max-width:420px;margin-inline:auto} .faqs__list{order:-1} } /* ---- reviews page: every review in full, masonry by CSS columns --------- */ .review-wall{padding-block:var(--section-pad)} .review-wall__list{column-count:3;column-gap:24px} .review-card--full{break-inside:avoid;margin-bottom:24px;display:flex} .review-card--full .review-card__text p{margin:0} .review-card--full .review-card__who{margin-top:0} @media (max-width:1024px){ .review-wall__list{column-count:2} } @media (max-width:767px){ .review-wall__list{column-count:1} } /* ---- practitioner directory --------------------------------------------- */ .practitioners{padding-block:var(--section-pad)} .practitioners--wash{background:var(--wash)} .practitioners__title{text-align:center;margin-bottom:48px} .pcard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .pcard{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center; background:var(--paper);border:var(--border-card);border-radius:var(--r-card);padding:30px 34px} .practitioners--wash .pcard{border-color:var(--paper)} .pcard__ribbon{position:absolute;top:-8px;left:-8px;width:200px;pointer-events:none} .pcard__photo{width:180px;height:180px;border-radius:50%;object-fit:cover;margin-bottom:18px} .pcard__name{font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-name);line-height:var(--lh-tight);color:var(--navy)} .pcard__place{margin:6px 0 18px;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-small);color:var(--navy)} .pcard__bio{font-size:var(--t-card);line-height:1.6} .pcard__bio p{margin:0 0 12px} .pcard__buttons{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:auto;padding-top:24px} .pcard__buttons .btn{min-width:180px} .disclaimer{padding-block:var(--section-pad);background:var(--wash)} /* as live (MarkUp #9) */ .disclaimer__inner p{font-size:var(--t-card);line-height:1.6;margin:0 0 16px} .disclaimer__inner .section-head__title{margin-bottom:24px} /* board 58 #1 */ @media (max-width:767px){ .pcard-grid{grid-template-columns:1fr} .pcard{padding:30px 22px} .pcard__ribbon{width:150px} } /* ========================================================================== Bluff Academy pages (Levels 1-3) ========================================================================== */ .wash--left-wide{background:linear-gradient(90deg,var(--wash-edge) 0%,var(--white) 70%)} .wash--right-wide{background:linear-gradient(270deg,var(--wash-edge) 0%,var(--white) 70%)} @media (min-width:1201px){ .hide-wide{display:none} } /* Elementor "hidden on desktop" (the live kit's laptop step ends at 1200) */ /* hero: dark photo, kicker, title with an accent word, two buttons */ .academy-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--white);text-align:center;padding-block:90px 260px} .academy-hero__photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} .academy-hero__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px} .academy-hero__kicker{margin:0;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-acad-kicker);line-height:1.1;max-width:720px;text-wrap:balance} /* live: the kicker 720px, the title the full column */ .academy-hero__title{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-acad-title);line-height:.95;text-transform:uppercase; text-wrap:balance} .academy-hero__title span{color:var(--sky)} .academy-hero .hero__buttons{justify-content:center;margin-top:14px} .academy-hero--lg .academy-hero__kicker{font-size:var(--t-acad-kicker-lg)} .academy-hero--lg .academy-hero__title{font-size:var(--t-acad-title-lg);font-weight:var(--w-black)} @media (max-width:767px){ .academy-hero{padding-block:56px 150px} } /* the video card that overlaps the hero's lower edge */ .video-feature{position:relative;margin-top:-220px} .video-feature__link{position:relative;display:block;max-width:1000px;margin-inline:auto;border-radius:var(--r-card);overflow:hidden; border:4px solid var(--blue);box-shadow:var(--sh-portrait)} .video-feature__link img{width:100%;aspect-ratio:16/9;object-fit:cover} .video-feature__link::after,.video-card__play::after{content:"";position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E") 56% 50%/38px no-repeat; transition:transform .2s} .video-feature__link:hover::after,.video-card__play:hover::after{transform:scale(1.08)} @media (max-width:767px){ .video-feature{margin-top:-120px} .video-feature__link::after{width:64px;height:64px;background-size:28px} } /* intro copy: centered, long-form */ .intro{padding-block:var(--section-pad);text-align:center} .intro__title{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-intro);line-height:var(--lh-display); text-transform:uppercase;color:var(--steel);text-wrap:balance} .intro__lede{margin:18px 0 0;font-weight:var(--w-semi);font-size:var(--t-body);color:var(--navy)} @media (min-width:1025px){ .intro__lede,.intro p:not([class]){max-width:80%;margin-inline:auto} } /* shorter lines (MarkUp #11-13) */ .intro__title--xl{font-size:var(--t-intro-xl);font-weight:var(--w-black)} /* Levels 2 and 3, as live */ .intro__facts{margin:18px 0 22px;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-facts);line-height:1.1;color:var(--navy);text-wrap:balance} .intro p:not([class]){margin-block:0 14px;font-size:var(--t-card);line-height:1.6} /* block only: a shorthand here undid the centering above (board 58 #2-4, #8, #9) */ .intro__quote{margin:22px 0 28px;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-btn-lg);line-height:1.15; text-transform:uppercase;color:var(--navy)} .btn--caps{text-transform:uppercase} /* before/after pairs in a carousel: three across on desktop */ .ba-carousel{padding-block:var(--section-pad)} .ba-carousel__box{position:relative} .js .ba-carousel__box{padding-inline:56px} .ba-carousel__track{gap:34px} .ba-carousel__track > .ba{flex:0 0 calc((100% - 68px) / 3)} @media (max-width:1024px){ .ba-carousel__track > .ba{flex-basis:calc((100% - 34px) / 2)} } @media (max-width:767px){ .ba-carousel__track > .ba{flex-basis:100%} .js .ba-carousel__box{padding-inline:40px} } /* the results: review carousel, then screenshots of written reviews */ .results{padding-block:var(--section-pad)} .results .review-carousel{margin-bottom:48px} /* phones: the arrows hang 56px below the cards; leave them 32px before what follows (board 58 #10) */ @media (max-width:767px){ .js .review-carousel{margin-bottom:88px} } .shots{position:relative} .shots__track{gap:16px} .shots__track > li{flex:0 0 calc((100% - 48px) / 4)} .shots__track img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-field);box-shadow:var(--sh-card)} @media (max-width:1024px){ .shots__track > li{flex-basis:calc((100% - 16px) / 2)} } @media (max-width:767px){ .shots__track > li{flex-basis:80%} } /* upcoming workshops beside the video card */ .workshops{padding-block:var(--section-pad)} .workshops__grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:48px;align-items:start} .workshop{padding:22px 0;border-bottom:2px solid var(--line)} .workshop__title{font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-h3);line-height:1.1;color:var(--navy)} .workshop__place{margin:8px 0 12px;font-size:var(--t-small)} .workshop__sold{margin:0;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-h2-label);line-height:1; text-transform:uppercase;color:var(--blue)} .video-card{position:sticky;top:var(--stick-top);background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-card);overflow:hidden} .video-card__play{position:relative;display:block} .video-card__play img{width:100%;aspect-ratio:9/13;object-fit:cover} .video-card__who{display:flex;align-items:center;gap:12px;padding:14px 18px;font-weight:var(--w-semi);text-transform:uppercase;color:var(--navy);font-size:var(--t-small)} .video-card__who img{width:44px;height:44px;border-radius:50%;object-fit:cover} @media (max-width:1024px){ .workshops__grid{grid-template-columns:1fr} .video-card{position:static;max-width:420px;margin-inline:auto} } /* icon cards: who it's for, what you'll learn */ .icon-cards{padding-block:var(--section-pad)} .icon-cards__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 20px;text-align:center} .icon-cards__grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px} /* live: the four "who it's for" cards go two across, 40px apart, at 1200 and below (board 58 #17) */ @media (max-width:1200px){ .icon-cards__grid:not(.icon-cards__grid--3){grid-template-columns:repeat(2,minmax(0,1fr));gap:40px} } .icon-card img{width:140px;margin:0 auto 18px} .icon-card__title{font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-label);line-height:1.05;text-transform:uppercase;color:var(--navy);margin-bottom:10px} .icon-cards__grid--3 .icon-card__title{font-size:var(--t-learn-title)} .icon-card p{margin:0;font-size:var(--t-card);line-height:1.6} @media (max-width:1024px){ .icon-cards__grid,.icon-cards__grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:767px){ .icon-cards__grid,.icon-cards__grid--3{grid-template-columns:1fr} } /* your path forward */ .path{padding-block:var(--section-pad)} .path__lede{max-width:900px;margin:0 auto 40px;text-align:center;font-size:var(--t-card);line-height:1.6} .path__grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:48px;align-items:start} .path__tiers{list-style:none;margin:0;padding:0} .tier{padding:12px 0 18px;border-bottom:2px solid var(--line)} .tier__stage{margin:0;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-h2-label);line-height:.9;text-transform:uppercase;color:var(--blue)} .tier__name{margin-top:20px;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-h3);line-height:.95;color:var(--navy)} .tier p:not([class]){margin:8px 0 0;font-weight:var(--w-semi);font-size:var(--t-card);line-height:1.4;color:var(--navy)} .path__photo{width:100%;border-radius:var(--r-card);border:2px solid var(--line)} @media (max-width:1024px){ .path__grid{grid-template-columns:1fr} .path__photo{max-width:420px;margin-inline:auto} } /* FAQ beside the contact form, over one photo */ .faq-split{position:relative;overflow:clip;color:var(--white)} /* clip, not hidden: hidden would stop the form sticking */ .faq-split__photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} .faq-split__grid{position:relative;display:grid;grid-template-columns:1fr 1fr} .faq-split__col{position:relative;padding:var(--section-pad) max(var(--gutter), calc((100vw - var(--wrap)) / 2)) } .faq-split__col > *{position:relative} .faq-split__col::before{content:"";position:absolute;inset:0;opacity:.9} .faq-split__col--faq::before{background:var(--navy)} .faq-split__col--form::before{background:var(--blue);opacity:.85} .faq-split--tinted .faq-split__col::before{display:none} /* its photo carries the navy and blue itself (MarkUp #18) */ .faq-split__col--faq{padding-right:48px} .faq-split__col--form{padding-left:48px} .faq-split .section-head__title,.faq-split .section-head__eyebrow{color:var(--white)} .faq-split__col--faq .section-head__eyebrow{color:var(--steel)} .faq-split .level__title{color:var(--white)} .faq-split .level[open] .level__title{color:var(--sky)} .faq-split .level__title::after{border-color:var(--white);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .faq-split .level__panel p{font-size:var(--t-card)} .faq-split .level__panel a{color:var(--white)} .faq-split .contact-band__lede{text-align:center} @media (max-width:1024px){ .faq-split__grid{grid-template-columns:1fr} .faq-split__col--faq,.faq-split__col--form{padding-inline:var(--gutter)} } /* photo gallery: five across, edge to edge */ .photo-gallery{padding-top:var(--section-pad)} .photo-gallery__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))} .photo-gallery__grid a{display:block;overflow:hidden} .photo-gallery__grid img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .3s} .photo-gallery__grid a:hover img{transform:scale(1.05)} @media (max-width:767px){ .photo-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (prefers-reduced-motion:reduce){ .photo-gallery__grid img{transition:none} } /* long-form copy from WordPress, kept as its own tags */ .rich p{margin:0 0 12px;font-size:var(--t-card);line-height:1.6} .rich ul{list-style:disc;padding-left:22px;margin:0 0 14px;font-size:var(--t-card);line-height:1.6} .rich h3{margin:10px 0 12px;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-h3);line-height:1.05;color:var(--navy)} .rich h5{margin:18px 0 10px;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-name);line-height:1.1;text-transform:uppercase;color:var(--navy)} .rich--center{text-align:center;max-width:1000px;margin:0 auto 40px} .intro .rich p{margin-bottom:10px} .intro .rich + .intro__title{margin-top:28px} .academy-hero__note p{margin:6px 0 0;font-size:var(--t-small)} /* program: the blocks of a certification or apprenticeship, beside Jimmy's video */ .program{padding-block:var(--section-pad)} .program__grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:48px;align-items:start} .program__title{margin:6px 0 10px;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-h3);line-height:1.05;color:var(--navy)} .program__lede{margin:0 0 14px;font-weight:var(--w-semi);font-size:var(--t-small);color:var(--navy)} .program__rule{border:0;border-top:2px solid var(--line);margin:28px 0} .program__body .btn{margin-top:6px} @media (max-width:1024px){ .program__grid{grid-template-columns:1fr} } /* location */ .location{padding-block:var(--section-pad);text-align:center} .location__pin{display:inline-block;margin-bottom:18px} .location__pin img{width:120px} .location__address{margin:0;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-name);line-height:1.1;text-transform:uppercase;color:var(--navy)} .location__address a{text-decoration:none} .location__address a:hover{color:var(--blue)} /* the FAQ band on Levels 2 and 3: one navy veil over the clinic photo */ .faq-split--single::before{content:"";position:absolute;inset:0;z-index:1;background:var(--navy);opacity:.7} .faq-split__grid{z-index:2} .faq-split--single .faq-split__col::before{content:none} .faq-split--single .btn--submit{box-shadow:inset 0 0 0 2px var(--white)} .split .rich h3,.split .rich h5{text-align:left} /* closing call to action */ .closing{background:var(--wash);text-align:center;padding-block:var(--section-pad)} .closing__line{font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-name);line-height:1.1;text-transform:uppercase;color:var(--navy); max-width:1000px;margin:0 auto 12px;text-wrap:balance} .closing .btn{margin:24px 0 18px} .closing p:not([class]){margin:0;font-size:var(--t-card)} /* ========================================================================== Service, condition and service-area pages (generated from templates) ========================================================================== */ .page-banner__title--sm{font-size:var(--t-tpl-title)} .article{padding-block:var(--section-pad)} .article__grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:56px;align-items:start} .article__h1{margin-bottom:22px;font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-tpl-title);line-height:var(--lh-display); text-transform:uppercase;color:var(--steel);text-wrap:balance} .prose p{margin:0 0 14px;font-size:var(--t-card);line-height:1.6} .prose ul,.prose ol{padding-left:22px;margin:0 0 16px;font-size:var(--t-card);line-height:1.6} .prose ul{list-style:disc} .prose li{margin-bottom:4px} .prose a{color:var(--steel);text-decoration:none} .prose a:hover{color:var(--navy);text-decoration:underline} .prose h2{margin:30px 0 12px;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-cardtitle);line-height:1;text-transform:uppercase;color:var(--navy)} .prose h3{margin:24px 0 10px;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-btn-lg);line-height:1.1;color:var(--navy)} .prose h4{margin:20px 0 6px;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-btn);line-height:1.15;text-transform:uppercase;color:var(--navy)} .prose h2[id],.prose h3[id]{scroll-margin-top:calc(var(--header-stuck) + 20px)} .article__side{position:sticky;top:var(--stick-top);display:flex;flex-direction:column;gap:20px} .toc{border:1px solid var(--steel);border-radius:var(--r-field);background:var(--wash)} .toc__title{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:10px 14px; font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-toc);line-height:1.1;text-transform:uppercase;color:var(--navy)} .toc__title::-webkit-details-marker{display:none} .toc__title::after{content:"";flex:none;width:10px;height:10px;border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px);transition:transform .2s} .toc[open] .toc__title::after{transform:rotate(-135deg)} .toc__list{margin:0;padding:0 14px 14px 32px;font-size:var(--t-small);line-height:1.4} .toc__list li{margin:6px 0} .toc__list .toc__h3{margin-left:14px;list-style:circle} .toc__list a{color:var(--navy);text-decoration:none} .toc__list a:hover{color:var(--blue)} .article__photo{width:100%;border-radius:var(--r-field);box-shadow:var(--sh-card)} .side-list__title{font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-btn);text-transform:uppercase;color:var(--navy)} .side-list{display:grid;gap:8px;margin-top:-6px} .side-list li{position:relative;padding-left:20px} .side-list li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--blue)} .side-list a{font-size:var(--t-small);color:var(--steel);text-decoration:none} .side-list a:hover,.side-list a[aria-current]{color:var(--navy)} @media (max-width:1024px){ .article__grid{grid-template-columns:1fr} .article__side{position:static} } .healing-band{position:relative;overflow:hidden;background:var(--navy);color:var(--white);text-align:center;padding-block:var(--section-pad)} .healing-band__photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} .healing-band::before{content:"";position:absolute;inset:0;z-index:1;background:var(--navy);opacity:.5} .healing-band__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px} .healing-band__title{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-tpl-title);line-height:var(--lh-display);text-transform:uppercase;text-wrap:balance} .healing-band__contact{display:grid;gap:10px} .healing-band__contact li{display:flex;align-items:center;justify-content:center;gap:10px} .healing-band__contact img{width:28px} /* phones: the address wraps, which left its icon at the edge and the text off center; stack each icon over its line */ @media (max-width:767px){ .healing-band__contact li{flex-direction:column;gap:6px} } .healing-band__contact a{color:var(--white);text-decoration:none} .post-cards{padding-block:var(--section-pad)} .post-cards__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px} .post-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--paper);border:var(--border-card); border-radius:var(--r-card);overflow:hidden;padding-bottom:24px} .post-card__photo{width:100%;aspect-ratio:1;object-fit:cover} .post-card__title{margin:18px 18px 10px;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-btn-lg);line-height:1.05;text-transform:uppercase;color:var(--navy)} .post-card p{margin:0 22px 18px;font-size:var(--t-card);line-height:1.6} .post-card .btn{margin-top:auto} @media (max-width:1024px){ .post-cards__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:767px){ .post-cards__grid{grid-template-columns:1fr} } /* ---- video lightbox (made by site.js) ----------------------------------- */ .lightbox{width:min(960px,92vw);padding:0;border:0;background:var(--ink);border-radius:var(--r-field)} .lightbox::backdrop{background:var(--scrim-footer)} .lightbox__frame{display:block;width:100%;aspect-ratio:16/9;border:0} .lightbox__image{display:block;width:100%;height:auto;max-height:85vh;object-fit:contain;background:var(--ink)} .lightbox__close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%; background:var(--white);color:var(--navy);font-size:var(--t-btn-lg);line-height:1;cursor:pointer} /* ---- legal pages: terms, privacy, ADA, site credits, site map ---- */ .page-banner__photo--right{object-position:right center} .legal{padding-block:var(--section-pad)} .prose--legal p,.prose--legal ul,.prose--legal ol{margin:0 0 14px;font-size:var(--t-body);line-height:var(--lh-body)} .prose--legal ul{margin-top:10px;padding-left:40px} .prose--legal ul ul{list-style:circle} .prose--legal h2,.prose--legal h3,.prose--legal h4{margin:30px 0 10px;font-weight:var(--w-bold);line-height:.9;text-transform:uppercase} .prose--legal h2{font-size:var(--t-legal-h2)} .prose--legal h3{font-size:var(--t-legal-h3)} .prose--legal h4{font-family:var(--f-cond);font-size:var(--t-legal-h4)} .prose--legal > :first-child{margin-top:0} .legal__note{max-width:calc(570px + 2 * var(--gutter));text-align:center} .legal__note p{margin:0;font-size:var(--t-body);line-height:var(--lh-body)} .legal__note p a{color:var(--steel)} .legal__title{margin:8px 0 16px;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-h2);line-height:.9; text-transform:uppercase;color:var(--navy)} .legal__credits{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start} .legal__logo{justify-self:end;width:100%;max-width:500px;height:auto} .sitemap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px} .sitemap__title{margin:0 0 20px;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-eyebrow);line-height:1; text-transform:uppercase;color:var(--navy)} .sitemap ul{display:grid;gap:20px;line-height:1.2} .sitemap a{font-size:var(--t-body);font-weight:var(--w-semi);line-height:1.2;color:var(--steel);text-decoration:none} .sitemap a:hover{color:var(--navy);text-decoration:underline} .sitemap__sub{display:grid;gap:8px;margin:8px 0 0 14px;padding-left:12px;border-left:2px solid var(--line)} /* an area's own article */ .sitemap .sitemap__sub a{font-size:var(--t-small);font-weight:400;color:var(--ink)} @media (max-width:1024px){ .sitemap{grid-template-columns:repeat(2,1fr);row-gap:50px} } @media (max-width:767px){ .legal__credits{grid-template-columns:1fr;gap:30px} .legal__logo{justify-self:center} .prose--legal ul{padding-left:24px} .sitemap{grid-template-columns:1fr;row-gap:40px} } /* ---- booking pages: /jimmy-bluff/, /apprentices/ and the apprentice profiles ---- */ .cancellation{background:var(--wash);padding-block:var(--section-pad)} .cancellation__title{margin-bottom:20px;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-h2); line-height:.9;text-transform:uppercase;color:var(--navy)} .arrow-list--lg{gap:20px;margin:0} .arrow-list--lg li{font-size:var(--t-body);line-height:var(--lh-body)} .arrow-list--lg li::before{top:.3em} .arrow-list a{color:var(--navy);text-decoration:none} .arrow-list a:hover{text-decoration:underline} .apprentices{padding-block:var(--section-pad)} .acard-grid{display:grid;grid-template-columns:repeat(auto-fit,336px);justify-content:center;gap:20px} .acard{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px; background:var(--white);border:var(--border-card);border-radius:var(--r-card)} .acard__photo{width:180px;height:180px;border-radius:50%;object-fit:cover;margin-bottom:26px} .acard__name{margin-bottom:16px;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-name);line-height:var(--lh-tight);color:var(--navy)} .acard__bio{margin:0;font-size:var(--t-card-sm);line-height:var(--lh-card)} /* live, these two buttons are too wide for the card and each label breaks over two lines; 20px side padding lets them sit side by side as the design meant */ .acard__buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:auto;padding-top:20px} .acard__buttons .btn{padding-inline:20px} .profile{padding-block:var(--section-pad)} .profile__grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} .profile__body p{margin:0 0 14px;font-size:var(--t-body);line-height:var(--lh-body)} .profile__body .btn{margin:12px 0 26px} .profile__offer-title{margin:8px 0 16px;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-subhead); line-height:1;text-transform:uppercase;color:var(--navy)} .profile__photo{width:100%;max-width:551px;aspect-ratio:1;border-radius:50%;object-fit:cover;justify-self:end} .split__grid--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:106px} .split__round{width:100%;max-width:551px;border-radius:50%} .section-head--tight{margin-bottom:10px} .split__body > p{font-size:var(--t-body);line-height:var(--lh-body)} .book-with{padding-block:var(--section-pad);text-align:center} .book-with__inner{display:flex;flex-direction:column;align-items:center;max-width:calc(807px + 2 * var(--gutter))} .book-with__lead{max-width:680px;margin:0 0 30px;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-subhead); line-height:1;text-transform:uppercase;color:var(--navy)} .book-with__lead a{color:var(--steel);text-decoration:none} .book-with__lead a:hover{color:var(--blue);text-decoration:underline} .book-with__title{max-width:560px;margin-bottom:20px;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-h2); line-height:.9;text-transform:uppercase;color:var(--steel);text-wrap:balance} .book-with p:not([class]){margin:0 0 30px;font-size:var(--t-body);line-height:var(--lh-body)} .book-with p a{color:var(--steel);text-decoration:none} .book-with p a:hover{text-decoration:underline} @media (max-width:1024px){ .split__grid--even{grid-template-columns:1fr;gap:32px} .split__round{max-width:440px} } @media (max-width:767px){ .profile__grid{grid-template-columns:1fr} .profile__photo{justify-self:center} } /* ---- gallery page: filter pills over a masonry of photos ---- */ .visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .masonry-gallery{padding-block:var(--section-pad)} .pill-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 40px;padding:0;border:0} .pill-filter__pill{position:relative;cursor:pointer} .pill-filter__pill input{position:absolute;opacity:0;width:1px;height:1px} .pill-filter__pill span{display:inline-flex;align-items:center;min-height:54px;padding:0 38px;border-radius:var(--r-pill); background:var(--wash);font-weight:var(--w-semi);font-size:var(--t-btn);color:var(--navy)} .pill-filter__pill input:checked + span{background:var(--steel);color:var(--white)} .pill-filter__pill input:focus-visible + span{outline:2px solid var(--navy);outline-offset:2px} .masonry-gallery__grid{columns:5;column-gap:0} .masonry-gallery__grid li{break-inside:avoid} .masonry-gallery__grid a{display:block;overflow:hidden} .masonry-gallery__grid img{display:block;width:100%;height:auto;transition:transform .3s} .masonry-gallery__grid a:hover img{transform:scale(1.05)} @media (max-width:1024px){ .masonry-gallery__grid{columns:3} } @media (max-width:767px){ .masonry-gallery__grid{columns:2} .pill-filter__pill span{padding:0 24px} } /* ---- video testimonials: poster frames that open the player on tap ---- */ .video-wall{padding-block:var(--section-pad)} .video-wall__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .video-tile{position:relative;display:block;overflow:hidden;background:var(--ink)} .video-tile img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .3s} .video-tile::after{content:"";position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E") 56% 50%/30px no-repeat; transition:transform .2s} .video-tile:hover img{transform:scale(1.04)} .video-tile:hover::after{transform:scale(1.08)} .video-tile:focus-visible{outline:3px solid var(--navy);outline-offset:3px} @media (max-width:1024px){ .video-wall__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:767px){ .video-wall__grid{grid-template-columns:1fr} } /* ---- pages with no header or footer (chrome: none) ---- */ .ghl-page{min-height:100vh;background:var(--blue)} .ghl-form{display:block;width:100%;border:0} .thanks{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px; padding:40px var(--gutter);text-align:center} .thanks__logo img{width:250px;height:auto} .thanks__title{font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-banner);line-height:var(--lh-display); text-transform:uppercase;color:var(--steel)} .thanks p{max-width:570px;margin:0 0 16px;font-size:var(--t-body);line-height:var(--lh-body)} /* ---- service areas: the hub and each area (tools/gen_areas.py), after Superior Carpet's city pages (Ryan's ticket, 19 Oct 2026) ---- */ .area-hub{padding-block:var(--section-pad)} .area-hub__lede{max-width:760px;margin:-16px auto 40px;text-align:center;font-size:var(--t-body);line-height:var(--lh-body)} .area-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .area-card{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;padding:24px 56px 24px 24px; background:var(--paper);border:var(--border-card);border-radius:var(--r-field);text-decoration:none; transition:transform .2s ease,box-shadow .2s ease,border-color .2s} .area-card:hover,.area-card:focus-visible{transform:translateY(-4px);box-shadow:var(--sh-card);border-color:var(--blue)} .area-card__name{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-btn-lg);line-height:1;text-transform:uppercase;color:var(--navy)} .area-card__meta{font-size:var(--t-small);color:var(--ink)} .area-card__count{font-weight:var(--w-semi);font-size:var(--t-small);color:var(--steel)} .area-card__arrow{position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:var(--t-btn);color:var(--blue)} @media (max-width:1024px){ .area-cards{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:767px){ .area-cards{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .area-card{transition:none} .area-card:hover{transform:none} } .area-intro{padding-block:var(--section-pad) 0} .area-intro__inner{max-width:calc(900px + 2 * var(--gutter))} .area-intro__inner p{margin:0 0 16px;font-size:var(--t-body);line-height:var(--lh-body)} .area-intro__more{display:inline-block;margin-top:6px;padding-bottom:2px;border-bottom:2px solid var(--blue); font-weight:var(--w-semi);font-size:var(--t-btn-sm);color:var(--navy);text-decoration:none} .area-intro__more:hover{color:var(--blue)} .area-services .post-card__title{min-height:2em} .area-visit{padding-top:var(--section-pad)} .area-visit .section-head{margin-bottom:16px} .area-visit__lede{max-width:calc(760px + 2 * var(--gutter));margin:0 auto;text-align:center;font-size:var(--t-body);line-height:var(--lh-body)} .area-visit__lede a{color:var(--steel)} .area-visit + .contact-cards{background:none;padding-top:40px} .area-others{padding-block:0 var(--section-pad);text-align:center} .area-others__title{margin-bottom:20px;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-cardtitle);line-height:1; text-transform:uppercase;color:var(--navy)} .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:24px} .chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1.5px solid var(--line);border-radius:var(--r-pill); font-weight:var(--w-semi);font-size:var(--t-small);color:var(--navy);text-decoration:none;transition:background-color .15s,color .15s,border-color .15s} .chips a:hover,.chips a:focus-visible{background:var(--navy);border-color:var(--navy);color:var(--white)} /* ---- /what-is-amr.../, bare pages ---- */ h3.split__label{font-family:var(--f-body);font-size:var(--t-body);line-height:var(--lh-body)} .plain-page{padding:30px 0 20px} .plain-page__title{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-banner);line-height:var(--lh-display); text-transform:uppercase;color:var(--steel)} .plain-page p{margin:14px 0 0;font-size:var(--t-small)} .page-banner__title--long{font-size:var(--t-banner-long)} /* Words a banner title must not split (Wil, 25 Oct 2026: "AMR Practitioner should be in one line"); paired with --long, whose size keeps the phrase inside a 360px screen. */ .page-banner__keep{white-space:nowrap} .not-found__links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:28px 0} .thanks__title--sm{font-size:var(--t-h2-sm)} /* ---- the October 2026 content pages (tools/import_content.py) --------------- A [placeholder] from the docs shows marked so nobody mistakes it for copy. The pages themselves are in Ryan's long template (the end of this file). */ .prose a[target="_blank"]::after{content:"\2197";font-size:.8em;margin-left:2px} /* a citation opens in a new tab */ mark.todo{background:var(--todo);color:var(--ink);padding:0 4px;border-radius:4px;font-weight:var(--w-semi)} /* ---- images that open larger (MarkUp #14, #19): an expand icon on hover ----- */ .zoomable{position:relative;display:block;overflow:hidden;border-radius:var(--r-field)} .zoomable::after{content:"";position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;pointer-events:none; background:var(--scrim-zoom) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/18px no-repeat; opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s} .zoomable:hover::after,.zoomable:focus-visible::after{opacity:1;transform:none} @media (hover:none){ .zoomable::after{opacity:.9;transform:none} } .photo-gallery__grid .zoomable{border-radius:0} /* ---- workshop titles: place, then the dates (MarkUp #15) ------------------- */ .workshop__city,.workshop__dates{display:block} /* ---- directory cards lift on hover (MarkUp #8) ---------------------------- */ .pcard{transition:transform .2s ease,box-shadow .2s ease} .pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-portrait)} /* ---- video previews (MarkUp #10, #16): muted and playing, with a pulsing play button; a click swaps in the full player with sound and controls ---- */ .video-preview__frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;pointer-events:none; opacity:0;transition:opacity .6s} .video-preview__frame.is-ready{opacity:1} .is-previewing::after{z-index:2;animation:play-pulse 1.8s ease-out infinite} @keyframes play-pulse{0%{box-shadow:0 0 0 0 var(--pulse)}70%{box-shadow:0 0 0 24px var(--pulse-end)}100%{box-shadow:0 0 0 0 var(--pulse-end)}} .is-playing{position:relative} .is-playing::after{display:none} .is-playing .video-preview__frame{pointer-events:auto;opacity:1} @media (prefers-reduced-motion:reduce){ .zoomable::after{transition:none} .pcard{transition:none} .pcard:hover{transform:none} .is-previewing::after{animation:none} } /* ---- site search (/search/, src/js/search.js) ---------------------------- */ /* A WORKING PAGE, NOT A LANDING PAGE (25 Oct 2026): a short teal banner, so the box is on screen at once on a phone. No photo, so no ink veil: the site's teal itself, which white passes on only as large text - hence the bold 19px trail. */ .search-banner{padding-block:56px} .search-banner::before{display:none} .search-banner .page-banner__title{font-size:var(--t-h2)} .search-banner .breadcrumbs{font-size:var(--t-announce);font-weight:var(--w-bold)} .search-banner .breadcrumbs a{color:var(--white);text-decoration:underline;text-underline-offset:3px} .search{padding-block:48px var(--section-pad)} .search__wrap{max-width:calc(900px + 2 * var(--gutter))} .search__label{display:block;margin:0 0 10px;font-size:var(--t-body);font-weight:var(--w-bold);color:var(--navy)} .search__row{display:flex;gap:10px} .search__input{flex:1;min-width:0;min-height:56px;padding:0 22px;font-family:var(--f-body);font-size:var(--t-field); color:var(--ink);background:var(--white);border:2px solid var(--line);border-radius:var(--r-pill)} .search__input::placeholder{color:var(--placeholder)} .search__input:focus{outline:2px solid var(--navy);outline-offset:2px;border-color:var(--steel)} .search__go{min-height:56px;padding-inline:30px} .search__status{margin:18px 0 0;font-size:var(--t-small);color:var(--ink)} .search__status:empty{display:none} .search__results{list-style:none;margin:8px 0 0;padding:0} .search-hit{padding:22px 0;border-bottom:1px solid var(--line)} .search-hit__link{display:flex;flex-direction:column;gap:6px;text-decoration:none;border-radius:6px} .search-hit__link:focus-visible{outline:2px solid var(--navy);outline-offset:4px} .search-hit__section{font-size:var(--t-small);font-weight:var(--w-semi);letter-spacing:.04em;text-transform:uppercase;color:var(--navy)} .search-hit__title{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-search-hit);line-height:1.1;color:var(--blue)} .search-hit__link:hover .search-hit__title{color:var(--navy);text-decoration:underline} .search-hit__desc{margin:8px 0 0;font-size:var(--t-small);line-height:1.5;color:var(--ink)} .search-hit mark{background:var(--line);color:inherit;border-radius:2px} .search__browse{margin-top:var(--section-pad)} .search__browse[hidden]{display:none} .search__browse-title{margin:0 auto 30px;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-label); text-transform:uppercase;color:var(--navy)} @media (max-width:767px){ .search-banner{padding-block:36px} .search{padding-top:28px} .search__row{flex-direction:column} .search__go{width:100%} } /* ---- mobile footer menu (src/partials/tabbar.html, src/js/tabbar.js) ----- */ /* TABLETS AND PHONES ONLY (Wil, 25 Oct 2026). Five items, each an icon and a word; Book in the middle, raised and filled, the one action. With script it shows once you have scrolled a little, until near the bottom; hidden, it is inert. Without script it is always there, and the page keeps room for it. */ .tabbar{display:none} @media (max-width:1024px){ .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); align-items:end;min-height:var(--tabbar-h);padding:0 4px env(safe-area-inset-bottom); background:var(--white);border-top:1px solid var(--wash);box-shadow:var(--sh-tabbar)} .js .tabbar{transform:translateY(calc(100% + 24px));visibility:hidden; transition:transform .28s cubic-bezier(.22,.7,.28,1),visibility 0s linear .28s} .js .tabbar.is-shown{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.22,.7,.28,1)} html:not(.js) body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))} .tabbar__item{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px; min-height:var(--tabbar-h);padding:8px 2px 9px;font-family:var(--f-body);font-size:var(--t-tab); font-weight:var(--w-bold);line-height:1.1;text-align:center;color:var(--navy);text-decoration:none; -webkit-tap-highlight-color:transparent} .tabbar__item svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .tabbar__item[aria-current]{color:var(--blue);box-shadow:inset 0 3px 0 var(--blue)} .tabbar__item:focus-visible{outline:2px solid var(--navy);outline-offset:-4px;border-radius:10px} .tabbar__item--book{position:relative} .tabbar__book{display:grid;place-items:center;width:54px;height:54px;margin-top:-22px;border-radius:50%; background:var(--blue);color:var(--white);box-shadow:var(--sh-tabbar-book);border:3px solid var(--white)} .tabbar__book svg{width:26px;height:26px} .tabbar__item--book:hover .tabbar__book{background:var(--navy)} } @media (max-width:1024px) and (prefers-reduced-motion:reduce){ .js .tabbar,.js .tabbar.is-shown{transition:none} } /* ---- the search panel, dropping from the header (src/js/search.js) ------- */ /* Wil, 25 Oct 2026: "a search bar come down from the header" that suggests pages as you type. Absolute under the sticky header, so it goes where the header goes; the best six pages, then "See all" to /search/. */ .search-panel{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--white); border-top:1px solid var(--wash);box-shadow:var(--sh-mega); opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease} .search-panel[hidden]{display:none} .search-panel.is-open{opacity:1;transform:none} .search-panel__inner{padding-block:16px 18px;max-width:calc(900px + 2 * var(--gutter))} .search-panel__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .search-panel__row{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 6px 0 16px; border:2px solid var(--line);border-radius:var(--r-pill);background:var(--white)} .search-panel__row:focus-within{border-color:var(--steel);outline:2px solid var(--navy);outline-offset:2px} .search-panel__icon{width:22px;height:22px;flex:none;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round} .search-panel__input{flex:1;min-width:0;min-height:48px;border:0;outline:0;background:transparent; font-family:var(--f-body);font-size:var(--t-field);color:var(--ink)} .search-panel__input::placeholder{color:var(--placeholder)} .search-panel__input::-webkit-search-cancel-button{display:none} .search-panel__close{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--pale); font-size:26px;line-height:1;color:var(--navy);cursor:pointer} .search-panel__close:focus-visible{outline:2px solid var(--navy);outline-offset:2px} .search-panel__status{margin:12px 4px 0;font-size:var(--t-small);color:var(--ink)} .search-panel__status:empty{display:none} .search-panel__list{list-style:none;margin:6px 0 0;padding:0} .search-panel__item + .search-panel__item{border-top:1px solid var(--line)} .search-panel__link{display:flex;flex-direction:column;gap:2px;padding:10px 8px;border-radius:10px;text-decoration:none} .search-panel__link:hover,.search-panel__link:focus-visible{background:var(--pale)} .search-panel__link:focus-visible{outline:2px solid var(--navy);outline-offset:-2px} .search-panel__section{font-size:var(--t-tag);font-weight:var(--w-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--navy)} .search-panel__title{font-size:var(--t-search-sug);font-weight:var(--w-semi);line-height:1.3;color:var(--ink)} .search-panel__title mark{background:var(--line);color:inherit;border-radius:2px} .search-panel__all{display:inline-flex;align-items:center;min-height:44px;margin:4px 8px 0;font-weight:var(--w-bold); font-size:var(--t-small);color:var(--blue)} @media (max-width:1024px){ .search-panel__inner{max-height:calc(100dvh - 140px);overflow-y:auto} } @media (prefers-reduced-motion:reduce){ .search-panel{transition:none} } /* ========================================================================== RYAN'S PAGES (29 Oct 2026). The home page first; the pieces below are shared by the pages rebuilt after it. Sizes come from the prototype (docs/design/ryan-2026-10-29/) and live in tokens.css. ========================================================================== */ .page-wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-gutter)} .chrome-wrap{width:100%;max-width:var(--chrome-max);margin-inline:auto;padding-inline:var(--chrome-gutter)} /* a section head: teal capitals over a big navy head */ .rd-head__kicker{margin:0;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-rd-kicker);line-height:1; text-transform:uppercase;color:var(--steel)} .rd-head__title{margin:6px 0 0;font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-rd-h2);line-height:.95; text-transform:uppercase;color:var(--navy);text-wrap:balance} .rd-head__title--md{font-size:var(--t-rd-h2-md);line-height:1} .rd-head__title--xl{font-size:var(--t-rd-h2-xl);line-height:.92} .rd-head--center{text-align:center} .rd-head__handle{display:inline-block;margin-top:6px;font-family:var(--f-cond);font-weight:var(--w-semi);font-style:italic; font-size:var(--t-handle);color:var(--blue);text-decoration:none} .rd-head__handle:hover{color:var(--blue-deep);text-decoration:underline} /* the Google reviews pill: on the hero (dark) and over the reviews (light) */ .g-pill{display:inline-flex;align-items:center;gap:12px;padding:5px 18px 5px 5px;border-radius:var(--r-pill); background:var(--paper);border:1.5px solid var(--line);box-shadow:var(--sh-pill);color:var(--navy);text-decoration:none; font-weight:var(--w-bold);font-size:var(--t-pill);margin-bottom:16px} .g-pill:hover{border-color:var(--blue)} .g-pill__g{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--mist)} .g-pill__g img{width:22px;height:22px} .g-pill__stars{color:var(--star-gold);letter-spacing:1px;font-size:15px} .g-pill--dark{background:var(--frost-pill);border-color:var(--frost-line);box-shadow:none;color:var(--white);margin-bottom:24px; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .g-pill--dark:hover{background:var(--frost-pill-hover);border-color:var(--white)} .g-pill--dark .g-pill__g{background:var(--white)} .g-pill--dark .g-pill__stars{color:var(--star)} /* a row of buttons, and Ryan's "Call now" block beside one */ .button-row--start{justify-content:flex-start;margin-top:20px} .call-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px;margin-top:44px} .call-now{display:flex;flex-direction:column;align-items:flex-start;gap:2px;color:var(--navy);text-decoration:none} .call-now:hover{color:var(--blue)} .call-now__k{display:flex;align-items:center;gap:8px;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-call-k); letter-spacing:.08em;text-transform:uppercase;color:var(--blue)} .call-now__k svg{width:18px;height:18px;fill:currentColor} .call-now__n{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-call);line-height:1} /* a tick list: blue checks drawn with a mask, so they take the text's color token */ .ticks{display:flex;flex-direction:column;gap:12px;margin-top:14px} .ticks li{display:flex;gap:12px;font-size:var(--t-copy-sm);line-height:1.55} .ticks li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;background:var(--blue); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} /* ---- the home hero: video under a left-to-right navy scrim, the whole head light blue ---- */ .hero--home{display:flex;align-items:center;min-height:calc(100svh - var(--header-h) - 52px);background:var(--navy-ink)} .hero--home .hero__scrim{background:linear-gradient(90deg,var(--scrim-hero-a) 0%,var(--scrim-hero-b) 55%,var(--scrim-hero-c) 100%)} .hero--home .hero__inner{padding-block:64px} .hero--home .hero__kicker{margin:0;font-weight:var(--w-semi);font-size:var(--t-hero-kicker);line-height:1.1} .hero--home .hero__title{margin:6px 0 0;font-weight:var(--w-black);font-size:var(--t-hero-title);line-height:.88;color:var(--sky)} .hero--home .hero__line{margin:16px 0 0;font-size:var(--t-hero-line);line-height:1.1} .hero--home .hero__buttons{gap:16px;margin-top:32px} @media (max-width:1024px){ .hero--home .hero__inner{padding-block:56px} } /* ---- what brings you in? ---- */ .needs{padding:16px 0 64px;background:var(--paper)} .needs__card{padding:clamp(22px,2.6vw,34px);border-radius:var(--r-panel);border-top:4px solid var(--sky);background:var(--paper); box-shadow:var(--sh-float);color:var(--navy)} .needs__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px} .needs__title{font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-needs);line-height:1;text-transform:uppercase} .needs__all{font-weight:var(--w-semi);color:var(--blue);text-decoration:none} .needs__all:hover{color:var(--blue-deep);text-decoration:underline} .needs__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} .chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 20px;border:1.5px solid var(--line);border-radius:var(--r-pill); background:var(--mist);font-weight:var(--w-semi);font-size:var(--t-small);line-height:1.2;color:var(--navy);text-decoration:none; transition:background-color .15s,border-color .15s,color .15s} .chip:hover{border-color:var(--blue);background:var(--paper);color:var(--blue)} .chip--solid{border-color:var(--blue);background:var(--blue);color:var(--white)} .chip--solid:hover{border-color:var(--blue-deep);background:var(--blue-deep);color:var(--white)} /* ---- meet Jimmy: a big circle photo that holds while the story scrolls ---- */ .meet{overflow-x:clip;padding:72px 0 96px;background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 45%,var(--wash-end) 100%)} .meet__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,5vw,72px);align-items:start; max-width:1440px;margin-inline:auto;padding-right:var(--page-gutter)} .meet__media{position:sticky;top:calc(var(--header-h) + 72px);height:min(calc(100vh - 220px),760px);min-height:320px} .meet__media::before{content:"";position:absolute;top:-2%;bottom:-2%;right:calc(3% - 14px);aspect-ratio:1;border-radius:50%; border:2px solid var(--ring-white);pointer-events:none} .meet__circle{position:absolute;top:0;bottom:0;right:3%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--wash)} .meet__circle img{width:100%;height:100%;object-fit:cover;object-position:center 18%} .meet__badge{position:absolute;right:0;bottom:6%;display:flex;align-items:center;gap:14px;margin:0;padding:16px 22px; border-radius:var(--r-tile);background:var(--paper);box-shadow:var(--sh-badge);font-size:var(--t-mega-hint);color:var(--muted)} .meet__badge b{display:block;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-badge);line-height:1.05; text-transform:uppercase;color:var(--navy)} .meet__badge-n{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--blue);color:var(--white); font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-badge-n)} .meet__body{max-width:640px;padding-top:24px} .meet__title{font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-meet-h2);line-height:.95;text-transform:uppercase;color:var(--navy)} .meet__role{margin:4px 0 0;font-family:var(--f-cond);font-weight:var(--w-semi);font-style:italic;font-size:var(--t-meet-role);line-height:1.15;color:var(--blue)} .meet__body > p:not([class]){margin:16px 0 0;font-size:var(--t-copy);line-height:1.7} .meet__used{margin-top:28px;padding:22px 24px;border:1px solid var(--line-soft);border-radius:var(--r-tile);background:var(--paper);box-shadow:var(--sh-soft)} .meet__used-title{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-tile-h);line-height:1.1;text-transform:uppercase;color:var(--navy)} .meet__quote{margin:32px 0 0;font-weight:var(--w-bold);font-style:italic;font-size:var(--t-meet-quote);line-height:1.45;color:var(--navy);text-wrap:pretty} .meet__signature{height:96px;width:auto;margin-top:24px} /* below 1320px (Ryan's): the photo stops holding and sits centered above the story */ @media (max-width:1319px){ .meet__media{position:relative;top:0;height:min(92vw,560px)} .meet__circle{right:calc(50% - min(46vw,280px))} .meet__media::before{right:calc(50% - min(46vw,280px) - 14px)} .meet__body{padding-left:var(--page-gutter)} } @media (max-width:699px){ .meet{padding-top:40px} .meet__badge{padding:12px 16px} } /* ---- benefits: six linked cards ---- */ .benefits{padding-block:var(--rd-pad);background:var(--paper)} .benefits__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;margin-top:44px} .benefit{display:grid;grid-template-rows:auto 1fr auto;height:100%;padding:26px;border:1px solid var(--line-soft);border-radius:var(--r-tile); background:var(--paper);box-shadow:var(--sh-soft);color:var(--ink);text-decoration:none;transition:transform .15s,border-color .15s} .benefit:hover{border-color:var(--blue);transform:translateY(-3px)} .benefit__head{display:flex;align-items:center;gap:16px;min-height:76px;padding-bottom:18px;border-bottom:1px solid var(--line-soft)} .benefit__icon{flex:none;width:64px;height:64px;object-fit:contain;padding:6px;border-radius:14px;background:var(--mist)} .benefit__title{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-tile-h);line-height:1.05;letter-spacing:.01em; text-transform:uppercase;color:var(--navy);text-wrap:balance} .benefit__text{margin-top:16px;font-size:var(--t-card-text);line-height:1.6;color:var(--muted);text-wrap:pretty} .benefit__more{margin-top:16px;font-weight:var(--w-semi);color:var(--blue)} @media (prefers-reduced-motion:reduce){ .benefit{transition:none} .benefit:hover{transform:none} } /* ---- the Bluff Academy: levels beside a circle photo that follows the open one ---- */ .acad{overflow-x:clip;padding-block:var(--rd-pad);background:linear-gradient(100deg,var(--paper) 0%,var(--paper) 38%,var(--ice) 62%,var(--wash-edge) 100%)} .acad__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(32px,5vw,80px);align-items:start} .acad__levels{display:flex;flex-direction:column;margin-top:clamp(32px,4vw,56px)} .acad-level{padding:18px 0;border-bottom:1px solid var(--line)} .acad-level__title{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px; font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-level);line-height:1;color:var(--navy);transition:color .2s} .acad-level__title::-webkit-details-marker{display:none} .acad-level__title:hover,.acad-level[open] .acad-level__title{color:var(--blue)} .acad-level__arrow{display:grid;place-items:center;flex:none;width:56px;height:56px;border:2px solid currentColor;border-radius:50%;transition:transform .25s} .acad-level__arrow::before{content:"";width:22px;height:22px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} .acad-level[open] .acad-level__arrow{transform:rotate(90deg)} .acad-level__panel{padding-top:18px} .acad-level__panel p{margin:0;font-size:var(--t-lead);line-height:1.65;text-wrap:pretty} .acad-level__panel .button-row{margin-top:22px} .acad__media{position:sticky;top:calc(var(--header-h) + 72px);justify-self:center;width:100%;max-width:820px;margin-top:12px} .acad__circle{position:relative;aspect-ratio:1} .acad__circle::before{content:"";position:absolute;inset:-2.5%;border-radius:50%;border:2px solid var(--ring-white);box-shadow:0 0 0 10px var(--ring-glow)} .acad__circle::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:var(--sh-circle);pointer-events:none} .acad__circle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--wash); opacity:0;transition:opacity .5s ease} .acad__circle img.is-on{opacity:1} @media (max-width:1319px){ .acad__media{position:relative;top:0;max-width:560px} } @media (prefers-reduced-motion:reduce){ .acad__circle img,.acad-level__arrow{transition:none} } /* ---- the experience awaits you: Jimmy's card, then the apprentices' ---- */ .experience{padding-block:var(--rd-pad);background:var(--paper)} .jimmy-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:48px;align-items:center;margin-top:48px; padding:clamp(22px,3vw,40px);border-radius:var(--r-panel);background:var(--mist)} .jimmy-card__photo{width:100%;border-radius:16px;background:var(--wash)} .jimmy-card__name{font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-person-lg);line-height:1;text-transform:uppercase;color:var(--navy)} .jimmy-card__body p{margin:12px 0 0;font-size:var(--t-copy-sm);line-height:1.65} .jimmy-card__body .btn{margin-top:22px} .apprentice-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:28px;margin-top:28px} .apprentice-card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-panel);background:var(--mist)} .apprentice-card__photo{width:100%;background:var(--wash)} .apprentice-card__body{display:flex;flex-direction:column;flex:1;padding:26px} .apprentice-card__name{font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-person);line-height:1;text-transform:uppercase;color:var(--navy)} .apprentice-card__body p{flex:1;margin:10px 0 0;font-size:var(--t-small);line-height:1.6} .apprentice-card__body .button-row{gap:12px} /* ---- what people are saying: review cards, then the success stories ---- */ .voices{padding-block:88px;background:var(--mist)} .review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;margin-top:44px} .review-grid .review-card{padding:26px;border-radius:var(--r-tile);background:var(--paper);box-shadow:var(--sh-review)} .review-grid .stars svg{width:20px;height:20px;fill:var(--star-gold)} .review-grid .review-card__text{flex:1;margin:14px 0 0;font-weight:400;font-style:normal;font-size:var(--t-small);line-height:1.6} .review-grid .review-card__more{margin-top:10px;font-size:var(--t-small);color:var(--blue)} .review-grid .review-card__who{gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)} .review-grid .review-card__who img{width:42px;height:42px;object-fit:cover;background:var(--pale)} .review-grid .review-card__who span{font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-reviewer-rd);text-transform:none} .stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px;margin-top:56px} .story{overflow:hidden;border-radius:var(--r-tile);background:var(--paper)} .story__play{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--wash)} .story__play img{width:100%;height:100%;object-fit:cover;object-position:center top} .story__play::after{content:"";position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%; background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23263A6B'/%3E%3C/svg%3E") 55% 50%/26px no-repeat; opacity:.85;transition:opacity .2s} .story__play:hover::after{opacity:1} .story__body{padding:22px} .story__name{font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-story);line-height:1;text-transform:uppercase;color:var(--navy)} .story__body p{margin:8px 0 0;font-size:var(--t-card-text);line-height:1.6} .voices .button-row{margin-top:40px} /* ---- before and after (the home page's own six, with titles) ---- */ .ba-home{padding-block:var(--rd-pad);background:var(--paper)} .ba-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px;margin-top:44px} .ba-card{display:flex;flex-direction:column;padding:14px;border-radius:var(--r-tile);background:var(--mist)} .ba-card__title{display:flex;align-items:center;justify-content:center;min-height:66px;padding:6px 8px 12px;text-align:center; font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-tile-h);line-height:1.05;text-transform:uppercase;color:var(--navy);text-wrap:balance} .ba-card__pair{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ba-card__pair figure{margin:0} .ba-card__pair img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-thumb);background:var(--wash)} .ba-card__pair figcaption{margin-top:6px;text-align:center;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-ba-label);color:var(--navy)} .ba-card__pair figure + figure figcaption{color:var(--blue)} .ba-card > p{margin:12px 0 0;padding:0 8px 6px;text-align:center;font-size:var(--t-caption);line-height:1.55;text-wrap:pretty} .ba-home .button-row{margin-top:40px} /* ---- instagram (home, Academy Levels 2 and 3) ---- */ .insta{padding-block:88px;background:var(--mist)} .insta__wrap{padding-inline:clamp(12px,2vw,32px)} .insta__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,16px);align-items:start;margin-top:40px} .insta__tile{display:block;aspect-ratio:9/16;overflow:hidden;border-radius:14px;background:var(--wash);box-shadow:var(--sh-tile);transition:transform .2s} .insta__tile:hover{transform:translateY(-3px)} .insta__tile img{width:100%;height:100%;object-fit:cover} .insta .call-row{margin-top:40px} @media (max-width:699px){ .insta__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (prefers-reduced-motion:reduce){ .insta__tile{transition:none} .insta__tile:hover{transform:none} } /* ---- the home page's contact band: the form on a white card ---- */ .rd-contact{padding-block:var(--rd-pad);background:linear-gradient(100deg,var(--paper) 0%,var(--paper) 40%,var(--ice) 65%,var(--wash-edge) 100%)} .rd-contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,5vw,80px);align-items:center} .rd-contact__lede{max-width:560px;margin:22px 0 0;font-size:var(--t-lead);line-height:1.65} .rd-contact__lede a{color:var(--navy)} .rd-contact__ways{display:flex;flex-direction:column;gap:14px;margin-top:28px} .rd-contact__ways li{display:flex;align-items:center;gap:12px;font-size:var(--t-ways)} .rd-contact__ways img{flex:none;width:30px;height:30px;object-fit:contain} .rd-contact__ways a{color:var(--navy);text-decoration:none} .rd-contact__ways a:hover{color:var(--blue)} .rd-contact__form{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;padding:clamp(24px,3vw,40px); border-radius:var(--r-form);background:var(--paper);box-shadow:var(--sh-form)} .rd-contact__form .contact-form__wide{grid-column:1 / -1} .rd-contact__form .contact-form__field{min-height:54px;padding:15px 16px;border:1.5px solid var(--line);font-size:var(--t-small)} .rd-contact__form .contact-form__select{background-position:calc(100% - 22px) 24px,calc(100% - 16px) 24px} .rd-contact__form .contact-form__message{min-height:140px} .rd-contact__submit.btn{justify-self:start;margin-top:0;padding-inline:56px;text-transform:uppercase} /* ---- a round photo with a thin white ring and a soft halo (Ryan's) ---- */ .ring-photo{position:relative;display:block;width:100%;aspect-ratio:1} .ring-photo::before{content:"";position:absolute;inset:-2.5%;border-radius:50%;border:2px solid var(--ring-white); box-shadow:0 0 0 10px var(--ring-glow);pointer-events:none} .ring-photo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--wash);box-shadow:var(--sh-circle)} .ring-photo__img--top{object-position:center 15%} /* one that plays a video: a white play button over a light veil */ .ring-photo--play::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--veil-play) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='white'/%3E%3Cpath d='M9.5 7.2v9.6l8-4.8z' fill='%231D75BC'/%3E%3C/svg%3E") center/clamp(76px,8vw,110px) no-repeat; transition:background-color .2s} .ring-photo--play:hover::after{background-color:var(--veil-play-hover)} /* ---- the long pages' hero: crumbs, kicker, H1, Ryan's line, two buttons, a circle photo ---- */ .lp-hero{padding-block:var(--rd-pad);background:linear-gradient(100deg,var(--paper) 0%,var(--paper) 40%,var(--ice) 65%,var(--wash-edge) 100%)} .lp-hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(32px,5vw,80px);align-items:center} .lp-crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;margin-bottom:22px;font-size:var(--t-crumbs);font-weight:var(--w-semi);color:var(--muted)} .lp-crumbs a{color:var(--blue)} .lp-hero__kicker{margin:0;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-lp-kicker);line-height:1;text-transform:uppercase;color:var(--steel)} .lp-hero__title{margin-top:6px;font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-lp-title);line-height:.95; text-transform:uppercase;color:var(--navy);text-wrap:balance} .lp-hero--big .lp-hero__title{font-size:var(--t-lp-title-big);line-height:.9} .lp-hero__lead{max-width:620px;margin:20px 0 0;font-size:var(--t-lp-lead);line-height:1.75;text-wrap:pretty} .lp-hero .button-row{margin-top:28px} .lp-hero__pill{margin:28px 0 0} .lp-hero__photo{max-width:720px;justify-self:center} /* ---- the long pages' story: a photo that holds beside the blocks of copy ---- */ .lp-story{overflow-x:clip;padding-block:var(--rd-pad);background:linear-gradient(260deg,var(--paper) 0%,var(--paper) 45%,var(--ice-soft) 70%,var(--wash-end) 100%)} .lp-story__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(32px,5vw,80px);align-items:start} .lp-story__aside{position:sticky;top:calc(var(--header-h) + 72px);justify-self:center;width:100%;max-width:640px;margin-top:12px} .lp-story__photo{padding:10px;border:1px solid var(--line-soft);border-radius:var(--r-tile);background:var(--paper);box-shadow:var(--sh-soft)} .lp-story__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--wash)} .lp-story__body{display:flex;flex-direction:column;gap:clamp(36px,4vw,56px);max-width:780px} .lp-story__signature{height:96px;width:auto;align-self:flex-start} .call-row--start{justify-content:flex-start;margin-top:0} @media (max-width:1319px){ .lp-story__aside{position:relative;top:0} } .lp-block__kicker{margin:0;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-lp-kicker);line-height:1;text-transform:uppercase;color:var(--steel)} .lp-block__title{margin-top:6px;font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-lp-h2);line-height:.95;text-transform:uppercase;color:var(--navy);text-wrap:balance} .lp-block__role{margin:6px 0 0;font-family:var(--f-cond);font-weight:var(--w-semi);font-style:italic;font-size:var(--t-lp-role);line-height:1.15;color:var(--blue)} .lp-block__sub{padding-bottom:14px;border-bottom:2px solid var(--line);font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-lp-sub); line-height:1;text-transform:uppercase;color:var(--navy)} .lp-block__text{display:flex;flex-direction:column;gap:16px;margin-top:20px} .lp-block__text p{margin:0;font-size:var(--t-lp-lead);line-height:1.75;text-wrap:pretty} .lp-block__text strong{color:var(--navy)} .lp-statements{display:flex;flex-direction:column;gap:6px;margin-top:24px;padding:22px 26px;border:1px solid var(--line-soft);border-radius:var(--r-tile); background:var(--paper);box-shadow:var(--sh-soft)} .lp-statements li{font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-statement);line-height:1.05;text-transform:uppercase;color:var(--blue)} .lp-ticks{margin-top:22px;padding:22px 26px;border:1px solid var(--line-soft);border-radius:var(--r-tile);background:var(--paper);box-shadow:var(--sh-soft);gap:14px} .lp-ticks li{font-size:var(--t-ticks);line-height:1.6} /* ---- a pull quote: a big light-blue mark, Barlow italic ---- */ .pull{margin:32px 0 0;padding-top:26px;border-top:2px solid var(--line)} .pull::before{content:"\201C";display:block;height:.45em;font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-pull-mark);line-height:.55;color:var(--sky)} .pull__quote{margin:0;font-family:var(--f-cond);font-weight:var(--w-bold);font-style:italic;font-size:var(--t-pull);line-height:1.08;color:var(--navy);text-wrap:balance} .pull__by{margin-top:12px;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-tile-h);letter-spacing:.06em;text-transform:uppercase;color:var(--steel)} .pull--big{max-width:1600px;margin:clamp(40px,5vw,72px) auto 0;padding:clamp(28px,4vw,56px) clamp(20px,4vw,72px);border-bottom:2px solid var(--line);text-align:center} .pull--big::before{height:.5em;font-size:clamp(90px,10vw,170px);line-height:.6} .pull--big .pull__quote{margin-top:10px;font-size:var(--t-pull-big)} .pull--big .pull__by{margin-top:20px;font-size:var(--t-pull-by)} /* ---- the navy quote band ---- */ .rd-band{padding-block:clamp(64px,8vw,112px);text-align:center;color:var(--white); background:linear-gradient(120deg,var(--navy-dark) 0%,var(--navy) 55%,var(--navy-light) 100%)} .rd-band__quote{max-width:1400px;margin:0 auto;font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-band);line-height:1; text-transform:uppercase;text-wrap:balance} .rd-band__by{margin:18px 0 0;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-pull-by);color:var(--sky)} .rd-band .btn{margin-top:32px} /* a white button on navy or a photo (Ryan's: navy type, palest blue under the pointer) */ .btn--white{background:var(--white);color:var(--navy)} .btn--white:hover{background:var(--pale);color:var(--navy)} .rd-head__lead{max-width:720px;margin:22px auto 0;font-size:var(--t-lp-lead);line-height:1.7;text-wrap:pretty} /* ---- Our Company ---- */ .co-amr{padding-block:var(--rd-pad);background:var(--paper)} .co-amr__head{max-width:980px;margin-inline:auto} .co-amr__head .rd-head__lead{max-width:none} .co-amr__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px;max-width:1320px;margin:44px auto 0} .co-card{padding:clamp(24px,3vw,36px);border:1px solid var(--line-soft);border-radius:var(--r-card-lg);background:var(--paper);box-shadow:var(--sh-soft)} .co-card__title{padding-bottom:16px;border-bottom:1px solid var(--line-soft);font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-co-card); line-height:1;text-transform:uppercase;color:var(--navy)} .co-card > p{margin:20px 0 0;font-size:var(--t-ticks);line-height:1.6} .co-card__ticks{gap:16px;margin-top:20px} .co-card > p + .co-card__ticks{margin-top:16px} .co-card__ticks li{font-size:var(--t-ticks)} .co-card__ticks strong{color:var(--navy)} .co-amr .button-row{margin-top:26px} .co-sessions{padding-block:var(--rd-pad) clamp(40px,4vw,56px);background:linear-gradient(180deg,var(--paper) 0%,var(--ice) 100%)} .co-sessions__wrap{max-width:var(--chrome-max);margin-inline:auto;padding-inline:clamp(16px,3vw,64px)} .co-sessions__photos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,20px);margin-top:44px} .co-sessions__photos li{overflow:hidden;aspect-ratio:3/4;border-radius:var(--r-card-lg);background:var(--wash);box-shadow:var(--sh-photo)} .co-sessions__photos img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .co-sessions__photos li:hover img{transform:scale(1.04)} .co-sessions .button-row{margin-top:32px} @media (max-width:1099px){ .co-sessions__photos{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:699px){ .co-sessions__photos{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (prefers-reduced-motion:reduce){ .co-sessions__photos img{transition:none} .co-sessions__photos li:hover img{transform:none} } .proof{position:relative;overflow:hidden;color:var(--white);background:var(--navy);text-align:center} .proof__photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.35} .proof::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--veil-navy-a),var(--veil-navy-b))} .proof__inner{position:relative;z-index:2;padding-block:clamp(64px,8vw,112px)} .proof__stars{margin:0;color:var(--star);font-size:var(--t-stars-lg);letter-spacing:4px} .proof__quote{max-width:1300px;margin:18px auto 0;font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-proof);line-height:1; text-transform:uppercase;text-wrap:balance} .proof__by{margin:18px 0 0;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-pull-by);color:var(--sky)} .proof__card{max-width:640px;margin:34px auto 0;padding:18px clamp(18px,2vw,28px);border:1.5px solid var(--frost-card-line);border-radius:var(--r-form); background:var(--frost-card);text-align:left;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .proof__name{margin:0;font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-proof-name);line-height:1;text-transform:uppercase} .proof__title{margin:4px 0 0;font-family:var(--f-cond);font-weight:var(--w-semi);font-size:var(--t-proof-title);color:var(--sky)} .proof__text{margin:6px 0 0;font-size:var(--t-caption);line-height:1.5;color:var(--line)} .proof .btn{margin-top:32px} .co-person{overflow-x:clip;padding-block:var(--rd-pad)} .co-person--jimmy{background:linear-gradient(260deg,var(--paper) 0%,var(--paper) 40%,var(--ice) 65%,var(--wash-edge) 100%)} .co-person--maria{background:linear-gradient(100deg,var(--paper) 0%,var(--paper) 40%,var(--ice) 65%,var(--wash-edge) 100%)} .co-person__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(32px,5vw,80px);align-items:start} .co-person__photo{position:sticky;top:calc(var(--header-h) + 72px);max-width:720px;justify-self:center;margin-top:12px} .co-person__quote{margin:26px 0 0;font-weight:var(--w-bold);font-style:italic;font-size:var(--t-meet-quote);line-height:1.45;color:var(--navy)} .co-person__signature{height:88px;width:auto;margin-top:20px} .co-person .button-row{margin-top:18px} .co-person--maria .button-row{margin-top:26px} @media (max-width:1319px){ .co-person__photo{position:relative;top:0;max-width:560px} } /* stacked, Maria's photo comes after her copy, as in the prototype; Jimmy's comes first */ .co-principle{margin-top:26px;padding:22px 26px;border:1px solid var(--line-soft);border-left:0;border-radius:var(--r-tile);background:var(--paper);box-shadow:var(--sh-soft)} .co-principle__label{margin:0;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-principle-label);letter-spacing:.06em;text-transform:uppercase;color:var(--steel)} .co-principle__quote{margin:6px 0 0;font-weight:var(--w-bold);font-style:italic;font-size:var(--t-principle);line-height:1.45;color:var(--navy)} .co-book{overflow-x:clip;padding-block:var(--rd-pad);background:linear-gradient(100deg,var(--paper) 0%,var(--paper) 40%,var(--ice) 65%,var(--wash-edge) 100%)} .co-book__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(32px,5vw,80px);align-items:center} .co-book__lead{max-width:600px;margin:20px 0 0;font-size:var(--t-lp-lead);line-height:1.7} .co-book__ticks{gap:14px;margin-top:24px} .co-book__ticks li{font-size:var(--t-ticks)} .co-book .call-row{margin-top:32px} .co-book__more{margin-top:18px} .co-book__photo{max-width:720px;justify-self:center} .co-book__badge{position:absolute;left:0;bottom:8%;z-index:1;display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:var(--r-tile); background:var(--paper);box-shadow:var(--sh-badge);color:var(--navy);text-decoration:none} .co-book__badge img{width:30px;height:30px} .co-book__badge b{display:block;font-size:var(--t-caption)} .co-book__badge:hover{color:var(--blue)} /* ---- the content pages in Ryan's long template (tools/import_content.py, 29 Oct 2026) ---- */ .lp-toc{padding:22px 24px;border:1px solid var(--line-soft);border-radius:var(--r-tile);background:var(--paper);box-shadow:var(--sh-soft)} .lp-toc__title{margin:0;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-lp-toc-title);letter-spacing:.04em; text-transform:uppercase;color:var(--steel)} .lp-toc__list{display:flex;flex-direction:column;gap:4px;margin:10px 0 0;padding:0;list-style:none;counter-reset:toc} .lp-toc__list li{counter-increment:toc} .lp-toc__list a{display:flex;gap:10px;padding:7px 0;font-weight:var(--w-semi);font-size:var(--t-lp-toc);line-height:1.4;color:var(--navy);text-decoration:none} .lp-toc__list a::before{content:counter(toc) ".";min-width:18px;color:var(--sky)} .lp-toc__list a:hover{color:var(--blue)} .lp-story__aside{display:flex;flex-direction:column;gap:20px} .lp-story__aside:has(.lp-toc){max-width:520px} .lp-block__h3{margin-top:12px;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-tile-h);line-height:1.1;color:var(--navy)} .lp-block__text a{color:var(--blue);font-weight:var(--w-semi);text-decoration:underline;text-underline-offset:3px} .lp-block__text a:hover{color:var(--navy)} .lp-block__text a[target="_blank"]::after{content:"\2197";font-size:.8em;margin-left:2px;text-decoration:none;display:inline-block} /* a citation opens in a new tab */ .lp-block__text .lp-ticks{margin-top:6px} .lp-steps{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:10px;font-size:var(--t-lp-lead);line-height:1.7} .lp-more{align-self:flex-start;text-decoration:none !important;font-weight:var(--w-bold)} .lp-block__sub a{color:inherit;text-decoration:none} .lp-block__sub a:hover{color:var(--blue)} .lp-story .faq-block{display:flex;flex-direction:column;gap:12px} .lp-story .faq-block .lp-block__sub{margin-bottom:10px} .lp-story .faq{padding:18px 22px;border:1px solid var(--line-soft);border-radius:var(--r-faq);background:var(--paper);box-shadow:var(--sh-soft)} .lp-story .faq__q{cursor:pointer;padding:0;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-faq-q-rd);line-height:1.2;color:var(--navy)} .lp-story .faq__q:hover{color:var(--blue)} .lp-story .faq__a p{margin:12px 0 0;font-size:var(--t-ticks);line-height:1.7} .lp-story .faq__a a{color:var(--blue);font-weight:var(--w-semi)} .lp-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .chip--line{background:var(--paper);border-color:var(--wash-meet)} .chip--line:hover{border-color:var(--blue);color:var(--blue)} /* the Healing Center: the address and phone, the page's own booking line, the map in a circle */ .center{overflow-x:clip;background:linear-gradient(100deg,var(--paper) 0%,var(--paper) 40%,var(--ice) 65%,var(--wash-edge) 100%)} .center__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(40px,5vw,80px);align-items:center; padding-block:clamp(64px,8vw,120px)} .center__title{margin-top:8px;font-family:var(--f-cond);font-weight:var(--w-black);font-size:var(--t-center);line-height:.95;text-transform:uppercase; color:var(--navy);text-wrap:balance} .center__nap{display:flex;flex-direction:column;gap:16px;margin-top:32px;font-size:var(--t-center-nap)} .center__nap li{display:flex;align-items:center;gap:16px} .center__icon{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:var(--paper);border:1.5px solid var(--wash-meet)} .center__icon img{width:24px;height:24px} .center__nap a{font-weight:var(--w-semi);color:var(--navy);text-decoration:none} .center__nap a:hover{color:var(--blue)} .center .button-row{margin-top:36px} .center__map{max-width:620px;justify-self:center} .center__map iframe{border:0} .center__badge{left:4%;bottom:10%;border-radius:var(--r-pill);padding:10px 18px 10px 12px} /* ---- the results band (Ryan's handoff): a Google review beside a before and after, on the condition, service and location pages ---- */ .results{padding-block:var(--rd-pad);background:linear-gradient(100deg,var(--paper) 0%,var(--paper) 40%,var(--ice-soft) 70%,var(--wash-end) 100%)} .results__track{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .results__track::-webkit-scrollbar{display:none} .results__slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,4vw,56px);align-items:center} .results__stars svg{fill:var(--star-gold)} .results__quote{margin:14px 0 0;font-size:var(--t-results-quote);line-height:1.38;font-weight:var(--w-bold);color:var(--navy)} .results__read{display:inline-block;margin-top:8px;font-weight:var(--w-bold);color:var(--blue)} .results__who{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:20px 0 0;color:var(--navy)} .results__who img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--pale)} .results__who span{font-size:var(--t-small);color:var(--muted)} .results__result{margin:0} .results__pair{display:grid;grid-template-columns:1fr 1fr;gap:10px} .results__photo{position:relative;overflow:hidden;aspect-ratio:3/4;border-radius:14px;background:var(--pale)} .results__photo img{display:block;width:100%;height:100%;object-fit:cover} .results__tag{position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:var(--r-pill);background:var(--navy);color:var(--white);font-size:var(--t-results-tag);font-weight:var(--w-black);letter-spacing:.08em;text-transform:uppercase} .results__result figcaption{margin-top:12px;color:var(--muted)} .results__title{display:block;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:var(--t-results-title);text-transform:uppercase;color:var(--navy)} .results__controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:24px} .results__nav{display:flex;align-items:center;flex-wrap:wrap;gap:12px} .results__nav[hidden]{display:none} .results__more{margin-left:auto} .results__arrow{display:grid;place-items:center;width:48px;height:48px;padding:0;border:2px solid var(--navy);border-radius:50%;background:var(--white);color:var(--navy);cursor:pointer} .results__arrow:hover{background:var(--navy);color:var(--white)} .results__arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2} .results__dots{display:flex;align-items:center;margin-left:4px} .results__dot{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer} .results__dot::before{content:"";display:block;width:10px;height:10px;border-radius:var(--r-pill);background:var(--wash)} .results__dot[aria-current]::before{background:var(--blue)} @media (max-width:767px){ .results__dots{display:none} } .results__note{margin:16px 0 0;font-size:var(--t-small);color:var(--muted)} .academy-hero .breadcrumbs{align-self:flex-start;color:var(--white)} .academy-hero .breadcrumbs a{color:var(--white);text-decoration:underline;text-underline-offset:3px} .ghl-page--note{background:var(--paper);color:var(--ink);max-width:560px;margin-inline:auto;padding:48px 16px;display:grid;gap:16px;align-content:start;justify-items:center;text-align:center} /* ---- Ryan's media pages: light centered hero, Contact's visit cards, Before & After cards, message block ---- */ .media-hero{padding-block:clamp(56px,7vw,104px) clamp(40px,5vw,64px);text-align:center; background:linear-gradient(100deg,var(--paper) 0%,var(--paper) 40%,var(--ice) 65%,var(--wash-edge) 100%)} .media-hero .breadcrumbs{justify-content:center;margin-bottom:18px;color:var(--navy)} .media-hero .breadcrumbs a{color:var(--blue)} .media-hero__kicker{margin:0;font-family:var(--f-cond);font-weight:var(--w-bold);text-transform:uppercase;line-height:1; font-size:clamp(24px,2.6vw,40px);color:var(--steel)} .media-hero__title{margin:6px 0 0;font-family:var(--f-cond);font-weight:var(--w-black);text-transform:uppercase;line-height:.92; font-size:clamp(48px,6.4vw,104px);color:var(--navy);text-wrap:balance} .media-hero__buttons{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px} .visit{padding-block:clamp(48px,6vw,96px)} .visit__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(24px,4vw,56px)} .visit__ways{display:flex;flex-direction:column;gap:14px} .visit__ways p{margin:0} .visit__title{margin:0;font-family:var(--f-cond);font-weight:var(--w-black);text-transform:uppercase;line-height:1; font-size:clamp(34px,3.6vw,54px);color:var(--navy)} .visit__way{display:flex;gap:16px;align-items:center;min-height:44px;padding:20px 22px;background:var(--paper);border:1px solid var(--line); border-radius:18px;box-shadow:var(--sh-card);color:var(--navy);text-decoration:none} .visit__way:hover{border-color:var(--blue)} .visit__way img{flex:none;width:44px;height:44px;object-fit:contain} .visit__way small{display:block;font-weight:var(--w-bold);text-transform:uppercase;color:var(--steel)} .visit__map{width:100%;height:100%;min-height:420px;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-card)} .ba-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:clamp(20px,2.4vw,36px)} .ba-grid > .ba{padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-card)} .ba-grid .ba__pair{gap:8px} .ba-grid .ba__pair figure{position:relative} .ba-grid .ba__pair img{aspect-ratio:3/4;border-radius:12px;box-shadow:none} .ba-grid .ba__pair figcaption{position:absolute;left:10px;top:10px;margin:0;padding:5px 10px;border-radius:99px; background:var(--navy);color:var(--white);font-family:inherit;font-size:12px;font-weight:var(--w-bold)} .ba-grid .ba__pair figure + figure figcaption{background:var(--blue)} .ba__title{margin:16px 8px 0;font-family:var(--f-cond);font-weight:var(--w-black);text-transform:uppercase;font-size:24px;color:var(--navy)} .ba-grid .ba > p{margin:6px 8px;text-align:left} .msg-block{padding-block:clamp(64px,8vw,104px);background:var(--ice)} .msg-block__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px;align-items:stretch} .msg-block__card{display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:var(--navy);color:var(--white)} .msg-block__photo{width:100%;aspect-ratio:16/9;object-fit:cover} .msg-block__body{display:flex;flex-direction:column;flex:1;gap:14px;padding:clamp(24px,3vw,36px)} .msg-block__kicker{margin:0;font-size:13px;font-weight:var(--w-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--sky)} .msg-block__title{margin:0;font-size:clamp(30px,3.6vw,44px);line-height:1.06;font-weight:var(--w-bold);color:var(--white);text-wrap:balance} .msg-block__lede{margin:0} .msg-block__ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;margin-top:auto;padding-top:14px} .msg-block__ways a{display:flex;flex-direction:column;gap:4px;min-height:44px;min-width:0;padding:16px;border:1px solid var(--white);border-radius:14px; color:var(--white);text-decoration:none;overflow-wrap:anywhere} .msg-block__ways span{font-size:12px;font-weight:var(--w-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--sky)} .msg-block__form{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;align-content:start; padding:clamp(24px,3vw,36px);background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-card)} .msg-block__wide{grid-column:1 / -1} .msg-block__form-title{margin:0;font-size:24px;font-weight:var(--w-bold);color:var(--navy)} .msg-block__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:8px;margin:16px 0 0;padding:0;list-style:none} .msg-block__steps li{padding-top:8px;border-top:3px solid var(--line);font-size:13px;font-weight:var(--w-bold);color:var(--navy)} .msg-block__steps li.is-on{border-top-color:var(--blue)} .msg-block__form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:var(--w-bold);color:var(--navy)} .msg-block__form input:not([type=hidden]),.msg-block__form select,.msg-block__form textarea{min-height:44px;padding:13px;border:1.5px solid var(--line); border-radius:10px;background:var(--ice);font:inherit;font-weight:400;font-size:15px;color:var(--ink)} .msg-block__form textarea{resize:vertical} .msg-block__fine{margin:0;text-align:center;font-size:13.5px} /* ---- Ryan's FAQs, reviews, videos, gallery, directory and apprentices (Nov 2026) ---- */ .faqs .ask-card{background:linear-gradient(160deg,var(--navy),var(--blue));border-radius:22px;text-align:left} .faqs .ask-card__title{color:var(--sky);text-align:left} .faqs .ask-card .btn{background:var(--paper);color:var(--navy)} .faqs__list{counter-reset:faq} .faqs .faq{counter-increment:faq;margin-bottom:12px;background:var(--paper);border:1px solid var(--line-soft);border-radius:18px;box-shadow:var(--sh-card)} .faqs .faq[open]{background:var(--ice-soft);border-color:var(--line)} .faqs .faq__q{gap:16px;justify-content:flex-start;min-height:44px;padding:20px 22px;border:0;color:var(--navy)} .faqs .faq__q::before{content:counter(faq);flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ice); color:var(--blue);font-family:var(--f-cond);font-weight:var(--w-black);font-size:20px} .faqs .faq__txt{flex:1;font-family:var(--f-cond);font-weight:var(--w-bold);font-size:clamp(21px,1.8vw,25px);line-height:1.2} .faqs .faq__txt small{display:block;margin-bottom:2px;font-family:var(--f-body);font-size:12px;font-weight:var(--w-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--steel)} .faqs .faq__a{padding:0 26px 22px 76px} .faq-filter__pill span,.pill-filter__pill span{border:1.5px solid var(--line);background:var(--paper);color:var(--navy);font-weight:var(--w-bold)} .pill-filter__pill i{font-style:normal;font-weight:var(--w-semi);opacity:.6} @media (max-width:767px){ .faqs .faq__a{padding-left:22px} } .review-wall .review-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:20px;box-shadow:var(--sh-card)} .review-shots{padding-block:0 var(--section-pad)} .review-shots__grid{columns:3 280px;column-gap:16px;margin:0;padding:0;list-style:none} .review-shots__grid li{margin-bottom:16px;break-inside:avoid} .review-shots__grid img{display:block;width:100%;height:auto;border:1px solid var(--line-soft);border-radius:16px} .review-shots__more{margin:36px 0 0;text-align:center} .video-wall__grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:clamp(20px,2.4vw,32px)} .video-wall__grid > li{overflow:hidden;background:var(--paper);border:1px solid var(--line-soft);border-radius:20px;box-shadow:var(--sh-card)} .video-name{margin:0;padding:16px 20px;font-family:var(--f-cond);font-weight:var(--w-black);text-transform:uppercase;font-size:24px;line-height:1.1;color:var(--navy)} .masonry-gallery__grid img{border-radius:16px} .practitioners,.practitioners--wash{background:var(--paper)} .practitioners__title{text-align:left} .pcard-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:20px} .pcard{display:grid;grid-template-columns:92px 1fr;column-gap:16px;align-items:center;text-align:left;padding:24px;background:var(--paper); border:1px solid var(--line-soft);border-radius:22px;box-shadow:var(--sh-card)} .pcard__photo{grid-row:1 / span 2;width:92px;height:92px;margin:0;border:3px solid var(--paper);box-shadow:0 0 0 2px var(--line)} .pcard__ribbon{top:64px;left:72px;width:44px} .pcard__name{font-weight:var(--w-black);text-transform:uppercase;font-size:26px;line-height:1;color:var(--navy)} .pcard__place{margin:4px 0 0;font-family:var(--f-body);font-weight:var(--w-bold);font-size:15px;color:var(--steel)} .pcard__bio{grid-column:1 / -1;margin-top:14px;font-size:15.5px} .pcard__buttons{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:flex-end} .pcard__buttons .btn{min-width:0} .acard-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(24px,3vw,40px)} .acard{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:0 0 clamp(22px,2.4vw,32px);overflow:hidden;text-align:left;background:var(--paper); border:1px solid var(--line-soft);border-radius:24px;box-shadow:var(--sh-card)} .acard__photo{width:100%;height:auto;aspect-ratio:4/3;border-radius:0;object-fit:cover;object-position:center 20%;margin:0} .acard__kicker,.acard__name,.acard__bio,.acard__buttons{margin-block:0;margin-inline:clamp(22px,2.4vw,32px)} .acard__kicker{font-family:var(--f-cond);font-weight:var(--w-bold);text-transform:uppercase;font-size:20px;color:var(--steel)} .acard__name{font-family:var(--f-cond);font-weight:var(--w-black);text-transform:uppercase;font-size:clamp(36px,3.4vw,52px);line-height:.95;color:var(--navy)} .acard__bio{flex:1;font-size:17px;line-height:1.7} .acard__buttons{display:flex;flex-wrap:wrap;gap:12px} /* ---- legal text inside the long template: the prose rules apply, without the page width ---- */ .lp-story__body--legal .prose{max-width:none;padding-inline:0} .lp-story__body--legal h2{scroll-margin-top:calc(var(--header-h) + 16px)} /* ---- the Level pages' round video: the link fills Ryan's ring and the poster is cropped to it ---- */ .lp-hero__video .video-feature__link{display:block;width:100%;height:100%;border:0;border-radius:50%;box-shadow:none;overflow:hidden} .lp-hero__video .video-feature__link img{width:100%;height:100%;object-fit:cover} /* ---- fixes after measuring (Nov 2026) ---- */ .practitioners__title.section-head__title{text-align:left} .pcard{min-width:0;grid-template-columns:92px minmax(0,1fr)} .pcard__bio{min-width:0;overflow-wrap:anywhere} .pcard__buttons .btn{white-space:nowrap} .pill-filter__pill i{margin-left:4px} .masonry-gallery__grid{display:block;columns:3 280px;column-gap:16px} .masonry-gallery__grid > li{margin-bottom:16px;break-inside:avoid} .masonry-gallery__grid img{display:block;width:100%;height:auto} .lp-story__body--legal .prose--legal img{max-width:100%;height:auto} .practitioners h2.practitioners__title{text-align:left} .lp-story__body--legal .legal__credits{display:block;padding:0;max-width:none} .lp-story__body--legal .legal__credits > :not(.prose){display:none} .media-hero .page-banner__keep{white-space:normal} .practitioners h2.practitioners__title{max-width:none;margin-inline:0;width:100%} /* ---- the Level pages' sections inside Ryan's long layout ---- */ .level-block{scroll-margin-top:calc(var(--header-h) + 16px);margin-bottom:clamp(40px,5vw,64px)} .level-block > *:not(.lp-block__kicker):not(.lp-block__title){max-width:none;text-align:left} .level-block .rich--center,.level-block .rich,.level-block .intro__facts,.level-block .intro__quote,.level-block .path__lede{text-align:left;margin-inline:0} .level-block .workshops__grid,.level-block .program__grid,.level-block .split__grid,.level-block .path__grid{display:block} .level-block .icon-cards__grid,.level-block .icon-cards__grid--3{display:grid;grid-template-columns:1fr;gap:14px;margin:20px 0 0;padding:0} .level-block .icon-card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:16px 18px;text-align:left;background:var(--paper); border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--sh-card)} .level-block .icon-card img{grid-row:1 / span 2;width:44px;height:44px;margin:0;object-fit:contain} .level-block .icon-card__title{margin:0;text-align:left} .level-block .icon-card p{margin:4px 0 0;text-align:left} .level-block .split__media{max-width:420px;margin-top:20px} .level-block .location__pin,.level-block .location__address{text-align:left;justify-content:flex-start;margin-inline:0} .lp-story__aside .jimmy-video-card,.lp-story__aside [class*="video-card"]{max-width:100%} .media-hero__lede{max-width:640px;margin:18px auto 0;font-size:var(--t-lead)}