/*
 * Skin: Canopy (gutter service, 2026-11-13). Made for the "aerial" recipe.
 * A house seen from above in autumn: wet-slate roof, cream paper, burnt maple for the action,
 * leaf gold only on dark. The home page hero is the roof itself, with the services pinned to its edges.
 */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/schibsted-grotesk-latin-var.woff2") format("woff2"); }

:root {
	--sf-font-h: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sf-font-b: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sf-radius: 12px;
	--sf-muted: #5a626c;
	--cn-roof: #1b2026;
	--cn-gold: #f6a821;
	--cn-ease: cubic-bezier(.16, 1, .3, 1);
	--sf-shadow: 0 2px 4px rgba(22, 26, 31, .06), 0 22px 44px -22px rgba(22, 26, 31, .35);
}
body { caret-color: var(--sf-accent); font-size: 17.5px; }
::selection { background: var(--cn-gold); color: var(--cn-roof); }
:focus-visible { outline: 3px solid var(--cn-gold); outline-offset: 3px; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.028em; text-wrap: balance; }
.sf-v2 h1 { font-size: clamp(36px, 5.2vw, 72px); line-height: 1.02; font-weight: 900; letter-spacing: -.032em; }
.sf-v2 h2 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.06; letter-spacing: -.03em; }
h3 { font-size: 21px; letter-spacing: -.02em; }
a { text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* Buttons */
.sf-btn, .wp-block-button__link { border-radius: 10px; font-weight: 800; font-size: 17.5px; letter-spacing: -.01em; transition: transform .3s var(--cn-ease), background-color .2s, box-shadow .2s; }
.sf-btn:hover, .wp-block-button__link:hover { transform: translateY(-2px); }
.sf-btn--accent:hover, .wp-block-button__link:hover { background: color-mix(in srgb, var(--sf-accent) 88%, #000); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .sf-btn:hover { transform: none; } }

/* Header */
.sf-topbar { background: var(--cn-roof); }
.sf-topbar .sf-i { color: var(--cn-gold); }
.sf-header { border-bottom: 0; box-shadow: 0 1px 0 var(--sf-line); }
.sf-nav a { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.sf-brand { font-weight: 900; letter-spacing: -.03em; }

/* ---------- Hero: aerial. The photo fills the first screen, the text sits on it ---------- */
.sf-hero-aerial .sf-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--cn-roof); color: #fff; padding: 0 20px; }
.sf-hero-aerial .sf-hero__photo { position: absolute; inset: 0; z-index: -2; height: auto; margin: 0; border-radius: 0; background: var(--cn-roof); container-type: size; }
.sf-hero-aerial .sf-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-hero-aerial .sf-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 21, 26, .72) 0, rgba(18, 21, 26, .58) 45%, rgba(18, 21, 26, .86) 100%); pointer-events: none; }
.sf-hero-aerial .sf-hero h1 { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .45); margin-bottom: 16px; }
.sf-hero-aerial .sf-hero .sf-lead { color: #eef0f2; opacity: 1; font-weight: 500; text-shadow: 0 1px 16px rgba(0, 0, 0, .5); }
.sf-hero-aerial .sf-hero .sf-checks { margin: 20px 0 0; display: grid; gap: 9px; font-weight: 600; font-size: 16px; }
.sf-hero-aerial .sf-hero .sf-checks li { color: #fff; }
.sf-hero-aerial .sf-hero .sf-checks li::before { background-color: var(--cn-gold); border-radius: 2px; }
.sf-hero-aerial .sf-hero .sf-actions { margin-top: 26px; }
.sf-hero-aerial .sf-hero .sf-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .7); background: rgba(18, 21, 26, .35); }
.sf-hero-aerial .sf-hero .sf-btn--ghost:hover { background: rgba(255, 255, 255, .14); }
.sf-hero-aerial .sf-hero__grid { position: static; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 44px 34px; }
.sf-hero-aerial .sf-hero__text { order: 1; }
.sf-hero-aerial .sf-hero__side { order: 3; }
.sf-hero-aerial .sf-hero .sf-form { border-top: 0; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.sf-hero-aerial .sf-hero .sf-form__submit { background: var(--sf-accent); color: var(--sf-accent-ink); }

/* Service pins: chips under the text on a phone, pinned to the roof edges on a wide screen */
.sf-pins { order: 2; }
.sf-pins__stage { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-pin { position: static; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px 9px 10px; border-radius: 9px; background: #fff; color: var(--sf-ink); font-weight: 700; font-size: 14.5px; line-height: 1.2; text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); min-height: 44px; }
.sf-pin b { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--cn-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cn-gold) 30%, transparent); }
.sf-pin span { display: block; }

@media (min-width: 981px) {
	.sf-hero-aerial .sf-hero__grid { max-width: var(--sf-maxw); grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: center; padding-block: 72px 76px; min-height: 560px; }
	.sf-hero-aerial .sf-hero__grid.sf-hero__grid--single { grid-template-columns: minmax(0, 1fr); max-width: 900px; min-height: 420px; }
	.sf-hero-aerial .sf-hero::after { background: linear-gradient(90deg, rgba(18, 21, 26, .82) 0, rgba(18, 21, 26, .55) 55%, rgba(18, 21, 26, .35) 100%), linear-gradient(0deg, rgba(18, 21, 26, .5), transparent 40%); }
	.sf-hero-aerial .sf-hero .sf-checks { grid-template-columns: 1fr 1fr; gap: 10px 26px; }

	/* Home: the house is the menu. Text centered on the roof, pins on the edges, the form docked as a bar. */
	.sf-hero-aerial.home .sf-hero::after { background: radial-gradient(46% 48% at 50% 56%, rgba(18, 21, 26, .66), rgba(18, 21, 26, 0) 74%), linear-gradient(180deg, rgba(18, 21, 26, .4) 0, rgba(18, 21, 26, 0) 20%, rgba(18, 21, 26, 0) 60%, rgba(18, 21, 26, .92) 100%); }
	.sf-hero-aerial.home .sf-hero__grid { max-width: var(--sf-maxw); grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 0; min-height: clamp(700px, calc(100svh - 118px), 940px); padding-block: 0 30px; text-align: center; }
	.sf-hero-aerial.home .sf-hero__text { align-self: end; justify-self: center; max-width: 680px; padding-block: 150px 34px; pointer-events: none; position: relative; z-index: 2; }
	.sf-hero-aerial.home .sf-hero__text :is(a, button) { pointer-events: auto; }
	.sf-hero-aerial.home .sf-hero h1 { font-size: clamp(44px, 4.9vw, 76px); text-shadow: 0 4px 40px rgba(0, 0, 0, .6); }
	.sf-hero-aerial.home .sf-hero .sf-lead { margin-inline: auto; font-size: 20px; max-width: 32em; text-shadow: 0 2px 18px rgba(0, 0, 0, .75); }
	.sf-hero-aerial.home .sf-hero:has(.sf-pins) .sf-checks { display: none; }
	.sf-hero-aerial.home .sf-hero .sf-actions { justify-content: center; }
	.sf-hero-aerial.home .sf-hero__side { position: relative; z-index: 3; }
	.sf-hero-aerial.home .sf-hero .sf-form { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 26px; align-items: center; padding: 14px 16px 12px 24px; text-align: left; }
	.sf-hero-aerial.home .sf-hero .sf-form__title { margin: 0; font-size: 21px; line-height: 1.1; max-width: 7em; }
	.sf-hero-aerial.home .sf-hero form { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: end; }
	.sf-hero-aerial.home .sf-hero .sf-form__grid { grid-template-columns: 1fr 1fr 1.25fr; }
	.sf-hero-aerial.home .sf-hero .sf-form__grid .sf-form__wide { grid-column: auto; }
	.sf-hero-aerial.home .sf-hero .sf-form__grid label:has(textarea) { display: none; }
	.sf-hero-aerial.home .sf-hero .sf-form__submit { width: auto; margin: 0; padding: 14px 28px; white-space: nowrap; }
	.sf-hero-aerial.home .sf-hero .sf-form__call { display: none; }
	.sf-hero-aerial.home .sf-hero :is(.sf-form__note, .sf-form__err, .sf-form__ok) { grid-column: 1 / -1; }
	.sf-hero-aerial.home .sf-hero .sf-form__note { margin-top: 8px; font-size: 12.5px; }

	/* The photo and the pins share one 3:2 stage, sized to cover, so a pin stays on its roof edge at any window size. */
	.sf-hero-aerial .sf-hero__photo--stage img,
	.sf-pins__stage { position: absolute; inset: auto; left: 50%; top: 50%; width: max(100cqw, 150cqh); height: auto; aspect-ratio: 3 / 2; transform: translate(-50%, -50%); }
	.sf-hero-aerial .sf-hero__photo--stage img { object-fit: fill; animation: cn-settle 2.2s var(--cn-ease) both; }
	.sf-pins { position: absolute; inset: 0; z-index: 1; container-type: size; overflow: hidden; pointer-events: none; }
	.sf-pins__stage { display: block; }
	.sf-pin { position: absolute; pointer-events: auto; padding: 0; background: none; box-shadow: none; gap: 10px; transform: translate(-11px, -50%); font-size: 15px; }
	.sf-pin--l { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -50%); }
	.sf-pin b { width: 22px; height: 22px; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
	.sf-pin b::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: cn-ping 2.8s var(--cn-ease) infinite; }
	.sf-pin:nth-child(2n) b::after { animation-delay: 1.3s; }
	.sf-pin span { background: #fff; padding: 9px 14px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: transform .35s var(--cn-ease); white-space: nowrap; }
	.sf-pin:hover span, .sf-pin:focus-visible span { background: var(--cn-gold); transform: translateX(4px); }
	.sf-pin--l:hover span, .sf-pin--l:focus-visible span { transform: translateX(-4px); }
}
@keyframes cn-settle { from { transform: translate(-50%, -50%) scale(1.1); } to { transform: translate(-50%, -50%); } }
@keyframes cn-ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sf-hero-aerial .sf-hero__photo--stage img, .sf-pin b::after { animation: none; } }

