@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Nunito:ital,wght@0,400;0,700;1,400&display=swap');

/* Motion and focus values the components read. They combine other tokens,
   so they live here rather than in tokens.json. */
:root{
--ease-out-cubic:cubic-bezier(.215,.61,.355,1);
--transition-fast:all .2s var(--ease-out-cubic);
--transition-motion:all .22s var(--ease-out-cubic);
--lift-hover:translateY(-3px);
--press-scale:scale(.975);
--ring-focus:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus);
}

/* Base: root size, links, focus, reduced motion, helpers.
   The root stays at a fixed 100%. Fluid type comes from the clamp() values of
   the text-* tokens, which scale with screen WIDTH only (never height), so a
   design looks the same at a given width every time. */
html{font-size:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-weight:var(--weight-body-light);line-height:var(--leading-body)}
/* In-text links: distinguishable by underline at rest (not colour alone, per
   WCAG 1.4.1); hover shifts to the rust accent and keeps the underline. */
a{color:var(--color-link);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:from-font;transition:var(--transition-motion)}
a:hover{color:var(--color-link-hover)}
/* Visible keyboard focus on every interactive element — a two-tone ring that
   reads on both light and dark bands (clears 3:1 as a UI indicator). */
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:2px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
/* Honour reduced-motion: keep state changes instant, drop all easing/animation. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* Skip link — visually hidden until focused. */
.ds-skip-link{position:absolute;left:var(--space-15);top:-4rem;z-index:1000;background:var(--color-bg-inverse);color:var(--color-text-inverse);font-family:var(--font-heading);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:var(--text-small);padding:var(--space-10) var(--space-15);border-radius:var(--radius-s);text-decoration:none;transition:var(--transition-motion)}
.ds-skip-link:focus{top:var(--space-15);color:var(--color-text-inverse)}
.ds-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Fluid type styles: bind each generated type-style class to its fluid size token. */
.headline-xl{font-size:var(--text-title)}
.headline-l{font-size:var(--text-xx-large)}
.headline-m{font-size:var(--text-small-title)}
.headline-s{font-size:var(--text-x-large)}
.lead{font-size:var(--text-large-text)}
.body{font-size:var(--text-medium)}
.section-label{font-size:var(--text-section-title)}

/* ImagePlaceholder: a labelled slot wherever an illustration belongs but none exists yet. */
.bw-ph{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;max-width:100%;border-radius:var(--radius-m);overflow:hidden;background:var(--color-bg-subtle);color:var(--color-text-muted);border:1px dashed var(--color-border-strong);padding:var(--space-20);font-family:var(--font-heading);font-size:var(--text-small);line-height:var(--leading-body)}
.bw-ph--dark{background:var(--color-bg-inverse-subtle);color:var(--color-light-grey);border-color:var(--color-mid-grey)}
.bw-ph--filled{padding:0;border:0;background:none}
.bw-ph--filled img{width:100%;height:100%;object-fit:cover;display:block}
.bw-ph__label{font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);font-size:var(--text-caps-s)}
.bw-ph__brief{margin-top:var(--space-10);font-family:var(--font-body);font-style:italic;font-weight:300;font-size:var(--text-small);max-width:28rem;margin-inline:auto}
/* fit="fill": the slot fills its parent's height (for example a grid cell stretched to the height of the text beside it), cropping the artwork to fit. When nothing gives it height (such as stacked columns on phones), it falls back to its ratio. */
.bw-ph-fill{position:relative;width:100%;height:100%}
.bw-ph--abs{position:absolute;inset:0;height:100%}
@media (max-width:760px){.bw-ph-fill{height:auto;min-height:0!important;aspect-ratio:var(--bw-ph-ratio)}}

/* Hero: headline and copy on one side, illustration on the other. */
.bw-hero{padding-block:var(--space-hero);padding-inline:clamp(1.25rem,4vw,2.5rem)}
.bw-hero--dark{background:var(--color-bg-inverse);color:var(--color-text-inverse)}
.bw-hero--light{background:var(--color-bg);color:var(--color-text)}
.bw-hero--highlight{background:var(--color-bg-highlight);color:var(--color-text)}
.bw-hero__inner{max-width:var(--wide-width);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-60);align-items:center}
.bw-hero--image-left .bw-hero__media{order:-1}
@media (max-width:760px){.bw-hero__inner{grid-template-columns:1fr;gap:var(--space-40)}.bw-hero--image-left .bw-hero__media{order:0}}
.bw-hero__eyebrow{font-family:var(--font-heading);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);font-size:var(--text-small);margin-bottom:var(--space-20);color:var(--color-link)}
.bw-hero--dark .bw-hero__eyebrow{color:var(--color-cta)}
.bw-hero__title{font-family:var(--font-body);font-weight:700;font-size:var(--text-title);line-height:1.1;margin:0 0 var(--space-30);text-wrap:balance}
.bw-hero__body{font-family:var(--font-body);font-weight:300;font-size:var(--text-large);line-height:var(--leading-relaxed);max-width:38rem}
.bw-hero--light .bw-hero__body,.bw-hero--highlight .bw-hero__body{color:var(--color-text-body)}
.bw-hero__body p{margin:0 0 var(--space-20)}
.bw-hero__body mark{background:var(--color-mark-bg);color:var(--color-text-body);padding:.05em .2em}
.bw-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-20);margin-top:var(--space-30)}
/* imageFit="match-text": the illustration stretches to the text column's height at every width (cropping with object-fit), instead of keeping a fixed ratio. When the columns stack on phones it falls back to a 4:5 portrait. */
.bw-hero--match .bw-hero__inner{align-items:stretch}
.bw-hero--match .bw-hero__text{align-self:center}
.bw-hero--match .bw-hero__media{display:flex;flex-direction:column}
.bw-hero--match .bw-hero__media .bw-ph{flex:1 1 auto;aspect-ratio:auto!important;min-height:20rem}
.bw-hero--match .bw-ph--filled{position:relative}
.bw-hero--match .bw-ph--filled img{position:absolute;inset:0}
@media (max-width:760px){.bw-hero--match .bw-hero__media .bw-ph{flex:none;aspect-ratio:4/5!important;min-height:0}}
/* On dark heroes, links use bright teal (7.6:1 on black) and hover to white; rust is too dark to read there. */
.bw-hero--dark{--color-link:var(--color-cta);--color-link-hover:var(--color-text-inverse)}

