/* Selected patterns adapted from theme/amoxi-html/assets/css/amoxi.css.
 * service-card-three: inset panel + transform origin; contact-one: fill reveal;
 * blog-card: clipped image zoom. See doc/theme-section-guide.md for the mapping.
 * Keep this scoped adaptation after professional.css; no vendor JS is needed. */
:root {
  --surface: #f7f5f0;
  --accent-soft: #e9dfcf;
  --section-space: clamp(40px, 4.5vw, 64px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
main > section { position: relative; isolation: isolate; }
main > section:not(.professional-home) { padding-block: var(--section-space); }
main > section > :not(.section-ambient) { position: relative; z-index: 1; }
.professional-header { transition: box-shadow .3s, background .3s; }
.professional-header.is-scrolled { background: #fffffff5; box-shadow: 0 8px 35px #1726330a; }
#professional-nav a { position: relative; }
#professional-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
#professional-nav a:hover::after, #professional-nav a[aria-current]::after { transform: scaleX(1); }
.button { position: relative; overflow: hidden; isolation: isolate; transition: background .3s, box-shadow .3s, transform .3s; }
.button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #72572f; transform: translateY(-101%); transition: transform .45s var(--ease-out); }
.button:hover::before, .button:focus-visible::before { transform: translateY(0); }
.button span, .text-button span, .editorial-link span { transition: transform .3s; }
.button:hover span, .text-button:hover span, .editorial-card:hover .editorial-link span { transform: translate(3px, -3px); }
.text-button { background: transparent; }
.professional-home { background: linear-gradient(115deg, #fff 44%, #f5f1e9); overflow: hidden; }
.section-ambient { position: absolute; inset: -80px 0; z-index: 0; pointer-events: none; overflow: hidden; transform: translate3d(0, var(--parallax-y, 0px), 0); }
.section-ambient::before, .section-ambient::after { content: ''; position: absolute; width: min(70vw, 850px); aspect-ratio: 1; border: 1px solid #92734220; border-radius: 50%; right: -15%; top: 5%; }
.section-ambient::after { width: min(60vw, 730px); right: -11%; top: 13%; }
.home-highlights { background: #ffffffb8; padding: 32px 24px; margin-top: 64px; }
.home-highlights > div:first-child { padding-left: 0; }
.home-highlights strong { font-size: clamp(23px, 2.3vw, 31px); }
.portrait-frame { background: transparent; }
.portrait-frame img, .about-photo > img, .speaking-photo > img { transition: filter .7s, box-shadow .7s; }
.portrait-frame img:hover, .about-photo > img:hover, .speaking-photo > img:hover { filter: saturate(1); box-shadow: 0 18px 45px #17263314; }
.professional-about .about-photo { position: relative; }
.about-values > div { padding: 10px 0; }
.professional-business { background: var(--surface); }
.expertise-grid { gap: 18px; border: 0; }
.expertise-card { isolation: isolate; background: #fff; border: 1px solid var(--line); padding: 34px 26px; }
.expertise-card::before { content: ''; position: absolute; inset: 8px; z-index: -1; background: #f3eee5; opacity: 0; transform: scaleX(.92); transform-origin: 0 0; transition: transform .5s var(--ease-out), opacity .3s; }
.expertise-card:hover::before { opacity: 1; transform: scaleX(1); }
.expertise-card:hover { box-shadow: 0 12px 30px #17263308; border-color: #cdbfa9; }
.expertise-mark { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--accent-soft); border-radius: 50%; }
.expertise-card p { font-size: 13px; }
.professional-speaking { overflow: hidden; }
.professional-speaking .section-ambient { opacity: .65; }
.topics-list li { transition: background .3s, padding .3s; }
.topics-list li:hover { background: var(--surface); padding-left: 28px; }
.speaking-formats li { border: 1px solid var(--accent-soft); border-radius: 30px; padding: 9px 16px; background: #fff; }
.professional-consulting { background: var(--surface); }
.consulting-areas { border: 0; }
.consulting-areas article { position: relative; isolation: isolate; padding: 27px 24px; background: #fff; border: 1px solid var(--line); margin-bottom: 12px; overflow: hidden; }
.consulting-areas article::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #efe8dd; transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease-out); }
.consulting-areas article:hover::before { transform: scaleY(1); }
.consulting-area-mark { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border: 1px solid var(--accent-soft); border-radius: 50%; }
.consulting-areas h3 { font-size: 25px; }
.editorial-card { overflow: hidden; background: #fff; transition: border-color .3s, box-shadow .3s, transform .4s; }
.editorial-image { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface); }
.editorial-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.editorial-card:hover .editorial-image img, .editorial-card:focus-visible .editorial-image img { transform: scale(1.05); }
.editorial-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px #1726330d; }
.editorial-card-copy { padding: 30px; }
.insights-preview { background: var(--surface); border: 1px solid var(--line); padding: 42px; }
.insights-preview li { font-size: 15px; }
.professional-media { background: var(--surface); }
.media-invitation { padding: 38px; border: 1px solid var(--accent-soft); background: #fff; }
.professional-contact { overflow: hidden; background: linear-gradient(125deg, #fff, #f5f1e9); }
.professional-form { padding: 34px; background: #fff; box-shadow: 0 18px 65px #17263308; }
.professional-form > .button { margin-top: 24px; }
.professional-form input, .professional-form select, .professional-form textarea { background: #fdfcf9; transition: border-color .25s; }
.professional-form input:hover, .professional-form select:hover, .professional-form textarea:hover { border-color: var(--gold); }
.professional-form-grid > div, .contact-grid > *, .home-grid > * { min-width: 0; }
.professional-email { max-width: 100%; }
/* Reveal only through the Web Animations API: content stays visible without JS. */
/* The illustrated consulting introduction scrolls naturally so its CTA stays reachable. */
@media (max-width: 1100px) { .expertise-grid { gap: 16px; } .media-invitation { gap: 26px; } }
@media (max-width: 767px) {
  .home-highlights { padding: 26px 18px; }
  .expertise-card { padding: 26px 18px; }
  .insights-preview, .media-invitation, .professional-form { padding: 26px 22px; }
  .consulting-areas article { padding: 24px 20px; }
  .section-ambient { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .section-ambient, .editorial-card:hover, .editorial-card:hover .editorial-image img { transform: none; }
}

.professional-icon { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.expertise-mark { width: 56px; height: 56px; background: var(--surface); transition: background .3s, color .3s, border-color .3s; }
.expertise-mark .professional-icon { width: 28px; height: 28px; }
.expertise-card:hover .expertise-mark { color: #fff; background: var(--gold); border-color: var(--gold); }
.section-image { overflow: hidden; background: var(--accent-soft); }
.section-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.business-image { margin: 0 0 30px; aspect-ratio: 1170 / 225; }
.consulting-image { margin: 30px 0 0; max-width: 440px; aspect-ratio: 16 / 10; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .section-image:hover img { transform: scale(1.035); }
}
@media (max-width: 767px) {
  .business-image { aspect-ratio: 2.5 / 1; margin-bottom: 22px; }
  .consulting-image { max-width: none; }
}

/* Bootstrap containers own horizontal gutters and responsive section widths. */
main > section, .professional-footer { padding-inline: 0; }
.contact-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 96px); }
.contact-methods { border-top: 1px solid var(--accent-soft); }
.contact-method { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; align-items: center; gap: 20px; padding: 26px 8px; border-bottom: 1px solid var(--accent-soft); transition: background .3s; }
.contact-method-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--accent-soft); border-radius: 50%; color: var(--gold); background: #fff; }
.contact-method-label { display: block; color: var(--gold); font-size: 9px; letter-spacing: 1.5px; margin-bottom: 10px; }
.contact-method strong { font-size: clamp(16px, 1.6vw, 23px); font-weight: 400; overflow-wrap: anywhere; }
.contact-method-arrow { font-size: 22px; color: var(--gold); transition: transform .3s; }
.contact-method:hover, .contact-method:focus-visible { background: #fff9; }
.contact-method:hover .contact-method-arrow { transform: translate(3px, -3px); }
.contact-methods .contact-note { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 24px; }
.contact-categories { margin-top: 30px; gap: 18px; }
@media (max-width: 767px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-method { gap: 12px; padding-block: 22px; }
  .professional-contact-copy h2 { font-size: clamp(35px, 7vw, 44px); }
}

/* Supplied professional brand artwork, sized without distortion.
 * Header logo width and nav type scale match the artist page's header for a consistent brand feel. */
.professional-brand { display:inline-flex; align-items:center; flex-shrink:0; }
.professional-logo { display:block; width:200px; height:100px; max-width:100%; object-fit:contain; }
@media(max-width:600px) { .professional-logo { width:92px; height:46px; } }

#professional-nav { font-size: 15px; }

/* Mobile navigation: right-side drawer with backdrop, matching the artist page's pattern. */
.menu-backdrop { display: none; }
@media (max-width: 1000px) {
  /* The off-canvas drawer sits past the right edge via transform; clip it so it can't be scrolled into view. */
  html { overflow-x: hidden; }

  .menu-toggle { position: relative; z-index: 3; width: 44px; height: 44px; padding: 0; flex-shrink: 0; }
  .menu-toggle > span:not(.sr-only) {
    position: absolute;
    left: calc(50% - 11px);
    top: calc(50% - 1px);
    width: 22px;
    height: 2px;
    margin: 0;
    transform-origin: center;
    transition: transform .25s;
  }
  .menu-toggle > span:nth-child(1) { transform: translateY(-4px); }
  .menu-toggle > span:nth-child(2) { transform: translateY(4px); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(2) { transform: rotate(-45deg); }

  .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    background: rgba(23, 38, 51, .55);
    backdrop-filter: blur(4px);
    border: 0;
    padding: 0;
    z-index: 1;
  }
  .menu-backdrop[hidden] { display: none; }

  #professional-nav {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(400px, 88vw);
    height: 100dvh;
    z-index: 2;
    background: #fff;
    border: 0;
    border-left: 1px solid var(--line);
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 96px 30px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s var(--ease-out), visibility .3s;
  }
  #professional-nav.is-open { transform: translateX(0); visibility: visible; }

  #professional-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 23px;
  }
  #professional-nav a::after {
    content: '↗';
    position: static;
    width: auto;
    height: auto;
    background: none;
    transform: none;
    color: var(--gold);
    font-size: 20px;
  }

  body.nav-open { overflow: hidden; }
}

/* Artist header geometry, adapted to the professional colour palette.
 * Keep Bootstrap containers in the sections; align this header to the artist gutters. */
.professional-header { position:fixed; inset:0 0 auto; z-index:50; backdrop-filter:blur(16px); }
.professional-header + main { padding-top:88px; }
.professional-header .header-inner { width:calc(100% - 104px); max-width:1320px; height:88px; padding:0; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.professional-header .professional-brand { width:200px; }
.professional-header .professional-logo { display:block; width:100%; height:auto; object-fit:contain; }
.professional-header #professional-nav { margin-left:0; gap:27px; }
.professional-header #professional-nav a { font-size:15px; font-weight:500; padding:12px 0; }
.professional-header .header-cta { display:flex; align-items:center; flex-shrink:0; gap:22px; padding:9px 0; border-bottom:1px solid var(--gold); font-size:12px; font-weight:600; line-height:1.5; }
.professional-header .header-cta span { color:var(--gold); font-size:22px; }
@media(max-width:1100px) {
  .professional-header .header-inner { width:calc(100% - 64px); gap:20px; }
  .professional-header #professional-nav { gap:19px; }
}
@media(min-width:1001px) {
  .professional-header #professional-nav { display:flex; position:static; padding:0; width:auto; height:auto; border:0; background:none; flex-wrap:nowrap; }
  .professional-header .menu-toggle { display:none; }
}
@media(max-width:1000px) {
  .professional-header { backdrop-filter:none; }
  .professional-header + main { padding-top:76px; }
  .professional-header .header-inner { height:76px; }
  .professional-header .professional-logo { max-height:60px; }
  .professional-header .header-cta { margin-left:auto; }
  .professional-header .menu-toggle { order:3; margin-left:0; width:44px; height:44px; }
  .professional-header .menu-toggle > span:not(.sr-only) { width:19px; height:1px; left:calc(50% - 9.5px); top:calc(50% - .5px); }
  .professional-header #professional-nav { gap:0; }
  .professional-header #professional-nav a { font-size:23px; line-height:1.3; padding:14px 0; }
}
@media(max-width:600px) {
  .professional-header .header-inner { width:calc(100% - 40px); gap:16px; }
  .professional-header .professional-brand { width:120px; }
  .professional-header .header-cta { font-size:11px; gap:14px; }
}