@charset "UTF-8";
/* Fishwick Marketing Systems — v21
   Refined Option 2 brand system: deep navy + slate logo, restrained teal accents,
   warm neutral surfaces, Schibsted Grotesk display over IBM Plex Sans text.
   Self-hosted fonts (the .htaccess CSP allows font-src 'self' only). */

@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/plex-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/plex-latin-ext.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


@font-face{
  font-family:"Schibsted Grotesk";
  src:url("../fonts/schibsted-latin.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Fishwick brand palette: Option 2 + restrained teal. ----------
   Navy anchors the identity, the logo uses a quiet slate secondary, and teal
   is reserved for actions and emphasis. Warm neutrals keep the site from reading
   as another all-blue B2B/SaaS template. */
:root{
  --paper:#FAF9F6; --surface:#FFFFFF; --soft:#F2F4F2;
  --ink:#0D273B; --body:#46545E; --charcoal:#29343C;
  --logo-secondary:#6D8EA3;
  --accent:#0F766E; --accent-hover:#0B615B; --seafoam:#79BDB3;
  --dark:#0D273B; --dark-2:#18384B;
  --on-dark:#F8FAF9; --muted-dark:#C4D0D3; --accent-dark:#82CFC3;
  --line:#D9DFDD; --line-strong:#BFCAC7;
  --btn:#0F766E; --btn-hover:#0B615B;
}

:root{
  --display:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display-track:-.028em; --display-weight:700;
  --header-height:78px;
  --max:1180px;
  --shadow:0 12px 34px rgba(11,45,74,.09);
  --radius:6px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 16px)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--text);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
svg{display:block;max-width:100%}
button{font:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--accent-dark)}

.skip-link{
  position:fixed;top:10px;left:16px;z-index:200;padding:12px 20px;
  background:var(--ink);color:#fff;font-weight:600;border-radius:var(--radius);
  transform:translateY(-180%);
}
.skip-link:focus{transform:translateY(0)}
.container{width:min(var(--max),calc(100% - 44px));margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Type ---------- */
h1,h2,h3,h4{margin:0;font-family:var(--display);color:var(--ink);font-weight:var(--display-weight,600);line-height:1.08;letter-spacing:var(--display-track,-.018em)}
h1{font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1.02}
h2{font-size:clamp(1.95rem,3.4vw,2.9rem)}
h3{font-size:1.28rem;letter-spacing:-.005em}
h4{font-size:1.02rem}

.eyebrow{
  margin:0 0 18px;color:var(--accent);font-family:var(--text);
  text-transform:uppercase;letter-spacing:.14em;font-size:.8125rem;font-weight:600;
}
.on-dark .eyebrow{color:var(--accent-dark)}
.lead{font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.55;max-width:60ch}
.section{padding:clamp(72px,9vw,124px) 0}
.section-head{max-width:66ch;margin-bottom:clamp(40px,5vw,64px)}
.section-head .lead{margin-top:20px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:15px 26px;min-height:48px;border-radius:var(--radius);border:2px solid transparent;
  background:var(--btn);color:#fff;font-weight:600;font-size:1rem;letter-spacing:.005em;
  transition:background-color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--btn-hover);transform:translateY(-1px)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--soft);border-color:var(--ink);transform:translateY(-1px)}
.on-dark .btn-ghost{color:var(--on-dark);border-color:rgba(255,255,255,.34)}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.09);border-color:var(--on-dark)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- Brand / logo ---------- */
/* Option 2 is used as one complete lockup, not a recreated icon beside site text.
   That keeps the F mark, FISHWICK wordmark, secondary line, proportions and color
   relationship consistent everywhere. */