/* SiteHeader and SiteNav: the near-black site bar from boagworld.com. Its column matches the Wide container (and Hero), so the logo lines up with the content's left edge and the last pill with its right edge. */
.bw-header{background:var(--color-bg-inverse);color:var(--color-text-inverse);border-bottom:1px solid rgba(255,255,255,.08);padding-inline:clamp(1.25rem,4vw,2.5rem)}
.bw-header__inner{max-width:var(--wide-width);margin:0 auto;min-height:5rem;display:flex;align-items:center;justify-content:space-between;gap:var(--space-30)}
.bw-header__logo{display:block;flex-shrink:0;line-height:0}
.bw-header__logo img{display:block;height:2rem;width:auto}
.bw-header__end{display:flex;align-items:center;gap:var(--space-15);flex:0 1 16rem;min-width:11rem}
.bw-nav{flex:0 1 auto;min-width:0}
.bw-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:var(--space-10)}
.bw-navpill{display:inline-flex;align-items:center;min-height:2rem;padding:0 1rem;border-radius:var(--radius-pill);background:rgba(255,255,255,.1);color:var(--color-greygreen);font-family:var(--font-heading);font-weight:400;font-size:var(--text-caps-s);line-height:1;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;white-space:nowrap;transition:var(--transition-motion)}
.bw-navpill:hover{background:var(--color-cta-alt);color:var(--color-text-inverse)}
.bw-navpill[aria-current]{background:var(--color-cta);color:var(--color-text-black)}
.bw-search{position:relative;display:flex;align-items:center;width:100%;margin:0}
.bw-search input{width:100%;min-height:2.125rem;border:0;border-radius:var(--radius-s);background:var(--color-dark-grey);color:var(--color-text-inverse);font-family:var(--font-heading);font-size:var(--text-caps-s);text-transform:uppercase;letter-spacing:.04em;padding:0 2.5rem 0 1rem}
.bw-search input::placeholder{color:var(--color-light-grey);opacity:1}
.bw-search button{position:absolute;right:.125rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;border:0;padding:0;background:none;color:var(--color-light-grey);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-s);transition:var(--transition-motion)}
.bw-search button:hover{color:var(--color-text-inverse)}
/* The bar stays on one line on desktop: the search field narrows first. Below 900px it wraps, the pills may wrap and the search runs full width. */
@media (max-width:900px){.bw-header__inner{flex-wrap:wrap;padding-block:var(--space-15)}.bw-nav__list{flex-wrap:wrap}.bw-header__end{flex:1 1 100%}}

/* SectionHeader: a real heading. Default = the boagworld.com divider label (bold uppercase, wide tracking, hairline either side). */
.bw-sh{text-align:center;max-width:37.5rem;margin:0 auto var(--space-50)}
.bw-sh__label{display:flex;align-items:center;gap:var(--space-20);margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--text-section-title);line-height:1.2;text-transform:uppercase;letter-spacing:.3em;color:var(--color-text)}
.bw-sh__label::before,.bw-sh__label::after{content:"";flex:1 1 0;min-width:2rem;height:1px;background:var(--color-border)}
.bw-sh__text{margin-right:-.3em;white-space:nowrap}
.bw-sh__intro{margin:var(--space-20) auto 0;max-width:38rem;font-family:var(--font-body);font-weight:300;font-size:var(--text-large);line-height:var(--leading-relaxed);color:var(--color-text-body)}
.bw-sh--plain .bw-sh__label{display:block;font-size:var(--text-small);letter-spacing:var(--tracking-wide);color:var(--color-text-muted)}
.bw-sh--plain .bw-sh__label::before,.bw-sh--plain .bw-sh__label::after{content:none}
.bw-sh--plain .bw-sh__text{margin-right:0}
.bw-sh--dark .bw-sh__label{color:var(--color-text-inverse)}
.bw-sh--dark .bw-sh__label::before,.bw-sh--dark .bw-sh__label::after{background:rgba(255,255,255,.25)}
.bw-sh--dark .bw-sh__intro{color:var(--color-text-inverse)}
.bw-sh--dark.bw-sh--plain .bw-sh__label{color:var(--color-light-grey)}
.bw-sh--left{text-align:left;margin-inline:0}
.bw-sh--left .bw-sh__label::before{content:none}
.bw-sh--left .bw-sh__intro{margin-inline:0}
@media (max-width:600px){.bw-sh__text{white-space:normal}}