/* ============================================================================
   NarraFlo, marketing site: shared stylesheet for portfolio/, privacy and terms.

   The home page (index.html) is built from the "NarraFlo Landing v2" design and
   carries its own complete stylesheet; it does not load this file. These three
   pages keep their own layouts but take the home page's pastel palette, radii and
   easing through the tokens below, so the site reads as one.

   --nf-accent is the home page's CTA green and fills actions and the logo mark;
   --nf-accent-ink is its hover and small accent text; --nf-accent-line is the
   lighter sage used for rules. The logo mark steps through the palette every 20s
   (assets/logo-cycle.js), as it does on the home page.

   No build step: hand-written CSS. Page-specific rules stay inline in each page.
   ========================================================================= */

:root {
	/* Pastel palette, lifted from the home page (the "NarraFlo Landing v2" design) so
	   these pages match it: linen paper, charcoal ink with a green bias, sage. */
	--nf-paper: #FBF9F4;
	--nf-ink: #262A27;
	--nf-muted: #6E7570;
	--nf-faint: rgb(38 42 39 / 0.45);

	/* Bands: parchment for a quiet one, pale sage for the loud one and for the blocks
	   behind photographs. */
	--nf-wash: #F6F2EA;
	--nf-tint: #E8EFE9;
	--nf-tint-deep: #D7E4DA;

	/* --nf-accent fills actions and carries the logo: the home page's CTA green, which
	   holds white type. --nf-accent-ink is its hover and small accent text.
	   --nf-accent-line is the lighter sage the home page draws its rules in. */
	--nf-accent: #3F6350;
	--nf-accent-ink: #2F4D3D;
	--nf-accent-line: #7FA08C;
	--nf-accent-wash: #E8EFE9;
	--nf-accent-foreground: #ffffff;

	--nf-border: rgb(38 42 39 / 0.10);
	--nf-border-soft: rgb(38 42 39 / 0.06);

	--nf-font-display: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
	--nf-font-sans: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* The home page's radii: cards and media 20, small controls 12, actions are pills. */
	--nf-r-card: 20px;
	--nf-r-media: 20px;
	--nf-r-row: 14px;
	--nf-r-control: 12px;

	/* One curve everywhere, never overshoots (same as the home page). */
	--nf-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

	/* One gutter token drives every section, the nav and the footer, so the page
	   keeps a single vertical edge at any width. */
	--nf-gutter: clamp(20px, 5vw, 72px);
	--nf-max: 1280px;

	/* The sticky bar's real height, measured and written by each page's script. The
	   hero pulls itself up by exactly this to sit under a transparent bar; hard-coding
	   the number left a white sliver above the hero (1px at desktop, 5px on a phone)
	   that flashed into view whenever the bar faded back to transparent at the top.
	   The value below is only the pre-measurement fallback. */
	--nf-nav-h: 74px;
}

/* ---------------------------------------------------------------- reset --- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* The page ground is white and the home page opens on a dark full-bleed film, so a
	   rubber-band overscroll at the top flashed a white band above it. Killing the
	   bounce is the only way to stop that without giving the canvas a colour that would
	   then be wrong at the foot of the page. It also disables pull-to-refresh, which a
	   marketing page does not want anyway. */
	overscroll-behavior-y: none;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nf-nav-h) + 22px);
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	width: 100%;
	overflow-x: hidden;
	background: var(--nf-paper);
	color: var(--nf-ink);
	font-family: var(--nf-font-sans);
	font-size: 17px;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
video,
iframe,
svg {
	max-width: 100%;
}

::selection {
	background: var(--nf-tint-deep);
	color: var(--nf-ink);
}

:focus-visible {
	outline: 2px solid var(--nf-accent);
	outline-offset: 3px;
}

/* ----------------------------------------------------------- typography --- */

/* Fraunces at 300 is the whole voice of this system. Anything heavier reads as a
   different brand, so weight is never raised, only the size changes. */
.nf-display {
	margin: 0;
	font-family: var(--nf-font-display);
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: clamp(42px, 6.4vw, 92px);
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.nf-h2 {
	margin: 0;
	font-family: var(--nf-font-display);
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: clamp(30px, 4.4vw, 60px);
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.nf-h3 {
	margin: 0;
	font-family: var(--nf-font-display);
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: clamp(20px, 1.8vw, 25px);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* The second clause of a headline, set in the display italic. This is the single
   most recognisable move in the house style, so it carries no colour of its own. */
.nf-em {
	font-style: italic;
	font-weight: 300;
}

/* …and where the clause should also lift off the page, the accent italic. */
.nf-em-accent {
	font-style: italic;
	font-weight: 300;
	color: var(--nf-accent-ink);
}

/* The numbered section marker: `01 —— SELECTED WORK`. */
.nf-marker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 26px;
}

.nf-marker-no {
	font-family: var(--nf-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 17px;
	line-height: 1;
	color: var(--nf-accent-ink);
}

.nf-marker-rule {
	width: 36px;
	height: 1px;
	background: var(--nf-accent-line);
	flex: none;
}

.nf-marker-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--nf-muted);
}

/* Small uppercase label, used on its own (photo captions, form labels, nav). */
.nf-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--nf-muted);
}

