/* =========================================================================
 BORNEO TALES home page mockup, light editorial build (v5)
 Design and motion prototype for client sign-off. Not the production build.

 The line is now layout aware. On load and resize it measures every text
 block and routes a single warm thread through the free space between them,
 with an organic non-repeating swing, drawn as you scroll with a soft glow
 and a glowing tip at the head. Real pixel coordinates so the scroll draw
 works (the earlier version used non-scaling-stroke inside a stretched
 viewBox, which defeats DrawSVG).

 Palette in :root. Accessibility (WCAG 2.1) on white:
   - --ink on white ....... 15.13:1  pass
   - --n-700 on white ..... 9.05:1   pass
   - --n-500 on white ..... 3.58:1   large text only
   - --ink on --accent .... 4.78:1   pass (primary button)
 Text on any orange fill is charcoal, never white.
 ========================================================================= */

:root {
--gold:   #FFC455;
--mid:    #FFAD51;
--coral:  #FF954E;
--accent: #F26422;

--ink:   #262626;
--white: #FFFFFF;
--n-050: #F7F6F4;
--n-100: #ECEAE6;
--n-300: #C9C6C0;
--n-500: #8A8781;
--n-700: #4A4845;

--font-display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
--font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-accent:  'Fraunces', Georgia, 'Times New Roman', serif;

--fs-hero:  clamp(2.6rem, 6vw, 5.25rem);
--fs-h2:    clamp(2rem, 4vw, 3.25rem);
--fs-body:  1.0625rem;
--fs-small: 0.875rem;

--sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;    --sp-5: 1.5rem;
--sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;

--maxw: 1320px;
--gutter: clamp(20px, 5vw, 72px);
--header-h: 74px;

--radius-sm: 2px;
--radius: 8px;

--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
margin: 0; position: relative; background: var(--white); color: var(--ink);
font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; font-weight: 400;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
.nowrap { white-space: nowrap; }
::selection { background: var(--coral); color: var(--ink); }

:where(a, button, input, [tabindex]):focus-visible {
outline: 3px solid var(--ink); outline-offset: 3px; border-radius: var(--radius-sm);
}

.skip-link {
position: absolute; left: var(--sp-4); top: -100px; z-index: 1000;
background: var(--ink); color: var(--white); padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius); transition: top 0.2s ease;
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- Continuous thread (layout aware, sized and routed by JS) ---------- */
.thread { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.thread-path {
fill: none; stroke: url(#threadGradient); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round;
/* No drop-shadow. On a page-height path a CSS filter is rasterised over the
   whole filter region every frame, and at this weight it reads as a smear
   rather than a glow. Width is set from JS against viewport width. */
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 1; }
.section { padding-block: clamp(58px, 8.5vw, 128px); position: relative; z-index: 1; background: transparent; }
.section-hr { border: 0; border-top: 1px solid var(--n-100); margin: 0; position: relative; z-index: 1; }

.eyebrow {
display: inline-flex; align-items: center; gap: var(--sp-2);
font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--n-700);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); display: inline-block; }

.section-head { max-width: 42ch; margin-bottom: clamp(30px, 4vw, 60px); }
.section-title {
font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2);
line-height: 0.98; letter-spacing: 0.01em; margin-top: var(--sp-3); color: var(--ink);
}
.section-note { font-size: var(--fs-small); color: var(--n-700); margin-top: var(--sp-3); line-height: 1.5; }
.hl { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
padding: 0.9rem 1.7rem; border-radius: var(--radius); border: 1.5px solid transparent;
font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em;
transition: transform 0.25s var(--ease-out), background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.btn--primary { background: var(--accent); color: var(--ink); box-shadow: 0 8px 22px rgba(242,100,34,0.22); }
.btn--primary:hover { box-shadow: 0 14px 30px rgba(242,100,34,0.34); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); }
.btn--sm { padding: 0.64rem 1.2rem; font-size: 0.9rem; }
.arrow { display: inline-block; transition: transform 0.25s var(--ease-out); }
.btn:hover .arrow, .textlink:hover .arrow { transform: translateX(4px); }

.textlink {
display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--ink);
background-image: linear-gradient(var(--accent), var(--accent));
background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
transition: background-size 0.35s var(--ease-out); padding-bottom: 2px;
}
.textlink:hover, .textlink:focus-visible { background-size: 100% 2px; }