/* Phone: the house stays in view above the heading, then fades into the roof colour */
@media (max-width: 980px) {
	.sf-hero-aerial .sf-hero__photo { inset: 0 0 auto; height: min(80vw, 440px); }
	.sf-hero-aerial .sf-hero::after { background: linear-gradient(180deg, rgba(18, 21, 26, .18) 0, rgba(18, 21, 26, .12) min(26vw, 150px), var(--cn-roof) min(78vw, 430px)); }
	.sf-hero-aerial .sf-hero__grid { padding-top: min(47vw, 262px); }
	.sf-hero-aerial .sf-hero h1 { text-shadow: 0 2px 22px rgba(0, 0, 0, .7); }
	.sf-hero-aerial .sf-hero .sf-actions .sf-btn { flex: 1 1 100%; justify-content: center; }
}

/* Page heading band of pages with no hero */
.sf-pagehead { background: var(--cn-roof); }

/* Facts under the hero */
.sf-facts-line .sf-trust { padding: 20px 0; gap: 12px 28px; }
.sf-trust__item { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.sf-facts-line .sf-trust__item .sf-i { color: var(--sf-accent); }

/* Sections */
.sf-v2 .sf-section--white { background: #fff; }
.sf-feat-rule .sf-features h3 { font-size: 20px; }
.sf-photo img, .sf-v2 .sf-split .sf-photo img { border-radius: 14px; }

/* The first split section is the roof: dark, with the owner's facts ruled in gold */
.sf-hero-aerial .sf-content > .sf-section:has(> .sf-split):first-of-type,
.sf-hero-aerial .sf-trust + .sf-section:has(> .sf-split) { background: var(--cn-roof); color: #d5dae0; }
.sf-hero-aerial .sf-trust + .sf-section:has(> .sf-split) :is(h2, h3, strong) { color: #fff; }
.sf-hero-aerial .sf-trust + .sf-section:has(> .sf-split) :is(p, li) { color: #cdd3da; }
.sf-hero-aerial .sf-trust + .sf-section:has(> .sf-split) a { color: var(--cn-gold); }
.sf-hero-aerial .sf-trust + .sf-section:has(> .sf-split) .sf-feature,
.sf-hero-aerial .sf-trust + .sf-section:has(> .sf-split) .sf-features > .wp-block-group { border-top-color: var(--cn-gold); }
.sf-hero-aerial .sf-trust:has(+ .sf-section > .sf-split) { border-bottom: 0; }

/* Steps on the roof colour */
.sf-steps-row .sf-section:has(> ol.sf-steps) { background: var(--cn-roof); }
.sf-steps-row ol.sf-steps li::before { background: var(--cn-gold); color: var(--cn-roof); border-radius: 50%; font-weight: 800; }

/* Services: a ruled list with a round arrow */
.sf-cards-list .sf-section .sf-cards { border-top: 2px solid var(--sf-ink); gap: 0 48px; }
.sf-cards-list .sf-section .sf-card { padding: 18px 2px; gap: 14px; transition: padding .4s var(--cn-ease), color .2s; }
.sf-cards-list .sf-section .sf-card__icon { color: var(--sf-accent); }
.sf-cards-list .sf-section .sf-card__body strong { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.sf-cards-list .sf-section .sf-card__go { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--sf-ink); color: #fff; transition: background-color .25s, transform .4s var(--cn-ease); }
.sf-cards-list .sf-section .sf-card:hover { color: var(--sf-accent); padding-left: 10px; }
.sf-cards-list .sf-section .sf-card:hover .sf-card__go { background: var(--sf-accent); transform: rotate(-45deg); }

/* Towns */
.sf-pill { border-radius: 8px; font-weight: 700; background: #fff; transition: border-color .2s, color .2s, transform .3s var(--cn-ease); }
.sf-pill:hover { border-color: var(--sf-accent); color: var(--sf-accent); transform: translateY(-2px); }
.sf-pill .sf-i { color: var(--sf-accent); }

/* Forms, questions, posts */
.sf-form { border-radius: 14px; }
.sf-form input, .sf-form select, .sf-form textarea { border-radius: 8px; }
.sf-form__title { font-weight: 800; letter-spacing: -.02em; }
.sf-faq summary { font-weight: 800; letter-spacing: -.015em; }
.sf-post, .sf-card { border-radius: 14px; }
.sf-callnum { font-weight: 800; }

/* Closing band and footer */
.sf-cta-band .sf-content > .sf-cta { background: var(--sf-accent); color: #fff; }
.sf-cta-band .sf-content > .sf-cta h2 { color: #fff; font-size: clamp(30px, 4vw, 56px); }
.sf-cta .sf-btn--accent, .sf-cta .sf-btn--light { background: #fff; color: var(--sf-ink); }
.sf-cta .sf-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .75); background: var(--cn-roof); border-color: var(--cn-roof); }
.sf-footer { background: var(--cn-roof); }
.sf-footer__title { font-weight: 800; letter-spacing: -.01em; }
.sf-footer a:hover { color: var(--cn-gold); }
.sf-callbar { background: var(--cn-roof); }

/* Long headings beside the text stay in their column; a hero with no photo keeps its facts in a tidy block */
@media (min-width: 981px) {
	.sf-head-side .sf-section:not(:has(> .sf-split)) > h2 { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.1; }
	.sf-hero-aerial .sf-hero__grid--single .sf-checks { width: fit-content; margin-inline: auto; text-align: left; }
}