/* Fern Hill case study. Palette from the Visual System board: Soot #0F0F0F, Fern #5D592E, Ember,
   Cloud, Rusty Orange #C66E01, Daylight #F2E7BF. Poppins for labels and body, Work Sans for headlines,
   Helvetica for captions (as in the XD). Chrome bottom-left (tent mark + section name) and a ↘ arrow
   bottom-right, coloured Rusty Orange on light boards and Daylight on dark ones. */

body.case-fern-hill main { margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); }
.fh {
  --soot: #0f0f0f; --fern: #5d592e; --rust: #c66e01; --day: #f2e7bf; --paper: #fff9e5; --cloud: #b9dadf;
  --pad: clamp(18px, 3vw, 56px);
  --gap: clamp(12px, 2vw, 36px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --cap: Helvetica, "Helvetica Neue", Arial, sans-serif;
  background: var(--day); color: var(--soot);
  font: 400 clamp(14px, .95vw, 18px)/1.5 "Poppins", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
.fh figure { margin: 0; }
.fh img { display: block; width: 100%; height: auto; }
.fh p { margin: 0; }
.fh h2 { margin: 0; font-weight: 400; }
.fh :focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.fh .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fh-logo { display: inline-block; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.fh-logo-logo-primary { aspect-ratio: 600 / 414.58; }
.fh-logo-mark { aspect-ratio: 450 / 384.06; }
.fh-logo-lockup { aspect-ratio: 715 / 610.23; }
.fh-logo-sbm { aspect-ratio: 315.89 / 263.33; }
.fh-cap { display: grid; grid-template-columns: 2.5em 1fr; gap: 1em; padding-top: 8px; font: 13px/1.3 var(--cap); color: #000; }
.fh-cap-t { padding-top: 8px; font: clamp(13px, .95vw, 18px)/1.3 var(--cap); color: #909090; }
.fh-side-label { position: absolute; left: clamp(10px, 1.4vw, 28px); top: clamp(80px, 22vw, 440px); writing-mode: vertical-rl; transform: rotate(180deg); font: 400 clamp(14px, 1.05vw, 20px) "Poppins", sans-serif; color: var(--rust); }

/* Same Ground context */
.fh-intro { background: var(--ground); color: var(--ink); padding: clamp(40px, 8vw, 110px) max(var(--gutter), env(safe-area-inset-left, 0px)) 40px; }
.fh-intro h1 { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; letter-spacing: -.02em; font-weight: 400; margin: 10px 0 32px; }
.fh-intro .meta { margin: 0; }

/* Chrome */
.fh-chrome { position: fixed; z-index: 16; inset: auto 0 0 0; height: 0; pointer-events: none; color: var(--rust); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s, color .4s; }
.fh.chrome-on .fh-chrome { opacity: 1; visibility: visible; }
.fh.tone-dark .fh-chrome { color: var(--day); }
.fh-menu-btn { pointer-events: auto; position: absolute; left: 18px; bottom: 18px; width: 44px; height: 44px; padding: 7px; border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; transition: transform .3s var(--ease); }
.fh-menu-btn .fh-logo { width: 32px; }
.fh-menu-btn:hover { transform: translateY(-2px) rotate(-6deg); }
.fh-where { position: absolute; left: 70px; bottom: 28px; font: 400 clamp(14px, 1.05vw, 20px)/1 "Poppins", sans-serif; white-space: nowrap; }
.fh-next { pointer-events: auto; position: absolute; right: 18px; bottom: 16px; width: 48px; height: 48px; display: grid; place-items: center; color: inherit; }
.fh-next svg { width: 38px; height: 38px; transition: transform .4s var(--ease); }
.fh-next:hover svg { transform: translate(3px, 3px); }
.fh-next.is-last { opacity: 0; pointer-events: none; }
.fh-menu {
  position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: min(340px, 86vw); padding: 36px 32px; overflow-y: auto;
  background: var(--day); color: var(--rust); box-shadow: 20px 0 60px -30px rgba(0, 0, 0, .4);
  transform: translateX(-102%); transition: transform .5s var(--ease), visibility .5s; visibility: hidden;
}
.fh-menu[hidden] { display: block; }
.fh-menu.open { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
.fh-menu-h { font: 700 clamp(24px, 2vw, 36px)/1.1 "Work Sans", sans-serif; margin: 28px 0 12px !important; }
.fh-menu-h:first-child { margin-top: 0 !important; }
.fh-menu ul { list-style: none; margin: 0; padding: 0; }
.fh-menu a { display: block; padding: 6px 0; color: inherit; text-decoration: none; font: 400 17px "Poppins", sans-serif; transition: transform .25s var(--ease); }
.fh-menu a:hover, .fh-menu a[aria-current] { transform: translateX(6px); }
.fh-menu a[aria-current]::before { content: "→ "; }

/* Sections */
.fh-sec { position: relative; }
.fh-full { min-height: 100svh; overflow: hidden; }
.fh-bg { position: absolute; inset: 0; z-index: 0; }
.fh-vid { position: relative; overflow: hidden; background: #2a2817; }
.fh-vid.fh-bg { position: absolute; }
.fh-vid video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fh-bg-contain video { object-fit: cover; }
.fh-vid-toggle { position: absolute; z-index: 3; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(242, 231, 191, .9); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.fh-vid:hover .fh-vid-toggle, .fh-sec:hover > .fh-vid .fh-vid-toggle, .fh-vid-toggle:focus-visible, .fh-vid-toggle[data-state="paused"] { opacity: 1; }
@media (hover: none) { .fh-vid-toggle { opacity: .9; } }
.fh-vid-toggle span { width: 9px; height: 11px; border-inline: 3px solid var(--soot); }
.fh-vid-toggle[data-state="paused"] span { width: 0; height: 0; border: 0; border-left: 10px solid var(--soot); border-block: 6px solid transparent; margin-left: 3px; }
.fh-bleed { overflow: hidden; }
.fh-bleed img, [data-zoom] img { transform: scale(var(--z, 1)); }

/* Moodboard: the word turns sideways and the wall of photos scrolls past it */
.fh-mood-title { min-height: 100svh; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 0 clamp(10px, 2vw, 30px); overflow: hidden; }
.fh-moodword { font: 800 clamp(64px, 9vw, 171px)/.8 "Work Sans", sans-serif; color: var(--rust); letter-spacing: -.01em; transform: translateX(var(--mx, 0)); }
.fh-mood { display: grid; grid-template-columns: clamp(60px, 9.6vw, 184px) 1fr; padding: 0 clamp(18px, 1.8vw, 35px) clamp(60px, 6vw, 120px) 0; }
.fh-mood-side { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; }
.fh-mood-side { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 clamp(48px, 8.9vw, 171px)/1 "Work Sans", sans-serif; color: var(--rust); letter-spacing: -.01em; }
.fh-mood-wall { list-style: none; margin: 0; padding: clamp(20px, 2.2vw, 42px) 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, .85vw, 16px); }
.fh-mood-wall li { aspect-ratio: 1; border-radius: clamp(8px, .8vw, 14px); overflow: hidden; background: #e7dcb2; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.fh-mood-wall img { width: 100%; height: 100%; object-fit: cover; }
.fh-mood-wall li:hover { transform: translateY(-6px) rotate(-1deg) scale(1.04); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .45); z-index: 1; position: relative; }
.fh-js .fh-mood-wall li { opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .8s var(--ease), transform .8s var(--ease), box-shadow .5s; transition-delay: calc(var(--i) * 70ms); }
.fh-js .fh-mood-wall li.in { opacity: 1; transform: none; }
.fh-js .fh-mood-wall li.in:hover { transform: translateY(-6px) rotate(-1deg) scale(1.04); transition-delay: 0s; }

/* Project overview: ferns drift at different speeds over the hillside */
.fh-overview { position: absolute; inset: 0; overflow: hidden; background: #b36f22; }
.fh-overview > img:first-child { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.fh-overview .fern { position: absolute; width: auto; transform: translateY(var(--py, 0)) rotate(var(--r, 0deg)); transform-origin: 50% 100%; animation: fh-sway 7s ease-in-out infinite alternate; }
.fern.f1 { left: -6%; bottom: -14%; height: 82%; --r: -4deg; }
.fern.f2 { left: 28%; bottom: -20%; height: 64%; animation-duration: 9s; }
.fern.f3 { right: -8%; bottom: -16%; height: 88%; --r: 6deg; animation-duration: 8s; }
.fern.f4 { left: 52%; bottom: -10%; height: 56%; animation-duration: 10s; opacity: .95; }
@keyframes fh-sway { to { rotate: 1.6deg; } }

/* Project approach */
.fh-approach { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(20px, 3vw, 60px); padding: clamp(60px, 10vw, 197px) var(--pad) clamp(80px, 8vw, 160px) clamp(56px, 9.3vw, 178px); align-items: start; }
.fh-approach img { aspect-ratio: 447 / 589; object-fit: cover; }
.a-acc1 { grid-column: 1 / 4; grid-row: 1; }
.a-acc2 { grid-column: 4 / 7; grid-row: 1; }
.a-cap1 { grid-column: 1 / 4; grid-row: 2; margin-top: calc(-1 * clamp(20px, 3vw, 60px)) !important; }
.a-text { grid-column: 7 / 11; grid-row: 1; font: 400 clamp(13px, .95vw, 18px)/1.35 var(--cap); color: #121212; }
.a-text p + p { margin-top: 1.2em; }
.a-pool { grid-column: 1 / 4; grid-row: 3; }
.a-vid { grid-column: 9 / 13; grid-row: 3; aspect-ratio: 592 / 333; margin-right: calc(-1 * var(--pad)); align-self: start; }
.a-fire { grid-column: 7 / 10; grid-row: 4; margin-top: -40%; }
.a-spa { grid-column: 1 / 5; grid-row: 5; }
.a-spa img { aspect-ratio: 524 / 954; }
.a-rest { grid-column: 1 / 4; grid-row: 6; }
.a-cafe { grid-column: 4 / 7; grid-row: 6; }
.a-bar { grid-column: 7 / 10; grid-row: 6; }
.fh-approach figure { overflow: hidden; }
.fh-approach figure img { transition: transform 1.2s var(--ease); }
.fh-approach figure:hover img { transform: scale(1.04); }

/* Core values: hover or focus one value to bring its text forward */
.fh-values { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 26%) 7.5% 1fr; row-gap: clamp(14px, 2vw, 40px); padding: clamp(80px, 18vw, 340px) var(--pad) 120px clamp(24px, 6.1vw, 117px); color: var(--day); }
#values .fh-vid.fh-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 15, 15, .72) 0%, rgba(15, 15, 15, .5) 45%, rgba(15, 15, 15, .2) 80%); pointer-events: none; }
.fh-value { display: contents; }
.fh-value > * { transition: opacity .4s, transform .4s var(--ease); font: 400 clamp(13px, .8vw, 15px)/1.45 var(--cap); }
.v-text { grid-column: 1; }
.v-num { grid-column: 2; text-align: right; padding-right: 1.4em; }
.v-name { grid-column: 3; font-size: clamp(15px, 1vw, 18px) !important; }
.fh-values:has(.fh-value:hover, .fh-value:focus) .fh-value:not(:hover):not(:focus) > * { opacity: .35; }
.fh-value:hover .v-name, .fh-value:focus .v-name { transform: translateX(8px); }
.fh-value:focus { outline: none; }
.fh-value:focus-visible .v-name { text-decoration: underline; text-underline-offset: 4px; }

/* Brand concept: two slideshows, in step */
.fh-concept { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.c-left { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(60px, 6vw, 118px) clamp(24px, 5.4vw, 104px) 60px; }
.c-card { position: relative; aspect-ratio: 752 / 843; border-radius: clamp(16px, 2vw, 40px); overflow: hidden; background: #1c2d33; }
.c-right { position: relative; overflow: hidden; background: #3a2a1c; }
[data-slides] figure { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
[data-slides] figure.is-on { opacity: 1; }
[data-slides] img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 3s linear; }
[data-slides] figure.is-on img { transform: none; }
.c-line { display: grid; margin-top: 18px !important; font: 500 clamp(22px, 2.1vw, 40px)/1.1 "Zilla Slab", Georgia, serif; color: var(--rust); }
.c-line .c-1 { order: 2; padding-left: 14%; }
.c-line .c-2 { order: 1; justify-self: end; padding-right: 8%; }

/* Brand name: the name animation, full screen */
.fh-name { background: #dcd8c6; }

/* Brand logo: colourway switcher, then the logo in motion */
.fh-logo-stage { min-height: 100svh; display: grid; place-items: center; align-content: center; gap: 36px; background: var(--bg); color: var(--fg); transition: background .6s var(--ease), color .6s var(--ease); padding: 80px var(--pad); }
.fh-logo-xl { width: min(600px, 62vw); }
.fh-ways { display: flex; gap: 12px; }
.fh-ways button { width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer; background: var(--b); border: 2px solid rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); display: grid; place-items: center; transition: transform .25s var(--ease); }
.fh-ways button i { width: 12px; height: 12px; border-radius: 50%; background: var(--f); }
.fh-ways button:hover { transform: scale(1.12); }
.fh-ways button[aria-checked="true"] { box-shadow: 0 0 0 2px currentColor; }
.fh-ways-name { font: 400 13px "Poppins", sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
/* Logo transition, scrubbed by scroll: clean type → cut apart → weathered edges → the final logo.
   Without JS (or with reduced motion) it simply shows the finished logo. */
.fh-morph { position: relative; background: var(--day); color: var(--rust); }
.fh-js .fh-morph { height: 260svh; }
.fh-morph-stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; align-content: center; gap: clamp(28px, 4vw, 60px); padding: 60px var(--pad) 90px; }
.fh-morph-art { position: relative; width: min(600px, 74vw); aspect-ratio: 600 / 415; }
.fh-morph-type, .fh-morph-logo { position: absolute; inset: 0; width: 100%; height: 100%; }
.fh-morph-type { overflow: visible; opacity: 0; }
.fh-morph-type text { font: 800 212px/1 "Poppins", "Work Sans", sans-serif; letter-spacing: -.01em; }
.fh-js .fh-morph-type { opacity: var(--t, 1); }
.fh-js .fh-morph-logo { opacity: var(--l, 0); transform: scale(calc(1.06 - .06 * var(--l, 0))); }
.fh-morph-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 3vw, 44px); font: 400 clamp(11px, .85vw, 14px) "Poppins", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.fh-morph-steps li { opacity: .35; transition: opacity .3s; white-space: nowrap; }
.fh-morph-steps li.on { opacity: 1; }
.fh-morph-steps li.on::after { content: ""; display: block; height: 1px; margin-top: 6px; background: currentColor; }
html:not(.fh-js) .fh-morph-steps, .fh-morph:not(.ready) .fh-morph-steps { display: none; }

/* Key visuals */
/* Key visual hero: perfect shapes become organic cut-paper shapes, on loop (SVG animate) */
.fh-kv-hero { position: relative; aspect-ratio: 1920 / 1000; overflow: hidden; background: #3b2a12; }
.fh-kv-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kv-wash { position: absolute; inset: 0; background: #c66e01; mix-blend-mode: soft-light; }
.fh-kv-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 1 Sense of Play: a little rally game drawn on canvas */
.kv-game { display: block; width: 100%; aspect-ratio: 1; background: #ba7328; }
/* 2 Movement: the cliffs slide apart to reveal the sunset, then close */
.kv-move { position: relative; aspect-ratio: 1; overflow: hidden; background: #1c140d; }
.kv-move img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.kv-move .cliff { position: absolute; inset: 0; width: 100%; height: 100%; }
.fh-js .kv-move.run .cl { animation: fh-cl 6s var(--ease) infinite; }
.fh-js .kv-move.run .cr { animation: fh-cr 6s var(--ease) infinite; }
@keyframes fh-cl { 0%, 12% { transform: none; } 40%, 72% { transform: translateX(-62%); } 95%, 100% { transform: none; } }
@keyframes fh-cr { 0%, 12% { transform: none; } 40%, 72% { transform: translateX(62%); } 95%, 100% { transform: none; } }
/* 3 Nostalgic camping: each badge pans into view in turn, on loop */
.kv-camp { position: relative; aspect-ratio: 1; overflow: hidden; background: #6b3a1c; }
.kv-camp > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.45) saturate(.8) contrast(.95); }
.kv-camp::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 45%, rgba(40, 20, 6, .55)); pointer-events: none; }
.camp-strip { position: absolute; inset: 0; display: flex; }
.camp-item { flex: 0 0 100%; display: grid; place-items: center; align-content: center; gap: 6%; }
.camp-badge { width: 58%; aspect-ratio: 1; border-radius: 50%; background: #f2e7bf; box-shadow: 0 0 0 6px #f2e7bf, 0 0 0 9px #c66e01, 0 18px 30px -12px rgba(0, 0, 0, .55); display: grid; place-items: center; }
.camp-badge svg { width: 72%; }
.camp-name { font: 700 clamp(13px, 1.3vw, 22px) "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #f2e7bf; text-shadow: 0 2px 0 #6b3a1c; }
.camp-grain { position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.fh-js .kv-camp.run .camp-strip { animation: fh-pan 16s cubic-bezier(.7, 0, .3, 1) infinite; }
@keyframes fh-pan {
  0%, 9% { transform: translateX(0); } 12.5%, 21.5% { transform: translateX(-100%); } 25%, 34% { transform: translateX(-200%); }
  37.5%, 46.5% { transform: translateX(-300%); } 50%, 59% { transform: translateX(-400%); } 62.5%, 71.5% { transform: translateX(-500%); }
  75%, 84% { transform: translateX(-600%); } 87.5%, 96.5% { transform: translateX(-700%); } 100% { transform: translateX(-800%); }
}
/* 4 Playful text: clean setting, then the letters tumble into a playful one, on loop */
.kv-type { position: relative; aspect-ratio: 1; overflow: hidden; background: #2d4a5c; }
.kv-type > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kv-type-tint { position: absolute; inset: 0; background: #c66e01; mix-blend-mode: exclusion; }
.kv-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .02em; font: 700 clamp(30px, 4.4vw, 84px)/1 "Work Sans", sans-serif; color: #f2e7bf; }
.kv-word span { display: inline-block; }
.fh-js .kv-type.run .kv-word span { animation: fh-play 6s cubic-bezier(.5, -.4, .3, 1.5) infinite; animation-delay: calc(var(--i) * 40ms); }
@keyframes fh-play {
  0%, 18% { transform: none; font-weight: 700; }
  38%, 78% { transform: translate(calc(var(--x) * 2), var(--y)) rotate(var(--r)) scale(var(--s)); }
  100% { transform: none; }
}
.fh-kv { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(30px, 4vw, 80px); padding: clamp(60px, 7vw, 140px) var(--pad) clamp(80px, 8vw, 160px); align-items: start; }
.kv1 { grid-column: 1 / 6; grid-row: 2 / 4; }
.kv2 { grid-column: 7 / 10; grid-row: 1; }
.kv3 { grid-column: 10 / 13; grid-row: 1; }
.kv4 { grid-column: 10 / 13; grid-row: 3; }
.fh-kv figure > img { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.fh-kv figure:hover > img { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .5); }

/* Visual system */
.fh-vs-top { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3.6vw, 70px); row-gap: clamp(30px, 3vw, 60px); padding: clamp(30px, 2.9vw, 55px) clamp(18px, 2.9vw, 55px) clamp(60px, 6vw, 120px); background: #fff; }
.vs-logo { color: var(--soot); }
.vs-logo .fh-logo { width: clamp(120px, 13vw, 255px); }
.vs-resp-box { position: relative; aspect-ratio: 870 / 321; background: var(--fern); color: var(--day); overflow: hidden; }
.vs-resp-box .r { position: absolute; left: 50%; top: 50%; height: 62%; transform: translate(-50%, -50%) scale(.9); opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.vs-resp-box .r.on { opacity: 1; transform: translate(-50%, -50%); }
.vs-resp-box .r-tall { height: 84%; }
.vs-resp-box .r-sm { height: 46%; }
.fh-logo-sl2 { aspect-ratio: 230.97 / 727.96; } .fh-logo-sl3 { aspect-ratio: 485.01 / 779.27; }
.fh-logo-sl4 { aspect-ratio: 395.89 / 629.99; } .fh-logo-sl5 { aspect-ratio: 453.7 / 432.79; }
/* Mimicry: trace the road, the trace becomes the N, then the N appears */
.mim { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--fern); }
.mim .mim-photo, .mim .mim-n { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mim-photo { filter: grayscale(.3) sepia(.5) hue-rotate(20deg) saturate(.7) brightness(.85); }
.mim::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--fern); mix-blend-mode: darken; opacity: .6; pointer-events: none; }
.mim-n { z-index: 2; opacity: var(--n, 1); }
.mim svg { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; }
.mim-trace { fill: none; stroke: #c66e01; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.mim-dot { fill: #f2e7bf; stroke: #c66e01; stroke-width: .5; opacity: var(--d, 0); }
.vs-letters { list-style: none; margin: 0; padding: 0; aspect-ratio: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); align-content: center; gap: 2px; background: var(--fern); padding: 12% 0; }
.vs-letters button { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; }
.vs-letters img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .6s; }
.vs-letters .lt, .vs-letters .pl { position: absolute; left: 0; right: 0; text-align: center; color: var(--day); pointer-events: none; transition: opacity .35s, transform .35s var(--ease); opacity: 0; }
.vs-letters .lt { top: 18%; font: 800 clamp(26px, 3vw, 54px)/1 "Work Sans", sans-serif; transform: translateY(8px); }
.vs-letters .pl { bottom: 12%; font: 400 clamp(10px, .75vw, 13px)/1.2 "Poppins", sans-serif; padding: 0 6px; transform: translateY(-8px); }
.vs-letters button:hover img, .vs-letters button[aria-pressed="true"] img, .vs-letters button:focus-visible img { transform: scale(1.12); filter: brightness(.55); }
.vs-letters button:hover .lt, .vs-letters button:hover .pl, .vs-letters button[aria-pressed="true"] .lt, .vs-letters button[aria-pressed="true"] .pl, .vs-letters button:focus-visible .lt, .vs-letters button:focus-visible .pl { opacity: 1; transform: none; }
.fh-js .vs-narr.rv .vs-letters li { opacity: 0; transform: scale(.85); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 80ms + 200ms); }
.fh-js .vs-narr.rv.in .vs-letters li { opacity: 1; transform: none; }
/* Wayfinding: animated site map, the tent layout, and the i becoming the brand mark */
.fh-wayfinding { display: grid; grid-template-columns: 1.35fr .65fr; grid-template-rows: auto auto; gap: clamp(24px, 3vw, 60px) clamp(20px, 3.6vw, 70px); padding: clamp(60px, 6vw, 120px) clamp(18px, 2.9vw, 55px); background: #fff; align-items: start; }
.wf-map { grid-row: 1 / 3; }
.map { position: relative; aspect-ratio: 1600 / 1269; }
.map .map-paper { position: absolute; left: 8%; top: 10%; width: 62%; height: 52%; object-fit: cover; opacity: .55; }
.map .map-outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-route { fill: none; stroke: #c66e01; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 16; }
.fh-js .wf-map.run .map-route { animation: fh-march 1.2s linear infinite; }
@keyframes fh-march { to { stroke-dashoffset: -18; } }
.map-walker { fill: #c66e01; stroke: #fff; stroke-width: 4; }
.map-pin { position: absolute; width: 7.5%; transform: translate(-50%, -50%); display: grid; justify-items: center; }
.map-pin img { width: 100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
.map-pin b { position: absolute; top: 100%; white-space: nowrap; font: 500 clamp(9px, .7vw, 12px) "Poppins", sans-serif; color: #c66e01; opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
.map-pin:hover b { opacity: 1; transform: none; }
.fh-js .wf-map .map-pin { opacity: 0; transform: translate(-50%, -30%) scale(.6); transition: opacity .5s var(--ease), transform .5s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i) * 160ms + 300ms); }
.fh-js .wf-map.in .map-pin { opacity: 1; transform: translate(-50%, -50%); }
.fh-js .wf-map.run .map-pin img { animation: fh-bob 3s ease-in-out infinite; animation-delay: calc(var(--i) * .37s); }
@keyframes fh-bob { 50% { transform: translateY(-8%); } }
.wf-plan img { width: 100%; max-height: 80svh; object-fit: contain; background: #fff; }
.bm { position: relative; aspect-ratio: 490 / 424; background: var(--paper); color: var(--rust); }
.bm svg { position: absolute; inset: 8%; width: 84%; height: 84%; overflow: visible; }
.bm-src-i, .bm-src-tent { display: none; }
.bm-body, .bm-dot { fill: currentColor; }
.bm-step { position: absolute; left: 12px; bottom: 10px; margin: 0; font: 400 12px "Poppins", sans-serif; letter-spacing: .06em; color: var(--rust); }
/* Logo transition: the R's eye travels to become the dot of the i */
.fh-morph-eye { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fh-eye { fill: currentColor; }
.fh-type { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 80px); padding: clamp(60px, 6vw, 120px) clamp(18px, 6vw, 120px) clamp(80px, 8vw, 160px); background: #fff; align-items: start; }
.t-left { display: grid; gap: clamp(24px, 3vw, 60px); grid-template-columns: 1fr 1fr; align-items: end; }
.t-left > :first-child { grid-column: 1 / 3; width: 70%; }
.t-poster { grid-column: 1 / 2; }
.t-alpha { grid-column: 2 / 3; font: 400 clamp(16px, 1.6vw, 30px)/1.35 "Poppins", sans-serif; text-align: right; }
.t-palette { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: clamp(520px, 70vw, 1200px); position: sticky; top: 20px; }
.t-palette li { position: relative; flex: var(--h) 0 0; background: var(--c); color: var(--day); display: flex; flex-direction: column; transition: flex-grow .5s var(--ease); }
.t-palette li.light { color: var(--soot); }
.t-palette li:hover { flex-grow: calc(var(--h) + 1.4); }
.t-palette button { flex: 1; display: grid; grid-template-columns: 2.4em 1fr auto; align-items: start; gap: 8px; padding: 12px 14px; border: 0; background: none; color: inherit; font: 400 11px/1.4 "Poppins", sans-serif; text-align: left; cursor: pointer; }
.t-palette .pname { letter-spacing: .04em; }
.t-palette .pspec { font-family: var(--cap); opacity: 0; transition: opacity .3s; text-align: right; }
.t-palette li:hover .pspec, .t-palette button:focus-visible .pspec { opacity: .9; }
.t-palette .copied { position: absolute; right: 14px; bottom: 10px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .25s; }
.t-palette button.done .copied { opacity: 1; }
.t-palette .tints { display: flex; flex-direction: column; }
.t-palette .tints i { height: clamp(18px, 1.7vw, 32px); background: rgba(198, 110, 1, var(--o)); background-color: color-mix(in srgb, var(--rust) calc(var(--o) * 100%), var(--day)); }
.fh-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Application */
.fh-apps { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); background: #ebebeb; }
.fh-apps figure { overflow: hidden; }
.fh-apps .w5 { grid-column: span 5; }
.fh-apps .w10 { grid-column: span 10; }
.fh-apps .w5 img { height: 100%; object-fit: cover; aspect-ratio: 960 / 1200; transition: transform 1.4s var(--ease); }
.fh-apps .w5:hover img { transform: scale(1.04); }

/* SNS */
.fh-ig { background: var(--paper); padding: clamp(24px, 2.5vw, 48px) var(--pad) clamp(40px, 5vw, 100px); }
.ig-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1500px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 39px); }
.ig-grid li { aspect-ratio: 1; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.ig-grid img { height: 100%; object-fit: cover; }
.ig-grid li:hover { transform: translateY(-6px); box-shadow: 0 20px 34px -20px rgba(0, 0, 0, .45); }
.ig-vid { width: 100%; height: 100%; }
.fh-stories { display: grid; grid-template-columns: 430fr 430fr 700fr; gap: clamp(12px, 1.6vw, 30px); padding: clamp(40px, 3.9vw, 74px) clamp(18px, 7.8vw, 150px) clamp(60px, 5vw, 100px); background: var(--fern); align-items: stretch; }
.fh-stories > figure, .fh-stories > .fh-vid { border-radius: clamp(14px, 1.6vw, 30px); overflow: hidden; }
.st { position: relative; aspect-ratio: 430 / 932; }
.st-vid { aspect-ratio: 699 / 932; }
/* Story reel 1: camping essentials drop in, the mascot watches */
.st-kit { background: var(--day); }
.st-kit .kit { position: absolute; width: 50%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .2)); }
.st-kit .kit-hat { left: 6%; top: 6%; width: 62%; } .st-kit .kit-patch { right: 6%; top: 26%; width: 38%; }
.st-kit .kit-mug { left: 8%; top: 42%; width: 48%; } .st-kit .kit-bottle { right: 12%; top: 50%; width: 22%; }
.mascot { position: absolute; left: -4%; right: -4%; bottom: -1px; width: 108%; }
.st-tag { position: absolute; left: 0; right: 0; top: 2.5%; text-align: center; font: 700 clamp(10px, .9vw, 15px) "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
.fh-js .st-kit.run .kit { animation: fh-drop 8s cubic-bezier(.3, 1.4, .5, 1) infinite both; }
.fh-js .st-kit.run .kit-patch { animation-delay: .5s; } .fh-js .st-kit.run .kit-mug { animation-delay: 1s; } .fh-js .st-kit.run .kit-bottle { animation-delay: 1.5s; }
@keyframes fh-drop { 0% { opacity: 0; transform: translateY(-60%) rotate(-12deg); } 8%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(12%) rotate(6deg); } }
.fh-js .st-kit.run .pupils { animation: fh-look 4s ease-in-out infinite; }
@keyframes fh-look { 0%, 20% { transform: none; } 30%, 50% { transform: translate(-5px, -4px); } 60%, 80% { transform: translate(5px, -2px); } 100% { transform: none; } }
.fh-js .st-kit.run .eyes { animation: fh-blink 5s infinite; transform-origin: 50% 90px; }
@keyframes fh-blink { 0%, 46%, 50%, 100% { transform: none; } 48% { transform: scaleY(.1); } }
/* Story reel 2: the 3D tent mark bobs in above the logo */
.st-mark { background: var(--paper); display: grid; place-items: center; align-content: center; gap: 7%; color: var(--rust); padding: 10%; }
.st-mark .st-tent { width: 78%; }
.st-logo { width: 62%; }
.st-line { font: 500 clamp(9px, .75vw, 13px) "Poppins", sans-serif; text-align: center; color: var(--soot); }
.fh-js .st-mark.run .st-tent { animation: fh-tent 6s cubic-bezier(.3, 1.3, .5, 1) infinite; }
@keyframes fh-tent { 0% { opacity: 0; transform: translateY(30%) rotate(-8deg) scale(.7); } 12%, 85% { opacity: 1; transform: none; } 50% { transform: translateY(-4%) rotate(2deg); } 100% { opacity: 0; transform: translateY(-10%) scale(.9); } }
.fh-js .st-mark.run .st-logo { animation: fh-fadein 6s ease infinite; }
@keyframes fh-fadein { 0%, 14% { opacity: 0; transform: translateY(10px); } 24%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fh-site { background: var(--paper); padding: clamp(40px, 5vw, 100px) var(--pad) clamp(60px, 6vw, 120px); }
.site-frame { max-width: 1400px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .45); background: #fff; }
.site-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #ece6d0; font: 12px var(--cap); color: #8b8470; }
.site-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d3c9a8; }
.site-bar span { margin-left: 12px; }
.site-page { position: relative; aspect-ratio: 1920 / 1160; overflow: hidden; }
.fh-sitenav { position: absolute; z-index: 2; inset: 0 0 auto; height: 7%; display: flex; align-items: center; justify-content: space-between; padding: 0 2.3% 0 2.3%; background: rgba(242, 231, 191, .44); color: var(--rust); font: 400 clamp(8px, 1.04vw, 20px) var(--cap); }
.fh-sitenav .fh-sitemark { width: 2.1%; }
.fh-sitenav b { background: var(--rust); color: var(--day); padding: .6em 1.4em; border-radius: 999px; font-weight: 700; }
.fh-sitenav span { cursor: default; }
.fh-sitenav span:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-hero { position: absolute; z-index: 2; left: 3.7%; top: 33%; display: grid; color: var(--day); text-align: center; }
.site-hero span { font: 700 clamp(14px, 2.6vw, 50px)/1.15 "Work Sans", sans-serif; }
.site-hero em { font: 400 clamp(24px, 5vw, 96px)/1 "Yellowtail", cursive; font-style: normal; margin-top: .1em; }
.fh-site .fh-cap-t { max-width: 1400px; margin: 0 auto; }

/* End */
.fh-end { display: grid; place-items: center; background: #fff; }
.fh-end p { font: 400 clamp(48px, 10.4vw, 200px)/1 var(--font-script); color: var(--rust); }

/* Next project link on the site ground */
body.case-fern-hill .next { margin-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); }

/* Reveal motion */
.fh-js .fh .rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 100ms); }
.fh-js .fh .rv.in { opacity: 1; transform: none; }
.fh-js .ig-grid li.rv.in:hover { transform: translateY(-6px); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .fh *, .fh *::before, .fh *::after { animation: none !important; transition: none !important; }
  .fh-js .fh .rv, .fh-js .fh-mood-wall li, .fh-js .vs-narr.rv .vs-letters li { opacity: 1; transform: none; }
  .fh-overview .fern { transform: rotate(var(--r, 0deg)) !important; }
  .fh-bleed img, [data-zoom] img { transform: none !important; }
  .vs-resp-box .r:first-child { opacity: 1; transform: translate(-50%, -50%); }
  .mim-n { opacity: 1 !important; } .mim svg { display: none; }
  .fh-js .wf-map .map-pin { opacity: 1; transform: translate(-50%, -50%); }
  .fh-js .fh-morph { height: auto; }
  .fh-js .fh-morph-type { opacity: 0; }
  .fh-js .fh-morph-logo { opacity: 1; transform: none; }
}

/* Tablet and phone */
@media (max-width: 900px) {
  .fh-mood { grid-template-columns: 52px 1fr; }
  .fh-mood-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fh-approach { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-left: 48px; }
  .a-acc1 { grid-column: 1 / 4; } .a-acc2 { grid-column: 4 / 7; }
  .a-cap1 { grid-column: 1 / 7; }
  .a-text { grid-column: 1 / 7; grid-row: 3; }
  .a-pool { grid-column: 1 / 4; grid-row: 4; }
  .a-vid { grid-column: 3 / 7; grid-row: 5; margin-right: 0; }
  .a-fire { grid-column: 4 / 7; grid-row: 4; margin-top: 30%; }
  .a-spa { grid-column: 1 / 5; grid-row: 6; }
  .a-rest { grid-column: 1 / 3; grid-row: 7; } .a-cafe { grid-column: 3 / 5; grid-row: 7; } .a-bar { grid-column: 5 / 7; grid-row: 7; }
  /* Each value becomes its own block: number and name, then its text */
  .fh-values { display: grid; grid-template-columns: 1fr; padding: 110px var(--pad) 110px; row-gap: 28px; }
  .fh-value { display: grid; grid-template-columns: 2em 1fr; row-gap: 8px; }
  .fh-value .v-num { grid-column: 1; grid-row: 1; text-align: left; padding: 0; }
  .fh-value .v-name { grid-column: 2; grid-row: 1; }
  .fh-value .v-text { grid-column: 2; grid-row: 2; }
  .fh-concept { grid-template-columns: 1fr; }
  .c-left { padding: 60px var(--pad) 30px 48px; }
  .c-right { aspect-ratio: 4 / 5; }
  .fh-kv { grid-template-columns: 1fr 1fr; }
  .kv1 { grid-column: 1 / 3; grid-row: auto; }
  .kv2, .kv3, .kv4 { grid-column: auto; grid-row: auto; }
  .fh-vs-top { grid-template-columns: 1fr; }
  .fh-type { grid-template-columns: 1fr; }
  .t-palette { position: static; min-height: 520px; }
  .fh-stories { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--pad); scrollbar-width: none; }
  .fh-stories > * { scroll-snap-align: center; aspect-ratio: 430 / 932; }
  .fh-wayfinding { grid-template-columns: 1fr; }
  .wf-map { grid-row: auto; }
  .wf-plan img { max-height: none; }
  .site-page { aspect-ratio: 4 / 5; }
  .fh-sitenav { height: 9%; }
  .fh-sitenav span { display: none; }
  .fh-sitenav .fh-sitemark { width: 7%; }
  .site-hero { top: 30%; left: 6%; }
  .site-hero span { font-size: 26px; } .site-hero em { font-size: 52px; }
  .fh-side-label { top: 70px; }
  .fh-where { font-size: 13px; bottom: 30px; left: 64px; }
}