/* ---------- Reveal pre state ---------- */
html.js:not(.reduce-motion) [data-reveal],
html.js:not(.reduce-motion) [data-reveal-item] { opacity: 0; }
/* pre-hide the hero line and its nodes from the very first paint, so nothing flashes before its animation */
html.js:not(.reduce-motion) .bridge-path { stroke-dasharray: 3000; stroke-dashoffset: 3000; }
html.js:not(.reduce-motion) .bridge-node { opacity: 0; }
html.no-motion [data-reveal], html.no-motion [data-reveal-item] { opacity: 1 !important; transform: none !important; }
.split-line { will-change: transform; }

/* =========================================================================
 HEADER
 ========================================================================= */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center;
transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
border-bottom: 1px solid transparent; color: var(--ink);
}
.site-header.scrolled {
background: rgba(255,255,255,0.9); -webkit-backdrop-filter: saturate(1.1) blur(9px); backdrop-filter: saturate(1.1) blur(9px);
border-bottom-color: var(--n-100); box-shadow: 0 1px 0 rgba(38,38,38,0.03);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: inline-flex; align-items: center; line-height: 1; color: var(--ink); }
/* Intrinsic width and height stay on the img so the browser reserves the box
 from the aspect ratio before the file loads. The lockup stacks BORNEO over
 TALES, so it needs more height than the single line wordmark it replaced. */
.brand-mark { display: block; height: 40px; width: auto; }
@media (max-width: 480px) { .brand-mark { height: 34px; } }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; }
.nav-links a {
font-size: 0.92rem; font-weight: 500; color: var(--ink); padding: 4px 0;
background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat;
background-position: 0 100%; background-size: 0% 2px; transition: background-size 0.3s var(--ease-out);
}
.nav-links a:hover, .nav-links a:focus-visible { background-size: 100% 2px; }
.nav-right { display: flex; align-items: center; gap: var(--sp-4); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--ink); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 24px; height: 2px; background: currentColor; position: relative; transition: transform 0.3s var(--ease-out), opacity 0.2s ease; }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
position: fixed; inset: var(--header-h) 0 0 0; z-index: 95; background: var(--white); color: var(--ink);
padding: var(--sp-7) var(--gutter); display: flex; flex-direction: column; gap: var(--sp-2);
transform: translateY(-8px); opacity: 0; visibility: hidden;
transition: opacity 0.28s ease, transform 0.28s var(--ease-out), visibility 0.28s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a { font-size: 2rem; font-weight: 400; font-family: var(--font-display); letter-spacing: 0.02em; padding: var(--sp-3) 0; border-bottom: 1px solid var(--n-100); }
.mobile-menu .btn { margin-top: var(--sp-5); align-self: flex-start; }
@media (max-width: 860px) { .nav-links, .nav-right .btn { display: none; } .nav-toggle { display: inline-flex; } }

/* =========================================================================
 HERO
 ========================================================================= */