.nf-lede {
	margin: 0;
	font-size: clamp(16px, 1.2vw, 18.5px);
	line-height: 1.75;
	color: var(--nf-muted);
}

/* The italic serif standfirst that sits under a headline. */
.nf-standfirst {
	margin: 0;
	font-family: var(--nf-font-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(18px, 1.8vw, 23px);
	line-height: 1.45;
	color: var(--nf-ink);
}

/* -------------------------------------------------------------- actions --- */

.nf-btn,
.nf-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 32px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--nf-font-sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background 200ms var(--nf-ease),
		border-color 200ms var(--nf-ease),
		color 200ms var(--nf-ease);
}

.nf-btn {
	background: var(--nf-accent);
	border-color: var(--nf-accent);
	color: var(--nf-accent-foreground);
}

.nf-btn:hover {
	background: var(--nf-accent-ink);
	border-color: var(--nf-accent-ink);
	color: var(--nf-accent-foreground);
}

.nf-btn-ghost {
	background: transparent;
	border-color: var(--nf-border);
	color: var(--nf-ink);
}

.nf-btn-ghost:hover {
	border-color: var(--nf-accent-line);
	color: var(--nf-accent-ink);
}

.nf-btn-sm {
	padding: 12px 22px;
	font-size: 11px;
}

/* The quiet text action: a serif line with a rule that slides out under it. */
.nf-textlink {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--nf-ink);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--nf-accent-line);
	transition: color 260ms var(--nf-ease);
}

.nf-textlink:hover {
	color: var(--nf-accent-ink);
}

.nf-textlink svg {
	transition: transform 650ms var(--nf-ease);
}

.nf-textlink:hover svg {
	transform: translateX(6px);
}

/* ---------------------------------------------------------------- shell --- */

.nf-section {
	position: relative;
	padding: clamp(64px, 10vh, 132px) var(--nf-gutter);
}

.nf-section-wash {
	background: var(--nf-wash);
}

.nf-inner {
	position: relative;
	max-width: var(--nf-max);
	margin: 0 auto;
}

.nf-inner-narrow {
	max-width: 880px;
}

/* The reference's headline row: a big display heading on the left, and a short
   note set small and right-aligned on the right. */
.nf-headrow {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: end;
}

.nf-headrow > p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--nf-muted);
	text-align: right;
}

.nf-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

@media (max-width: 900px) {
	.nf-headrow {
		grid-template-columns: 1fr;
		align-items: start;
	}
	.nf-headrow > p {
		text-align: left;
	}
	.nf-split {
		grid-template-columns: 1fr;
	}
}

/* A photograph with the corner brackets and the offset blush block behind it, as
   the studio site frames its images. Put the <img> inside .nf-frame-img. */
.nf-frame {
	position: relative;
}

.nf-frame::before {
	content: '';
	position: absolute;
	inset: auto auto -22px -22px;
	width: 62%;
	height: 62%;
	border-radius: var(--nf-r-media);
	background: var(--nf-tint);
	z-index: 0;
}

.nf-frame-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--nf-r-media);
	background: var(--nf-tint);
}

.nf-frame-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The two corner ticks. Decorative, so they are drawn on the wrapper's own
   pseudo-element stack rather than added to the markup. */
.nf-frame-tick {
	position: absolute;
	z-index: 2;
	width: 22px;
	height: 22px;
	pointer-events: none;
	border: 1px solid var(--nf-accent-line);
}

.nf-frame-tick--tl {
	top: -10px;
	left: -10px;
	width: 30px;
	height: 30px;
	border-right: 0;
	border-bottom: 0;
	/* Offset by 10px, so a concentric curve is the picture's radius plus that offset.
	   Reusing --nf-r-media flat would leave the bracket visibly looser than the corner
	   it frames. */
	border-top-left-radius: calc(var(--nf-r-media) + 10px);
}

.nf-frame-tick--br {
	right: -10px;
	bottom: -10px;
	width: 30px;
	height: 30px;
	border-top: 0;
	border-left: 0;
	border-bottom-right-radius: calc(var(--nf-r-media) + 10px);
}

.nf-rule {
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--nf-border);
}

/* ------------------------------------------------------------------ nav --- */

.nf-nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgb(255 255 255 / 0);
	border-bottom: 1px solid transparent;
	transition:
		background 320ms var(--nf-ease),
		border-color 320ms var(--nf-ease);
}

