/* =====================================================
   CYPHIA SOLUTIONS — redesign mockup (/next/)
   Cool paper and ink; colour belongs to the products.
   Square corners; maze-weight bars between sections.
   ===================================================== */

:root {
    --paper: #F5F6F2;
    --paper-2: #EBEEE7;
    --ink: #1E2830;
    --ink-soft: #4E5963;
    --line: #D5DAD1;
    --field: #717C84;     /* input borders, >= 3:1 on paper, grey and lavender */

    /* one tint per product, plus one for the method band */
    --rose: #F2DCE0;      /* Evidence Core */
    --sea: #D3E9E1;       /* Knowledge Solution Kit */
    --butter: #F1E9CF;    /* CS Content Management */
    --lav: #E2E1F4;       /* CS Newsletter Service */
    --sky: #DBE6F1;       /* how we work */
    --sky-ink: #335A7E;

    /* sans carries the text; serif is kept for subtitles and taglines.
       Fallbacks avoid Helvetica and Times. */
    --sans: 'Schibsted Grotesk', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --serif: 'Newsreader', 'Noto Serif SC', 'Iowan Old Style', Georgia, 'Songti SC', serif;

    --gutter: clamp(16px, 4vw, 40px);
    --col-gap: clamp(24px, 4vw, 48px);

    /* matches the maze walls: 10 units at full size */
    --bar: clamp(7px, calc(0.9vw + 4px), 10px);
    --gap-above: clamp(48px, 6vw, 80px);   /* paper above each section bar */
    --gap-below: clamp(40px, 5vw, 64px);   /* bar to content in plain sections */
    --band-gap: clamp(32px, 4vw, 48px);    /* bar to the top edge of a coloured band */
    --band-pad: clamp(56px, 7vw, 88px);    /* inner padding of a coloured band */
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
ol { list-style: none; }
a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--sky-ink);
    outline-offset: 3px;
}

.wrap {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---------- type: three heading sizes ---------- */
h1, h2, h3 {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.5rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
h3 { font-size: 1.25rem; line-height: 1.2; }

.lede { font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--ink-soft); max-width: 34em; }

/* subtitles and taglines */
.lede,
.section-head p,
.product-panel p:not(.where),
.method-note,
.paper p,
.newsletter-copy p,
.footer-top p {
    font-family: var(--serif);
}

/* ---------- one 12-column grid ---------- */
.g12, .section-head, .product {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--col-gap);
}