.hero {
position: relative; z-index: 1; overflow: hidden;
min-height: clamp(520px, 80vh, 780px); display: flex; align-items: center;
padding-top: calc(var(--header-h) + clamp(24px, 5vw, 60px)); padding-bottom: clamp(44px, 6vw, 84px);
}
.hero::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(48% 44% at 64% 42%, rgba(255,173,81,0.10) 0%, rgba(255,173,81,0) 70%);
}
.bridge-svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bridge-group { transform-box: fill-box; transform-origin: 50% 50%; }
.bridge-path { fill: none; stroke: url(#bridgeGradient); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255,173,81,0.55)); }
.bridge-node { filter: drop-shadow(0 0 4px rgba(255,196,85,0.6)); }
.bridge-node--a { fill: var(--accent); }
.bridge-node--b { fill: var(--gold); }
.bridge-tip { fill: #FFD37E; opacity: 0; filter: drop-shadow(0 0 5px rgba(255,196,85,0.9)) drop-shadow(0 0 11px rgba(242,100,34,0.55)); }

.hero-inner { position: relative; z-index: 1; max-width: 52ch; }
.hero-eyebrow { margin-bottom: var(--sp-5); }
.hero-title {
font-family: var(--font-display); font-weight: 400; font-size: var(--fs-hero);
line-height: 0.92; letter-spacing: 0.005em; color: var(--ink); margin-bottom: var(--sp-5); max-width: 15ch;
}
.hero-sub { font-size: clamp(1.0625rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--n-700); max-width: 46ch; margin-bottom: var(--sp-6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* =========================================================================
 POSITIONING STRIP
 ========================================================================= */
.positioning-line { font-size: clamp(1.55rem, 2.8vw, 2.35rem); line-height: 1.32; font-weight: 600; letter-spacing: -0.005em; max-width: 26ch; font-family: var(--font-body); }
.positioning-line .lead { color: var(--ink); display: block; margin-bottom: 0.4em; }
.positioning-line .rest { color: var(--n-500); }

/* =========================================================================
 CLIENT LOGO WALL
 ========================================================================= */
.logo-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--n-100);
border: 1px solid var(--n-100); border-radius: var(--radius); overflow: hidden; margin-top: var(--sp-6);
}
.logo-tile { background: var(--white); aspect-ratio: 16 / 7; display: flex; align-items: center; justify-content: center; color: var(--n-300); transition: color 0.3s ease, background-color 0.3s ease; }
.logo-tile:hover { color: var(--n-500); background: var(--n-050); }
.logo-tile svg { width: clamp(48px, 9vw, 72px); height: auto; }
@media (min-width: 620px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .logo-grid { grid-template-columns: repeat(8, 1fr); } .logo-tile { aspect-ratio: 3 / 2; } }

/* =========================================================================
 SELECTED WORK
 ========================================================================= */
/* Carousel track. Card width is derived: --cards is how many are visible
 including the fractional peek, --gaps is how many gaps sit inside that span. */
.work-carousel { position: relative; margin-top: var(--sp-6); }
.work-track {
--gap: clamp(16px, 2vw, 28px);
--cards: 1.15; --gaps: 1;
display: flex; gap: var(--gap);
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; -ms-overflow-style: none;
/* Absorbs the 22px reveal translate. overflow-y is forced to hidden by the
   horizontal scroll container, so without this the cards clip on entry. */
padding-bottom: 26px;
}
.work-track::-webkit-scrollbar { display: none; }
@media (min-width: 700px)  { .work-track { --cards: 2.12; --gaps: 2; } }
@media (min-width: 1100px) { .work-track { --cards: 3.12; --gaps: 3; } }
.work-card {
flex: 0 0 calc((100% - var(--gaps) * var(--gap)) / var(--cards));
}
.work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); margin-bottom: clamp(30px, 4vw, 60px); }
.work-head .section-head { margin-bottom: 0; }
.work-controls { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
@media (max-width: 620px) { .work-controls { display: none; } }
.work-arrow {
width: 46px; height: 46px; flex: 0 0 46px; border-radius: 999px;
background: var(--white); border: 1.5px solid var(--n-300); color: var(--ink);
display: flex; align-items: center; justify-content: center;
transition: border-color 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.work-arrow svg { width: 16px; height: 16px; }
.work-arrow:hover { border-color: var(--ink); background: var(--n-050); }
.work-card { display: block; color: inherit; }
.work-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--n-100); isolation: isolate; }
.work-media-inner { position: absolute; inset: 0; transform: scale(1.001); background-size: cover; background-position: center; }
.work-card:nth-child(1) .work-media-inner { background-image: linear-gradient(135deg, #E7E3DC 0%, #CFC8BE 55%, #B9B0A3 100%); }
.work-card:nth-child(2) .work-media-inner { background-image: linear-gradient(150deg, #EDE7DD 0%, #E4CBA9 60%, #D8B98C 100%); }
.work-card:nth-child(3) .work-media-inner { background-image: linear-gradient(120deg, #E9E6E1 0%, #C9C6C0 60%, #A9A59D 100%); }
.work-card:nth-child(4) .work-media-inner { background-image: linear-gradient(135deg, #EEE9E1 0%, #E9C7A0 55%, #E0A878 100%); }
.work-card:nth-child(5) .work-media-inner { background-image: linear-gradient(160deg, #E6E3DE 0%, #C6C2BA 55%, #9E9A92 100%); }
.work-card:nth-child(6) .work-media-inner { background-image: linear-gradient(130deg, #EFEAE2 0%, #D9CDBB 55%, #BFAF98 100%); }
.work-media-tint { position: absolute; inset: 0; z-index: 1; background: linear-gradient(150deg, rgba(242,100,34,0) 0%, rgba(242,100,34,0.32) 100%); opacity: 0; transition: opacity 0.4s ease; mix-blend-mode: multiply; }
.work-media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(38,38,38,0) 40%, rgba(38,38,38,0.68) 100%); }
.chip { position: absolute; z-index: 3; top: var(--sp-3); left: var(--sp-3); background: var(--n-050); color: var(--n-700); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
.work-cat { position: absolute; z-index: 3; bottom: var(--sp-3); left: var(--sp-3); color: var(--white); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.play { position: absolute; z-index: 3; top: 50%; left: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%) scale(0.9); opacity: 0; border-radius: 999px; background: rgba(38,38,38,0.55); color: var(--white); display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease, transform 0.3s var(--ease-out); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.play svg { width: 18px; height: 18px; margin-left: 3px; }
.work-body { padding-top: var(--sp-4); }
.work-title { font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.7rem); font-weight: 400; line-height: 1.0; letter-spacing: 0.01em; min-height: 2em; margin-bottom: var(--sp-2); color: var(--ink); transition: color 0.25s ease; }
.work-card:hover .work-title { color: var(--accent); }
.work-card:hover .work-media-tint { opacity: 1; }
.work-frame { color: var(--n-700); font-size: var(--fs-body); max-width: 46ch; }
.work-micro { display: block; margin-top: var(--sp-3); font-size: 0.8rem; line-height: 1.5; color: var(--n-700); border-left: 2px solid var(--n-300); padding-left: var(--sp-3); }

@media (prefers-reduced-motion: no-preference) {
@media (hover: hover) and (pointer: fine) {
  .work-card:hover .work-media-inner { animation: kenburns 9s ease-in-out infinite alternate; }
  .work-card:hover .play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .work-card:hover .work-media::before { content: ""; position: absolute; inset: -40% -60%; z-index: 2; background: linear-gradient(75deg, transparent 42%, rgba(255,255,255,0.28) 50%, transparent 58%); transform: translateX(-30%); animation: sheen 4.5s ease-in-out infinite; }
}
.work-card.in-view .work-media-inner { animation: kenburns 9s ease-in-out infinite alternate; }
}
@keyframes kenburns { from { transform: scale(1.001); } to { transform: scale(1.07); } }
@keyframes sheen { 0% { transform: translateX(-35%); } 55%, 100% { transform: translateX(35%); } }

/* =========================================================================
 SERVICES
 ========================================================================= */
.service-list { border-top: 1px solid var(--n-100); margin-top: var(--sp-6); }
.service-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); padding-block: clamp(26px, 3.6vw, 46px); border-bottom: 1px solid var(--n-100); position: relative; transition: background-color 0.3s ease; }
.service-row > .service-main { display: contents; }
.service-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 400; line-height: 0.98; letter-spacing: 0.01em; color: var(--ink); transition: transform 0.3s var(--ease-out), color 0.25s ease; }
.service-desc { color: var(--n-700); max-width: 52ch; }
.service-link { margin-top: var(--sp-2); }
@media (min-width: 860px) {
.service-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6); align-items: baseline; }
.service-row:hover, .service-row.cursor-over { background: rgba(247,246,244,0.85); }
.service-row:hover .service-title, .service-row.cursor-over .service-title { transform: translateX(10px); color: var(--accent); }
}

/* =========================================================================
 PROOF BAND (reserved)
 ========================================================================= */
.proof-note { max-width: 62ch; color: var(--n-700); font-size: var(--fs-small); margin-top: var(--sp-3); }
.proof-grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 26px); margin-top: var(--sp-6); }
@media (min-width: 760px) { .proof-grid { grid-template-columns: repeat(3, 1fr); } }
.proof-stat { border: 1px solid var(--n-100); border-radius: var(--radius); padding: clamp(30px, 3.6vw, 46px) clamp(22px, 2.6vw, 32px); background: var(--n-050); text-align: center; }
.proof-figure { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.73rem, 5.25vw, 3.78rem); line-height: 0.9; color: var(--accent); letter-spacing: 0.01em; }
.proof-label { margin-top: var(--sp-4); font-size: 0.82rem; color: var(--ink); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.5; }
.reserved-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--n-700); background: var(--n-100); padding: 5px 10px; border-radius: 999px; margin-left: var(--sp-3); vertical-align: middle; }

/* =========================================================================
 ABOUT
 ========================================================================= */
/* Fraunces is variable on the opsz axis, 9 to 144, default 14. Browsers apply
 font-optical-sizing: auto by default, so at 54px they would request a display
 optical size, which raises contrast and thins the hairlines. That is the exact
 problem this change was made to fix, so optical sizing is pinned to the
 default instance, which is what the approved specimen showed. */
.about-quote { font-family: var(--font-accent); font-style: italic; font-weight: 600; font-optical-sizing: none; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.2; letter-spacing: 0.005em; max-width: 20ch; color: var(--ink); }
.about-quote .q-accent { color: var(--accent); }
.about-body { margin-top: var(--sp-6); color: var(--n-700); max-width: 54ch; font-size: 1.0625rem; }
.about-link { margin-top: var(--sp-5); display: inline-flex; }

/* =========================================================================
 INSIGHTS (reserved)
 ========================================================================= */
.insight-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-6); }
@media (min-width: 760px) { .insight-grid { grid-template-columns: repeat(3, 1fr); } }
.insight-card { border: 1px dashed var(--n-300); border-radius: var(--radius); padding: clamp(24px, 3vw, 32px); min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(255,255,255,0.72); }
.insight-kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--n-700); }
.insight-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; letter-spacing: 0.01em; color: var(--n-700); margin-top: var(--sp-4); line-height: 1.0; }
.insight-meta { margin-top: var(--sp-5); font-size: 0.8rem; color: var(--n-700); }