.nf-nav[data-scrolled='true'] {
	background: rgb(251 249 244 / 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom-color: var(--nf-border-soft);
}

/* Over a full-bleed hero photograph the bar starts transparent with light type, and
   swaps to paper the moment the page scrolls. The logo is an inline SVG whose
   wordmark is currentColor, so it follows the link's colour on its own; the butterfly
   stays brand pink in both states. */
/* Going transparent is INSTANT; coming back to paper keeps the soft fade.
   Fading both ways at 320ms meant a fast flick back to the top outran the fade, and a
   half-white band sat across the dark hero for the rest of it. That band is the white
   flash. Asymmetry is the fix: there is nothing to ease out of when the film is
   already behind the bar, but easing in over the light strip still reads well. */
.nf-nav--over,
.nf-nav--over .nf-nav-brand {
	transition-duration: 0s;
}

.nf-nav--over {
	background: rgb(255 255 255 / 0);
}

.nf-nav--over .nf-nav-brand {
	color: #ffffff;
}

.nf-nav--over .nf-navlink {
	color: #ffffff;
}

.nf-nav--over .nf-navlink:hover {
	color: var(--nf-accent);
}

.nf-nav--over .nf-burger {
	border-color: rgb(255 255 255 / 0.5);
}

.nf-nav--over .nf-burger span {
	background: #ffffff;
}

/* While the phone menu is open the panel is paper, so the bar has to come back to
   ink type even though the page has not scrolled. */
.nf-nav--over:has(.nf-menu[data-open='true']) .nf-nav-brand {
	color: var(--nf-ink);
}

.nf-nav--over:has(.nf-menu[data-open='true']) .nf-navlink {
	color: var(--nf-ink);
}

.nf-nav--over:has(.nf-menu[data-open='true']) .nf-burger {
	border-color: var(--nf-border);
}

.nf-nav--over:has(.nf-menu[data-open='true']) .nf-burger span {
	background: var(--nf-ink);
}

.nf-nav-inner {
	max-width: var(--nf-max);
	margin: 0 auto;
	padding: 18px var(--nf-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.nf-logo {
	display: block;
	height: 24px;
	width: auto;
	opacity: 1;
	transition: opacity 260ms var(--nf-ease);
}

.nf-nav-brand {
	display: flex;
	align-items: center;
	color: var(--nf-ink);
	text-decoration: none;
	transition: color 300ms var(--nf-ease);
}

.nf-nav-brand:hover .nf-logo {
	opacity: 0.6;
}

/* The butterfly is the brand mark and never changes colour with the wordmark. */
.nf-logo-mark {
	fill: var(--nf-logo-mark, var(--nf-accent));
	transition: fill 1600ms var(--nf-ease);
}

.nf-nav-links {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.2vw, 30px);
}

.nf-navlink {
	position: relative;
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--nf-ink);
	padding-bottom: 4px;
	transition: color 200ms var(--nf-ease);
}

.nf-navlink::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--nf-accent-line);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 300ms var(--nf-ease);
}

.nf-navlink:hover {
	color: var(--nf-accent-ink);
}

.nf-navlink:hover::after,
.nf-navlink[aria-current='page']::after {
	transform: scaleX(1);
}

.nf-burger {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: transparent;
	border: 1px solid var(--nf-border);
	border-radius: var(--nf-r-control);
	cursor: pointer;
	transition: border-color 240ms var(--nf-ease);
}

.nf-burger:hover {
	border-color: var(--nf-accent-line);
}

.nf-burger span {
	display: block;
	width: 16px;
	height: 1px;
	background: var(--nf-ink);
	transition:
		transform 280ms var(--nf-ease),
		opacity 180ms var(--nf-ease);
}

.nf-burger[aria-expanded='true'] span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.nf-burger[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}

.nf-burger[aria-expanded='true'] span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.nf-menu {
	display: none;
	overflow: hidden;
	max-height: 0;
	background: var(--nf-paper);
	border-top: 1px solid var(--nf-border-soft);
	transition: max-height 340ms var(--nf-ease);
}

.nf-menu[data-open='true'] {
	max-height: 380px;
}

.nf-menu a {
	display: block;
	padding: 16px var(--nf-gutter);
	border-bottom: 1px solid var(--nf-border-soft);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--nf-ink);
}

.nf-menu a:last-child {
	border-bottom: none;
	color: var(--nf-accent-ink);
}

.nf-menu a:active {
	background: var(--nf-wash);
}

@media (max-width: 940px) {
	.nf-nav-links .nf-navlink {
		display: none;
	}
	.nf-burger {
		display: flex;
	}
	.nf-menu {
		display: block;
	}
	.nf-nav:has(.nf-menu[data-open='true']) {
		background: var(--nf-paper);
	}
}