@media (min-width: 881px) {
    .g12, .section-head, .product { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .g12 > * { grid-column: 1 / -1; }

    /* the shared vertical line starts at column 6 */
    .g12 > .right,
    .section-head p,
    .product-body,
    .contact-grid > .form,
    .newsletter-grid > .form { grid-column: 6 / -1; }

    .section-head h2,
    .product-panel,
    .contact-grid > .contact-copy,
    .newsletter-grid > .newsletter-copy { grid-column: 1 / span 5; }

    .hero-grid > .hero-copy { grid-column: 1 / span 7; }
    .hero-grid > .maze-figure { grid-column: 8 / -1; }
}

/* ---------- sections, bars and bands ---------- */
section { padding-block: 0; }

.section-head { margin-bottom: clamp(40px, 6vw, 64px); }
.section-head p { margin-top: 16px; color: var(--ink-soft); font-size: 1.2rem; line-height: 1.55; }
@media (min-width: 881px) {
    .section-head p { margin-top: 0; padding-top: .35rem; }
}

/* a bold bar at each section boundary, inset to the content width, with paper on both sides */
main > section + section { padding-top: var(--gap-above); }
main > section + section::before {
    content: "";
    display: block;
    height: var(--bar);
    width: calc(min(1180px, 100%) - 2 * var(--gutter));
    margin: 0 auto var(--gap-below);
    background: var(--ink);
}

/* coloured bands start below their bar, never at it */
.band {
    padding-bottom: var(--band-pad);
    background: linear-gradient(to bottom,
        var(--paper) calc(var(--gap-above) + var(--bar) + var(--band-gap)),
        var(--band) 0);
}
.band::before { margin-bottom: calc(var(--band-gap) + var(--band-pad)); }

/* ---------- buttons and links ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1rem;
    padding: 14px 24px;
    border: 2px solid var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--sky-ink); border-color: var(--sky-ink); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

.text-link {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.text-link:hover { text-decoration-thickness: 3px; }

/* ---------- mockup strip ---------- */
.mock-strip {
    background: var(--ink);
    color: var(--paper);
    font-size: .875rem;
    text-align: center;
    padding: 8px var(--gutter);
}
.mock-strip a { color: var(--butter); }

/* ---------- nav ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(245, 246, 242, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    margin-right: auto;
}
.brand img { width: 32px; height: 32px; }
.nav-menu { display: flex; align-items: center; gap: 26px; font-size: .975rem; }
.nav-menu a { text-decoration: none; color: var(--ink-soft); }
.nav-menu a:hover { color: var(--ink); }
.nav-menu .btn { padding: 9px 18px; font-size: .95rem; color: var(--paper); }
.nav-toggle {
    display: none;
    background: none;
    border: 2px solid var(--ink);
    font-family: var(--sans);
    font-weight: 600;
    font-size: .9rem;
    padding: 6px 14px;
    color: var(--ink);
    cursor: pointer;
}

@media (max-width: 880px) {
    .nav-toggle { display: block; }
    .nav-menu {
        display: none;
        position: absolute;
        inset: 68px 0 auto 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 24px var(--gutter) 28px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
    }
    .nav-menu.open { display: flex; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(16px, 3vw, 32px); }
.hero-grid { align-items: center; row-gap: 48px; }
.hero .lede { margin-top: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.maze-figure { justify-self: center; width: 100%; max-width: 520px; }
.maze { width: 100%; height: auto; display: block; }

.maze .wall { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: square; }
.maze .core { fill: var(--ink); }
.maze .phi { fill: var(--paper); font-family: var(--serif); font-size: 92px; }
.maze .room-name { font-family: var(--sans); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; fill: var(--ink); }
.maze .room-verb { font-family: var(--serif); font-size: 16px; fill: var(--ink-soft); }
.maze .r-rose { fill: var(--rose); }
.maze .r-sea { fill: var(--sea); }
.maze .r-butter { fill: var(--butter); }
.maze .r-lav { fill: var(--lav); }
.maze .room rect { transition: filter .2s ease; animation: room-in .8s cubic-bezier(.3, .7, .2, 1) both; }
.maze .room:nth-of-type(1) rect { animation-delay: .15s; }
.maze .room:nth-of-type(2) rect { animation-delay: .35s; }
.maze .room:nth-of-type(3) rect { animation-delay: .55s; }
.maze .room:nth-of-type(4) rect { animation-delay: .75s; }
.maze .room:hover rect, .maze .room:focus-visible rect { filter: saturate(1.8) brightness(.96); }
.maze .room:focus-visible { outline: none; }

@keyframes room-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 880px) {
    .maze-figure { max-width: 460px; }
}
@media (max-width: 600px) {
    .maze .room-name { font-size: 26px; }
    .maze .room-verb { font-size: 19px; }
    .hero-actions .btn { width: 100%; }
}

/* ---------- how we work ---------- */
.method { --band: var(--sky); }
.method .section-head p { color: var(--ink); }
.steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--col-gap);
    counter-reset: step;
}
.step::before {
    counter-increment: step;
    content: counter(step);
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--ink);
}
.method .step::before { color: var(--sky-ink); }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 1rem; line-height: 1.55; }
.method-note { margin-top: clamp(40px, 5vw, 56px); font-size: 1.2rem; line-height: 1.55; }

