/* Hero, accent colour and shared link arrows, layered over style.css. */
:root{
  --sun:#f8d970;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 12h17m-6-6 6 6-6 6'/%3E%3C/svg%3E");
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E");
}

/* Arrows are drawn once here, so they look the same on every platform. */
.button::after,.text-link::after,.service-grid h3 a::after{content:"";flex:none;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .2s}
.button::after{width:22px;height:22px}
.button.small::after{width:18px;height:18px}
.text-link::after{width:18px;height:18px}
.service-grid h3 a::after{display:inline-block;width:18px;height:18px;margin-left:10px;vertical-align:-1px}
.button:hover::after,.text-link:hover::after,.service-grid h3 a:hover::after{transform:translateX(3px)}

/* Hero */
.hero{gap:56px;padding-top:24px;padding-bottom:12px}
.hero-copy>.hero-label{font:500 13px/1.5 'DM Sans',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.hero-copy>.hero-title{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(56px,5.7vw,82px);line-height:1.02;letter-spacing:-.035em;color:var(--ink);margin:0}
.hero-title em{color:var(--sun)}
.hero-copy>.hero-lead{max-width:480px}
.hero-photo{position:relative;min-width:0;margin:0;align-self:center;padding:0 0 28px}
.photo-frame{height:500px;overflow:hidden;border-radius:6px 96px 6px 6px;background:var(--pale)}
.photo-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:59% center}
.hero-note{position:absolute;left:-28px;bottom:0;background:var(--sun);color:var(--navy);padding:18px 24px;border-radius:4px;transition:background .2s}
.hero-note:hover{background:#f3cd4d}
.hero-note>span{display:block;font-size:13px;margin-bottom:5px}
.hero-note strong{display:block;font-family:'DM Serif Display',Georgia,serif;font-size:26px;font-weight:400;line-height:1.2;white-space:nowrap}

.signature{padding-block:27px 39px}
.services{background:var(--surface)}

/* Numbers only where the order matters: the steps of the way of working. */
.steps .number{font-size:24px;min-width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--pale)}

.contact h2 em{color:var(--sun)}

@media(min-width:1500px){.hero-copy>.hero-title{font-size:88px}}
@media(max-width:1000px){.hero{gap:35px}.photo-frame{height:460px}.hero-note{left:-15px;padding:15px 20px}.hero-note strong{font-size:23px}}
@media(max-width:760px){.hero{gap:14px;padding-top:12px}.hero-copy{padding-bottom:24px}.hero-copy>.hero-label{font-size:12px;margin-bottom:18px}.hero-copy>.hero-title{font-size:clamp(49px,10.8vw,73px)}.hero-photo{margin:0 0 0 12px}.photo-frame{height:370px;border-top-right-radius:72px}.hero-note{left:-12px}.signature{padding-block:15px 28px}.steps .number{min-width:42px;height:42px;font-size:22px}}