/*
	TIW's new look, site-wide (Stage 1 style, approved by Oliver 30 Sep 2026; decisions in
	planning/tiw/DECISIONS.md). Loaded after the old theme's main.css on every page and layered over it,
	so removing this file and its link brings the old look back. The reference is /style-sample.html.
	Words and page structure are unchanged; the page-by-page redesign is Stage 3b.
*/

:root {
	--nl-coral: #D9643A;        /* sunset coral: eyebrows, edge accents, quieter button outlines */
	--nl-coral-deep: #C0522D;   /* deeper coral: booking and selling buttons, white text */
	--nl-coral-deep-hover: #AE4826;
	--nl-radius: 3px;           /* barely rounded, everywhere */
	--nl-shadow-ink: rgba(2, 10, 5, .46);
	--nl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
	--nl-ripple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8C300 8 380 10.2 450 10.1S560 5 640 5 820 9.3 900 8.8 1100 7.9 1200 8' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ---------- Background: leaf photo (a little darker), silhouette willow, grain ---------- */
body { background: #122417; color: rgba(255, 255, 255, .86); }
.nl-layer { position: fixed; inset: 0; pointer-events: none; }
.nl-leaves {
	z-index: -3;
	background: linear-gradient(rgba(6, 14, 8, .3), rgba(6, 14, 8, .3)), linear-gradient(rgba(35, 74, 46, .5), rgba(35, 74, 46, .5)), url("../../images/bg_long-resize.jpg") center / cover no-repeat;
}
.nl-willow { z-index: -2; overflow: hidden; }
.nl-grain { z-index: -1; background-image: var(--nl-grain); background-size: 220px 220px; opacity: .55; mix-blend-mode: soft-light; }

.nl-willow svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nl-willow .br, .nl-willow .tw { fill: none; stroke: var(--nl-shadow-ink); stroke-width: 2.2; stroke-linecap: round; }
.nl-willow .lf { fill: var(--nl-shadow-ink); stroke: none; }
.nl-sw { animation: nl-sway var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes nl-sway { from { transform: rotate(calc(var(--a) * -1)); } to { transform: rotate(var(--a)); } }
.nl-drift-set { position: absolute; inset: 0; }
.nl-drift { position: absolute; left: var(--x); top: -3rem; width: var(--w); animation: nl-fall var(--fall) linear var(--dl) infinite; }
.nl-drift svg { position: static; display: block; width: 100%; height: auto; overflow: visible; animation: nl-drift var(--sway) ease-in-out var(--dl) infinite alternate; }
@keyframes nl-fall { from { transform: translate(0, 0); } to { transform: translate(var(--dx), calc(var(--h, 900px) + 6rem)); } }
@keyframes nl-drift { from { transform: translateX(-1.6rem) rotate(calc(var(--r) - 28deg)); } to { transform: translateX(1.6rem) rotate(calc(var(--r) + 28deg)); } }
@keyframes nl-waver { from { transform: translateX(calc(var(--a) * -1)); } to { transform: translateX(var(--a)); } }

/* ---------- Buttons ---------- */
/* less important: a sunset-coral outline with white text, on a frosted blur */
input[type="submit"], input[type="reset"], input[type="button"], button, .button {
	border-radius: var(--nl-radius);
	background-color: rgba(255, 255, 255, .06);
	box-shadow: inset 0 0 0 1px var(--nl-coral);
	-webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover, .button:hover {
	background-color: rgba(217, 100, 58, .18);
	box-shadow: inset 0 0 0 1px var(--nl-coral);
	color: #fff !important;
}
/* booking and selling: deeper coral, white text */
input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary, button.primary, .button.primary {
	background-color: var(--nl-coral-deep);
	box-shadow: none;
	-webkit-backdrop-filter: none; backdrop-filter: none;
}
input[type="submit"].primary:hover, input[type="reset"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover {
	background-color: var(--nl-coral-deep-hover);
	box-shadow: none;
}

/* ---------- Text boxes: soft tint, and frosted for the questions ---------- */
/* the theme rounds boxes and photos in several more specific rules, so the corners are forced here */
.box { border: 0; border-radius: var(--nl-radius) !important; background: rgba(6, 18, 9, .46); }
.box:has(.fa-question-circle) {
	background: rgba(255, 255, 255, .07);
	-webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
}

/* ---------- Dividers: one long, very shallow ripple instead of the squiggle ---------- */
.squiggle {
	background-image: var(--nl-ripple) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	background-position: center !important;
	min-height: 16px !important;
}

/* ---------- Photos: barely rounded, with a light warm grade (easy to remove later) ---------- */
.image, .image img, img.image, .split img, .wrapper img:not([src*="logo"]), #main img:not([src*="logo"]) { border-radius: var(--nl-radius) !important; }
.wrapper img:not([src*="logo"]), #main img:not([src*="logo"]) { filter: sepia(.14) saturate(1.08) brightness(1.02); }

/* ---------- Footer: the shoreline, with logo, links and contact icons in one row ---------- */
.nf {
	position: relative; margin-top: 4rem; padding: 5.5rem 0 2.2rem;
	background: linear-gradient(rgba(10, 24, 14, 0) 1.5rem, rgba(10, 24, 14, .88) 6.5rem);
	color: rgba(255, 255, 255, .74); font-size: .95rem; line-height: 1.6;
}
.nf-shore { position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none; overflow: hidden; }
.nf-shore svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nf-shore path { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.nf-shore .faint { stroke: rgba(255, 255, 255, .18); }
.nf-shore g { animation: nl-waver var(--d) ease-in-out var(--dl) infinite alternate; }
.nf-body {
	position: relative; max-width: 68rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
}
.nf-logo { display: block; }
.nf-logo img { display: block; width: 9rem; height: auto; }
.nf-links { display: flex; flex-wrap: wrap; gap: .1rem 1.3rem; }
.nf-links a {
	padding-block: .45rem; color: #fff; text-decoration: none;
	font: 700 .7rem "Avenir Next", sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.nf-links a:hover { text-decoration: underline; }
.nf-icons { display: flex; gap: .5rem; margin: 0; }
.nf-icons a { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); color: #fff; }
.nf-icons a:hover { box-shadow: inset 0 0 0 1px #fff; }
.nf-icons svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nf-small { flex-basis: 100%; margin: .4rem 0 0; font-size: .82rem; color: rgba(255, 255, 255, .7); }
.nf-small a { color: #fff; }
@media (max-width: 520px) {
	.nf-body { flex-direction: column; align-items: flex-start; }
}

/* ---------- Hold still: the phone's "reduce motion" setting ---------- */
@media (prefers-reduced-motion: reduce) {
	.nl-sw, .nl-drift, .nl-drift svg, .nf-shore g { animation: none !important; }
	.nl-drift { top: 0; transform: translate(0, var(--sy)); }
	.nl-drift svg { transform: rotate(var(--r)); }
}