@media (max-width: 960px) {
    .steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ---------- products ---------- */
.product { align-items: start; row-gap: 24px; scroll-margin-top: 96px; }
.product-list { display: grid; }
.product + .product { margin-top: clamp(40px, 5vw, 64px); }
.product-panel {
    background: var(--tint);
    padding: clamp(24px, 3.5vw, 40px);
}
.product-panel h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.12; letter-spacing: -0.025em; }
.product-panel p { margin-top: 12px; font-size: 1.2rem; line-height: 1.4; }
.product-panel .where { margin-top: 28px; font-family: var(--sans); font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.product-body p { max-width: 36em; }
.product-body p + p { margin-top: 14px; }
.product-body .text-link { display: inline-block; margin-top: 22px; }
@media (min-width: 881px) {
    /* first body line level with the product name */
    .product-body { padding-top: clamp(24px, 3.5vw, 40px); }
}

.p-evidence { --tint: var(--rose); }
.p-ksk { --tint: var(--sea); }
.p-aiblog { --tint: var(--butter); }
.p-ainltr { --tint: var(--lav); }
/* CS People takes the ink of the maze's center */
.p-people .product-panel { background: var(--ink); color: var(--paper); }
.p-people .product-panel .where { color: #A9B2B4; }

/* ---------- work ---------- */
.work { --band: var(--paper-2); }
.work-feature {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px var(--col-gap);
}
.work-small {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px var(--col-gap);
    margin-top: clamp(48px, 5vw, 64px);
}
.case .shot {
    display: block;
    overflow: hidden;
    background: var(--paper);
    aspect-ratio: 16 / 10;
    max-width: 100%;
}
.case .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* the two large screenshots have pale pages; lift them off the band */
.work-feature .shot {
    box-shadow:
        0 1px 2px rgba(30, 40, 48, .08),
        0 8px 18px -6px rgba(30, 40, 48, .16),
        0 28px 56px -18px rgba(30, 40, 48, .28);
}
.case h3 { margin-top: 20px; }
.case p { margin-top: 8px; font-size: 1rem; line-height: 1.55; }
.case .text-link { display: inline-block; margin-top: 12px; margin-right: 20px; font-size: .95rem; }
.work-small .case h3 { margin-top: 14px; }
.work-small .case p { font-size: .95rem; color: var(--ink-soft); }

@media (max-width: 880px) {
    .work-feature, .work-small { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- writing ---------- */
.papers { display: grid; gap: 36px; }
.paper { display: block; text-decoration: none; }
.paper p { margin-top: 4px; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft); }
.paper:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.after { margin-top: 36px; }

/* ---------- pricing ---------- */
.prices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px var(--col-gap);
}
.price p { font-size: 1rem; }
.price .amount {
    margin: 6px 0 12px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.price-note { margin-top: 44px; color: var(--ink-soft); }

@media (max-width: 880px) {
    .prices { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- contact + newsletter ---------- */
.contact { --band: var(--paper-2); }
.contact-grid { align-items: start; row-gap: 40px; }
.contact-grid .lede { margin-top: 20px; }
.reach { margin-top: 32px; font-size: 1.05rem; line-height: 1.9; }
.reach a { text-decoration: none; font-weight: 600; }
.reach a:hover { text-decoration: underline; }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .95rem; }
.field input, .field textarea {
    font: inherit;
    font-size: 1.05rem;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--field);
    border-radius: 0;
    padding: 12px 14px;
    width: 100%;
}
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--sky-ink);
    box-shadow: 0 0 0 2px var(--sky-ink);
}
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }

.newsletter { --band: var(--lav); --band-pad: clamp(44px, 5vw, 64px); }
.newsletter-grid { align-items: center; row-gap: 28px; }
.newsletter h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.newsletter-copy p { margin-top: 10px; font-size: 1.2rem; line-height: 1.55; }
.newsletter .form { grid-template-columns: 1.3fr 1fr auto; align-items: end; }

@media (max-width: 880px) {
    .newsletter .form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding-block: 56px 36px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 48px; }