.brand{display:flex;align-items:center;min-width:0;line-height:0}
.brand-logo{display:block;width:auto;height:48px;max-width:min(330px,56vw)}
.site-footer .brand-logo{height:46px;max-width:min(320px,72vw)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 95%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.site-header{background:var(--paper)}}
.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav{display:flex;align-items:center;gap:30px;font-size:.96rem;font-weight:500}
.nav a:not(.btn){color:var(--ink);padding:6px 0;border-bottom:2px solid transparent}
.nav a:not(.btn):hover{color:var(--accent);border-bottom-color:var(--accent)}
.nav .btn{padding:11px 20px;min-height:44px;font-size:.94rem}
.menu-toggle{
  display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--ink);min-width:46px;min-height:46px;align-items:center;justify-content:center;cursor:pointer;
}
.menu-toggle[hidden]{display:none}
.menu-toggle svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

/* ---------- Notice (pre-launch content checklist) ---------- */
.notice{background:var(--dark-2);color:var(--on-dark);padding:14px 0;font-size:.9rem;border-bottom:1px solid var(--line)}
.notice strong{color:var(--accent-dark);font-weight:600}
.notice ul{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 22px}
.notice li{color:var(--muted-dark);position:relative;padding-left:16px}
.notice li::before{content:"→";position:absolute;left:0;color:var(--accent-dark)}

.hero .lead{margin:26px 0 34px}
/* ---------- Dark band ---------- */
.on-dark{background:var(--dark);color:var(--muted-dark)}
.on-dark h2,.on-dark h3,.on-dark h4{color:var(--on-dark)}
.on-dark .lead{color:var(--muted-dark)}

/* ---------- Services / offers ---------- */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(24px,3vw,34px)}
.offer{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(28px,3vw,38px);display:flex;flex-direction:column;
}
.offer h3{margin-bottom:12px}
.offer>p{margin-bottom:16px}
.offer-meta{font-size:.88rem;color:var(--body)}
.todo{
  display:inline-block;background:var(--soft);border:1px dashed var(--accent);color:var(--accent);
  padding:2px 9px;border-radius:3px;font-size:.82rem;font-weight:600;font-family:var(--text);letter-spacing:.02em;
}

/* ---------- Platforms (text, no third-party logos) ---------- */

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(34px,5vw,64px);align-items:start}
.about-portrait{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);background:var(--soft)}
.portrait-placeholder{
  width:100%;aspect-ratio:4/5;border:1px dashed var(--line-strong);border-radius:var(--radius);
  background:var(--soft);display:grid;place-items:center;
  text-align:center;padding:22px;color:var(--body);font-size:.86rem;line-height:1.5;
}
.portrait-placeholder code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  color:var(--accent);word-break:break-all;
}
.about-copy h2{margin-bottom:20px}
.about-copy p+p{margin-top:18px}
.about-copy .lead{margin-bottom:18px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,5vw,72px);align-items:start}
.contact-copy .lead{margin:20px 0 28px}
.direct-contact{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-strong);font-size:.96rem}
.direct-contact a{display:inline-flex;align-items:center;min-height:28px;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.direct-contact a:hover{color:var(--accent-hover)}
.contact-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,36px)}
.form-status{margin-bottom:22px;padding:14px 16px;border-radius:var(--radius);background:var(--soft);border-left:3px solid var(--line-strong);font-size:.94rem}
.form-status[data-success]{border-left-color:var(--accent);color:var(--ink);font-weight:500}
.form-status.form-error{border-left-color:#B3261E;color:#8C1D18;background:#FDF2F1;font-weight:500}
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset[disabled]{opacity:.62}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px;display:flex;flex-direction:column}
.field label{font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:7px}
.field label span{font-weight:400;color:var(--body)}
.field input,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px 14px;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{resize:vertical;min-height:126px}
.field input:hover,.field textarea:hover{border-color:var(--body)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid transparent}
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-use-note{font-size:.86rem;margin-bottom:22px;line-height:1.5}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:var(--muted-dark);padding:48px 0 40px}
.footer-inner{display:flex;flex-wrap:wrap;gap:26px 34px;align-items:center;justify-content:space-between}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.94rem}
.footer-links a{color:var(--muted-dark);min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid transparent}
.footer-links a:hover{color:var(--on-dark);border-bottom-color:var(--accent-dark)}
.footer-legal{width:100%;padding-top:26px;border-top:1px solid var(--dark-2);font-size:.86rem;color:var(--muted-dark);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}