@media (max-width: 560px) {
	.nf-nav-links > .nf-btn {
		display: none;
	}
}

/* --------------------------------------------------------------- footer --- */

.nf-footer {
	background: var(--nf-paper);
	border-top: 1px solid var(--nf-border-soft);
	padding: clamp(56px, 9vh, 96px) var(--nf-gutter) 36px;
}

.nf-footer-inner {
	max-width: var(--nf-max);
	margin: 0 auto;
}

/* The oversized serif wordmark that opens the studio's footer. */
.nf-wordmark {
	margin: 0 0 clamp(32px, 5vh, 52px);
	font-family: var(--nf-font-display);
	font-weight: 300;
	font-size: clamp(38px, 6vw, 76px);
	line-height: 1;
	letter-spacing: -0.035em;
}

.nf-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
}

@media (max-width: 760px) {
	.nf-footer-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

.nf-footer-label {
	margin: 0 0 14px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nf-accent-ink);
}

.nf-flink {
	color: var(--nf-muted);
	font-size: 15px;
	text-decoration: none;
	transition: color 240ms var(--nf-ease);
}

.nf-flink:hover {
	color: var(--nf-accent-ink);
}

.nf-footer-bottom {
	margin-top: clamp(36px, 5vh, 56px);
	padding-top: 24px;
	border-top: 1px solid var(--nf-border-soft);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: var(--nf-faint);
}

/* ----------------------------------------------------------- back to top --- */

.nf-totop {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 65;
	width: 46px;
	height: 46px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nf-accent);
	color: var(--nf-accent-foreground);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition:
		opacity 650ms var(--nf-ease),
		transform 650ms var(--nf-ease),
		background 200ms var(--nf-ease),
		color 200ms var(--nf-ease);
}

.nf-totop.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.nf-totop:hover {
	background: var(--nf-accent-ink);
	color: var(--nf-accent-foreground);
}

/* --------------------------------------------------------------- motion --- */

/* His badge, at his speed: 34s for a full turn. */
@keyframes nf-spin {
	to {
		transform: rotate(360deg);
	}
}

.nf-seal-text {
	transform-origin: 50% 50%;
	animation: nf-spin 34s linear infinite;
}

/* Scroll reveal. The hidden state is applied by the script, so a visitor without
   JS (or with reduced motion) sees the page fully rendered. A fade and a very
   short lift: this house style does not bounce. */
[data-reveal].nf-armed {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 750ms var(--nf-ease),
		transform 750ms var(--nf-ease);
}

[data-reveal].nf-armed.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* --------------------------------------------------------------- guides --- */
/* The guide pages (outsourcing, highlight films, cost) run at a reading width,
   like the legal pages, with a closing call to action. */

.nf-guide {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(48px, 9vh, 96px) var(--nf-gutter) clamp(64px, 11vh, 112px);
}

.nf-guide .nf-guide-eyebrow {
	margin: 0 0 24px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nf-accent-ink);
}

.nf-guide h1 {
	margin: 0;
	font-family: var(--nf-font-display);
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: clamp(36px, 5.2vw, 62px);
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.nf-guide .nf-guide-intro {
	margin: 32px 0 0;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--nf-border);
	font-family: var(--nf-font-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.55;
	color: var(--nf-ink);
}

.nf-guide h2 {
	margin: 52px 0 18px;
	font-family: var(--nf-font-display);
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.14;
	letter-spacing: -0.03em;
}

.nf-guide p,
.nf-guide li {
	font-size: 16px;
	line-height: 1.8;
	color: var(--nf-muted);
}

.nf-guide p { margin: 0 0 18px; }

.nf-guide ul {
	margin: 0 0 18px;
	padding-left: 1.2em;
}

.nf-guide li { margin-bottom: 8px; }

.nf-guide li::marker { color: var(--nf-accent-line); }

.nf-guide strong {
	font-weight: 600;
	color: var(--nf-ink);
}

.nf-guide a:not(.nf-btn) {
	color: var(--nf-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--nf-accent-line);
	transition: color 240ms var(--nf-ease);
}

.nf-guide a:not(.nf-btn):hover { color: var(--nf-accent-ink); }

.nf-guide-cta {
	margin-top: 60px;
	padding: clamp(28px, 4vw, 44px);
	border-radius: var(--nf-r-card);
	background: var(--nf-tint);
}

.nf-guide-cta h2 { margin-top: 0; }

.nf-guide-cta p:last-child { margin: 26px 0 0; }

.nf-guide-foot {
	border-top: 1px solid var(--nf-border-soft);
	padding: 36px var(--nf-gutter);
}

.nf-guide-foot-inner {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 26px;
	font-size: 12.5px;
	color: var(--nf-faint);
}

.nf-guide-foot-inner nav {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.nf-guide-foot-inner a {
	color: var(--nf-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--nf-accent-line);
}