/* =========================================================================
 CONTACT
 ========================================================================= */
.contact-title { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 400; line-height: 0.94; letter-spacing: 0.01em; max-width: 16ch; margin-bottom: var(--sp-6); color: var(--ink); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.wa { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 500; color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 0.86rem 1.35rem; transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
.wa:hover { background: var(--ink); color: var(--white); }
.wa svg { width: 18px; height: 18px; }
.newsletter { border-top: 1px solid var(--n-100); padding-top: var(--sp-6); max-width: 560px; }
.newsletter-copy { color: var(--n-700); margin-bottom: var(--sp-4); }
.newsletter-field { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 240px; }
.field label { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--n-700); }
.field input { background: var(--white); border: 1.5px solid var(--n-300); color: var(--ink); border-radius: var(--radius); padding: 0.86rem 1rem; font-size: 1rem; min-width: 0; }
.field input::placeholder { color: var(--n-500); }
.field input:focus { border-color: var(--accent); outline: none; }
.form-status { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--accent); min-height: 1.2em; }

/* =========================================================================
 FOOTER
 ========================================================================= */
.site-footer { background: transparent; color: var(--n-700); padding-block: clamp(52px, 7vw, 92px) var(--sp-7); position: relative; z-index: 1; border-top: 1px solid var(--n-100); }
.footer-top { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); }
@media (min-width: 720px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand .brand-mark { height: 52px; }
.footer-tag { margin-top: var(--sp-4); max-width: 34ch; color: var(--n-700); }
.footer-col h3 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--n-700); font-weight: 600; margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a { color: var(--n-700); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--ink); }
.footer-mail { color: var(--ink); font-weight: 500; }
.footer-flag { color: var(--n-500); font-size: 0.78rem; }
.footer-bottom { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--n-100); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--n-700); }
.footer-bottom nav { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.mockup-notice { margin-top: var(--sp-5); font-size: 0.78rem; color: var(--n-500); line-height: 1.6; max-width: 80ch; }

@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; scroll-behavior: auto !important; }
}
/* ---------- real content (v-content) ---------- */
.work-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); }
@media (prefers-reduced-motion: no-preference) {
@media (hover: hover) and (pointer: fine) { .work-card:hover .work-img { animation: kenburns 9s ease-in-out infinite alternate; } }
.work-card.in-view.h-visible .work-img { animation: kenburns 9s ease-in-out infinite alternate; }
}
.logo-grid.brands { grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.2vw, 16px); background: transparent; border: 0; overflow: visible; }
@media (min-width: 620px) { .logo-grid.brands { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .logo-grid.brands { grid-template-columns: repeat(5, 1fr); } }
.logo-tile.brand { aspect-ratio: 3 / 2; border-radius: var(--radius); border: 1px solid var(--n-100); background: #fff; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease; }
.logo-tile.brand:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(38,38,38,0.12); border-color: var(--n-300); }
/* each logo carries its own optical width (--lw), balanced by ink weight so a
 dense circular mark and a thin wordmark read at the same visual size */
.logo-tile.brand .brand-logo { width: var(--lw, 56%); height: auto; display: block; }
.about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: var(--sp-6); }
@media (min-width: 880px) { .about-grid { grid-template-columns: 1.05fr 0.95fr; } }
.about-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--n-100); box-shadow: 0 24px 60px rgba(38,38,38,0.16); }
.about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.waterfront { position: relative; z-index: 1; min-height: clamp(320px, 42vw, 520px); display: flex; align-items: center; overflow: hidden; }
.waterfront img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.waterfront::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18,12,6,0.9) 0%, rgba(18,12,6,0.72) 26%, rgba(18,12,6,0.4) 58%, rgba(18,12,6,0.12) 100%); }
.waterfront .container { position: relative; z-index: 2; }
.waterfront-eyebrow { color: var(--gold); margin-bottom: var(--sp-4); }
.waterfront-eyebrow::before { background: var(--gold); }
.waterfront-line { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: 0.01em; color: var(--white); max-width: 20ch; text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 30px rgba(0,0,0,0.45); }