/* ---------- Responsive ---------- */
@media(max-width:900px){
  .nav{
    position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);
    padding:10px 22px 22px;box-shadow:var(--shadow);
  }
  .nav.open{display:flex}
  .nav a:not(.btn){padding:15px 0;border-bottom:1px solid var(--line)}
  .nav a:not(.btn):hover{border-bottom-color:var(--line)}
  .nav .btn{margin-top:16px;justify-content:center}
  .nav-enhanced .menu-toggle{display:inline-flex}
  .site-header{position:sticky}
  .nav-wrap{position:relative}
  .contact-grid,.about-grid{grid-template-columns:1fr}
  .about-portrait,.portrait-placeholder{max-width:250px}
  }
@media(max-width:560px){
  body{font-size:1.02rem}
  .brand-logo{height:42px;max-width:235px}
  .container{width:calc(100% - 32px)}
  /* Vertical rhythm is tighter on a phone: six sections at desktop padding adds
     roughly 900px of empty space to the scroll. */
  .section{padding:54px 0}
  .section-head{margin-bottom:32px}
  .offer{padding:24px 22px}
  .offer ul{margin-bottom:20px}
  .process{padding:24px 22px}
    .form-row{grid-template-columns:1fr;gap:0}
  .cta-row .btn{width:100%;justify-content:center}
  /* Phones: smaller headshot, a full-width submit like the hero buttons, and a
     44px touch target on the email link. */
  .about-portrait,.portrait-placeholder{max-width:180px}
  .contact-form .btn{width:100%;justify-content:center}
  .direct-contact a{min-height:44px}
  .footer-inner{flex-direction:column;align-items:flex-start}
}
@media print{
  .site-header,.skip-link,.contact-form,.notice{display:none}
  body{background:#fff;color:#000}
}

/* ---------- Classes replacing inline styles (strict CSP: no style attributes) ---------- */
.section-soft{background:var(--soft)}
.about-linkedin{margin-top:26px}




/* ---------- Simplified offer card ---------- */
.offer h3{margin-bottom:10px}
.offer .offer-meta{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--body);
}
.section-head .lead + .lead{margin-top:14px}


/* ============================================================
   v8 LAYOUT — two-column section heads, banded rhythm, icons
   ============================================================ */

/* Section head: eyebrow, then the headline across the full content width (one
   line on desktop, wrapping naturally and evenly on smaller screens), then the
   intro below it at a readable line length. Every section uses this one layout. */
.section-head{max-width:none;margin-bottom:clamp(38px,4.5vw,58px)}
.head-stack h2{text-wrap:balance}
.head-stack .lead{margin-top:18px;max-width:72ch;font-size:1.08rem}



/* Three-column bands with line icons.
   Exactly three columns or exactly one - never a ragged two. auto-fit would wrap
   three items into a 2x2 grid at intermediate widths, leaving a phantom empty
   cell, and the first/last-child padding rules only hold within a single row. */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.trio > *{padding:0 clamp(20px,2.4vw,32px)}
.trio > *:first-child{padding-left:0}
.trio > *:last-child{padding-right:0}
.trio > * + *{border-left:1px solid var(--line)}
.on-dark .trio > * + *{border-left-color:var(--dark-2)}
.ico{width:34px;height:34px;stroke:var(--accent);fill:none;stroke-width:1.6;
     stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.on-dark .ico{stroke:var(--accent-dark)}
.trio h3{font-size:1.12rem;margin-bottom:10px;line-height:1.3;text-wrap:balance}
.trio p{font-size:.97rem}
.trio .meta{margin-top:12px;font-size:.86rem;color:var(--accent);font-family:var(--text)}
.on-dark .trio .meta{color:var(--accent-dark)}

/* Hero: content left, facts right, watermark behind */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);gap:clamp(30px,5vw,64px);align-items:start}
.hero-facts{border-left:2px solid var(--accent);padding-left:clamp(20px,2.4vw,30px)}
.hero-facts dt{
  font-family:var(--text);font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent);margin-bottom:5px;
}
.hero-facts dd{margin:0 0 20px;color:var(--body);font-size:.95rem;line-height:1.45}
.hero-facts dd:last-child{margin-bottom:0}
.hero-facts .big{
  display:block;font-family:var(--display);font-size:1.9rem;font-weight:var(--display-weight);
  color:var(--ink);line-height:1;margin-bottom:3px;letter-spacing:-.02em;
}