.footer-top p { margin-top: 14px; font-size: 1.1rem; color: #C9D0CF; max-width: 26em; }
.footer-side { max-width: 36rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 24px; align-content: start; }
.footer-top .footer-signoff {
    max-width: none;
    margin-top: clamp(24px, 3vw, 36px);
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--paper);
}
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-legal { margin-top: 44px; font-size: .875rem; color: #A9B2B4; }

/* =====================================================
   SUBPAGE COMPONENTS
   Everything below is shared by /next/ subpages. Pages use these
   classes only; no inline styles.
   ===================================================== */

/* current page in the nav */
.nav-menu a[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* ---------- generic screenshot frame ---------- */
.shot { display: block; overflow: hidden; background: var(--paper-2); max-width: 100%; }
.shot img { width: 100%; height: auto; }
.shot.crop { aspect-ratio: 16 / 10; }
.shot.crop img { height: 100%; object-fit: cover; object-position: top; }
.lift {
    box-shadow:
        0 1px 2px rgba(30, 40, 48, .08),
        0 8px 18px -6px rgba(30, 40, 48, .16),
        0 28px 56px -18px rgba(30, 40, 48, .28);
}

/* ---------- page head: first section of a subpage ---------- */
.page-head { padding-block: clamp(48px, 7vw, 96px) clamp(8px, 2vw, 16px); }
.page-head .back { display: inline-block; margin-bottom: 28px; }
.page-head-copy .lede { margin-top: 24px; }
.byline { margin-top: 20px; font-size: .95rem; color: var(--ink-soft); }
@media (min-width: 881px) {
    .page-head-copy { grid-column: 1 / span 9; }
}

/* ---------- product page head: tinted panel + opening ---------- */
.product-head { padding-block: clamp(40px, 6vw, 80px) clamp(8px, 2vw, 16px); }
.product-head .back { display: inline-block; margin-bottom: 28px; }
.product-head .product-panel { padding: clamp(28px, 4vw, 48px); }
.product-head .product-panel h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.05; }
.product-head-body .lede { color: var(--ink); }
.product-head-body .hero-actions { margin-top: 32px; }
.product-head-body { row-gap: 0; }
@media (min-width: 881px) {
    .product-head .product-panel { grid-column: 1 / span 5; }
    .product-head-body { grid-column: 6 / -1; padding-top: clamp(28px, 4vw, 48px); }
}
@media (max-width: 880px) {
    .product-head-body { margin-top: 28px; }
}
.p-people .product-panel h1 { color: var(--paper); }

/* ---------- topics: h3 on the left, text from column 6 ---------- */
.topics { display: grid; row-gap: clamp(36px, 4.5vw, 56px); }
.topic { row-gap: 10px; align-items: start; }
.topic-body p { max-width: 40rem; }
.topic-body p + p { margin-top: 14px; }
.topic-body .text-link { display: inline-block; margin-top: 16px; margin-right: 20px; }
@media (min-width: 881px) {
    .topic > h3 { grid-column: 1 / span 5; }
    .topic > .topic-body { grid-column: 6 / -1; }
}

/* ---------- prose: long-form text ---------- */
.prose { max-width: 40rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h3 { margin-top: 2em; }
.prose h3 + * { margin-top: .5em; }
.prose a { text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose blockquote {
    font-family: var(--serif);
    font-size: 1.35rem;
    line-height: 1.45;
    padding-left: clamp(0px, 3vw, 32px);
}
.prose .figure { margin-block: 2em; }

/* ---------- figures and image grids ---------- */
.figure figcaption { margin-top: 12px; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); max-width: 40rem; }
.grid-2, .grid-3 {
    display: grid;
    gap: 40px var(--col-gap);
    align-items: start;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack > * + * { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 880px) {
    .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- entries: index rows with an image on the left ---------- */
.entries { display: grid; row-gap: clamp(48px, 6vw, 72px); }
.entry { align-items: start; row-gap: 20px; }
.entry h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.12; letter-spacing: -0.025em; }
.entry h3 a { text-decoration: none; }
.entry h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.entry-body p { margin-top: 10px; max-width: 40rem; }
.entry-body .text-link { display: inline-block; margin-top: 16px; margin-right: 20px; }
@media (min-width: 881px) {
    .entry > .shot, .entry > .entry-media { grid-column: 1 / span 5; }
    .entry > .entry-body { grid-column: 6 / -1; }
}

/* extra screenshots under an entry's main image: always three across */
.entry-media .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* ---------- tables, for genuinely tabular content ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.table th, .table td {
    text-align: left;
    vertical-align: top;
    padding: 14px 20px 14px 0;
    border-bottom: 1px solid var(--line);
}
.table thead th { font-weight: 600; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.table tbody th { font-weight: 600; }

/* ---------- dates in index rows ---------- */
.entry-body time, .paper time, .byline time {
    font-family: var(--sans);
    font-size: .9rem;
    color: var(--ink-soft);
}

/* ---------- a row of plain links ---------- */
.links-row { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }

/* ---------- closing call to action, last section before the newsletter or footer ---------- */
.closing { --band: var(--paper-2); }
.closing-body .hero-actions { margin-top: 28px; }
@media (min-width: 881px) {
    .closing-title { grid-column: 1 / span 5; }
}
@media (max-width: 880px) {
    .closing-body { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- phone screenshots: portrait, shown whole, never cropped ---------- */
.phones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px var(--col-gap);
    align-items: start;
}
.phones .figure { max-width: 360px; }
.shot.phone { aspect-ratio: 720 / 1564; }
.shot.phone img { height: 100%; object-fit: cover; object-position: top; }
.page-head .phones { margin-top: clamp(36px, 5vw, 56px); }
@media (max-width: 880px) {
    .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
    .phones .figure { max-width: none; }
}
/* three phones side by side as a work entry's media, at any width */
.entry-media.phones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.entry-media.phones .shot { max-width: none; }