@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .trio{grid-template-columns:1fr}
  .trio > *{padding:28px 0}
  .trio > *:first-child{padding-top:0;padding-left:0}
  .trio > *:last-child{padding-bottom:0;padding-right:0}
  .trio > * + *{border-left:0;border-top:1px solid var(--line)}
  .on-dark .trio > * + *{border-top-color:var(--dark-2)}
}

.hero{padding:clamp(58px,7vw,96px) 0 clamp(52px,6vw,84px)}
.hero h1{font-size:clamp(2.4rem,4.6vw,3.9rem);max-width:19ch;line-height:1.06;text-wrap:balance}
.hero .lead{margin:24px 0 32px}

.creds{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.94rem}
.creds strong{color:var(--ink);font-weight:600}
.footer-trademark{width:100%;font-size:.78rem;line-height:1.5;color:var(--muted-dark);opacity:.8;max-width:78ch}

/* Adjacent work — a note, deliberately not a fourth offer */
.adjacent{
  margin-top:clamp(30px,3.4vw,44px);padding-top:22px;border-top:1px solid var(--line);
  font-size:.95rem;padding-right:max(0px,calc(100% - 74ch));
}

/* ============================================================
   v10 POSITIONING — service architecture + platform experience
   ============================================================ */
.engagement-grid .meta{font-weight:600;letter-spacing:.01em}

.platform-list{
  display:flex;flex-wrap:wrap;gap:12px;
}
.platform-list li{
  display:inline-flex;align-items:baseline;gap:5px;min-height:44px;padding:10px 15px;
  border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--radius);
  color:var(--ink);font-weight:600;font-size:.95rem;
}
.platform-list small{font-size:.78rem;color:var(--body);font-weight:400}
.platform-note{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.95rem;padding-right:max(0px,calc(100% - 76ch));
}



/* ============================================================
   v14 ALIGNMENT PASS — keep repeated card/band content on one grid
   ============================================================ */
/* Engagement columns stretch to the same height, and the summary/meta line is
   pinned to the same bottom baseline regardless of body-copy length. */
.engagement-grid > article{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.engagement-grid .meta{
  margin-top:auto;
  padding-top:20px;
}

/* On stacked/mobile layouts, natural flow reads better than forced vertical space. */
@media(max-width:940px){
  .engagement-grid .meta{margin-top:14px;padding-top:0}
}


/* ============================================================
   v17 — problems carry the fix; platforms split now / before
   ============================================================ */
/* Each problem card ends with what Jeff does about it, pinned to a shared
   baseline like the engagement meta lines. On the navy band the teal and the
   grey body text differ in hue but barely in lightness, so the fix line is also
   marked by a short rule and heavier weight - readable without colour. */
.problem-grid > article{display:flex;flex-direction:column;min-height:100%}
.problem-grid .fix{margin-top:auto;padding-top:22px;font-size:.95rem;font-weight:600;color:var(--accent-dark)}
.problem-grid .fix::before{content:"";display:block;width:28px;height:2px;margin-bottom:12px;background:currentColor}

/* Two groups so five equal pills don't read as current fluency in all five.
   The group headings carry the meaning; past platforms are only quieter. */
.platform-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.platform-group h3{font-size:1.08rem;margin-bottom:14px}
.platform-group-past .platform-list li{background:transparent;color:var(--body);font-weight:500}

@media(max-width:940px){
  .problem-grid .fix{margin-top:14px;padding-top:0}
}
@media(max-width:700px){
  .platform-groups{grid-template-columns:1fr;gap:28px}
}