/* notebooks — externalised head <style> (§9.3) */
/* ===================== NOTEBOOKS (page-scoped) ===================== */
    /* Header is shrunk on this page only, to free up vertical room for the
       enlarged hero notebook below without growing the hero section. */
    .header-bar--top { padding-block: .45rem; }
    .header-bar--bottom .container { padding-block: .5rem; }
    .site-header .logo img { height: 30px; }
    .notebook-hero { position: relative; overflow: visible; }
    .notebook-hero .container {
      display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 2rem;
      padding-top: clamp(4rem, 6vw, 5rem);
      padding-bottom: clamp(1rem, 2vw, 1.5rem);
    }
    .notebook-price-badge {
      position: absolute; top: 12%; right: 8%;
      width: 280px; height: 280px;
      background: url("../img/notebooks/notebook-price-tag.svg") center / contain no-repeat;
      transform: rotate(8deg);
      z-index: 3;
    }
    .notebook-hero-img { position: relative; overflow: visible; z-index: 2; }
    .notebook-hero-img img {
      /* No drop-shadow: its blur radius bled past the clip-path edge below,
         smudging across the "Notebooks at amazingly low prices" bar. */
      width: 100%; height: auto; border-radius: var(--radius);
      transform: translateY(65px) scale(1.44); transform-origin: top center;
      /* The crop edge below must stay tucked at least 1px behind the CTA bar
         (.banner-wrap sits at z-index 5, above this image's z-index 2) so the
         hard clip line is never visible — neither as a gap above the bar nor
         poking out below it. Because the hero copy reflows to different line
         counts at different widths, the bar's position relative to this image
         isn't a fixed ratio — one clip-path percentage can't satisfy every
         width, hence the 3 tiers below (tuned + verified against real
         measurements from 601px up to ultra-wide). */
      clip-path: inset(0 0 38% 0);
      position: relative;
    }
    @media (max-width: 949px) {
      .notebook-hero-img img { clip-path: inset(0 0 26% 0); }
    }
    @media (max-width: 780px) {
      .notebook-hero-img img { clip-path: inset(0 0 12% 0); }
    }

    /* 5-panel image accordion: equal-width slices that expand horizontally on hover. */
    .split .notebook-accordion { order: 2; }
    .notebook-accordion {
      display: flex; gap: 6px; height: clamp(320px, 34vw, 460px);
      border-radius: var(--radius); overflow: hidden;
    }
    .acc-panel {
      flex: 1; min-width: 0; position: relative; overflow: hidden;
      transition: flex .6s cubic-bezier(.4,0,.2,1);
    }
    .acc-panel img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .acc-panel:hover { flex: 3.4; }
    @media (max-width: 720px) {
      .notebook-accordion { height: 260px; }
    }

    .notebook-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 80px; margin-bottom: 70px; }
    .notebook-feature { text-align: center; position: relative; }
    .notebook-feature:not(:first-child)::before {
      content: ""; position: absolute; top: 0; bottom: 0; left: calc(-0.75rem - 1px);
      width: 2px; background: #000;
    }
    .notebook-feature h4 { font-size: 1rem; margin-bottom: .4rem; }
    .notebook-feature p { font-size: .92rem; color: var(--body); }
    @media (max-width: 820px) {
      .notebook-features { grid-template-columns: repeat(2, 1fr); }
      .notebook-feature:nth-child(3)::before { display: none; }
    }

    .why-notebook ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; }
    .why-notebook li { padding-left: 1.6rem; position: relative; color: var(--body); text-wrap: balance; }
    .why-notebook li::before {
      content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
      border-radius: 50%; background: var(--orange);
    }
    .why-notebook li strong { color: var(--ink); }
    .mobile-break { display: none; }

    #min-order { padding-top: calc(var(--section-y) / 2 - 10px); }
    .min-order-banner {
      background: #14151a; color: #fff; text-align: center; font-weight: 800;
      font-size: clamp(1.2rem, 4vw, 42px);
      padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius);
    }

    #branding-method .section-head { max-width: 980px; }
    .branding-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
    .branding-card { display: block; text-decoration: none; color: inherit; }
    .branding-card .media { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; margin-bottom: 1rem; transition: box-shadow .2s ease; }
    .branding-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
    .branding-card:hover .media { box-shadow: 0 0 0 5px var(--orange); }
    .branding-card:hover .media img { transform: scale(1.05); }
    .branding-card h4 { font-size: 1.1rem; margin-bottom: .35rem; color: var(--ink); }
    .branding-card p { font-size: .95rem; color: var(--body); margin: 0; }
    @media (max-width: 820px) { .branding-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 560px) { .branding-grid { grid-template-columns: 1fr; } }

    .quote-card { padding: clamp(2rem, 4vw, 3rem); }
    .quote-card .section-head { max-width: none; margin-bottom: 2rem; }
    .quote-pills { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 50px; }
    .quote-pills span {
      background: #fff; border-radius: 999px; padding: .5rem 1.1rem; font-weight: 700; font-size: 20px; color: var(--ink);
      box-shadow: var(--shadow-card);
    }
    .quote-form-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; }
    .quote-form-grid .full { grid-column: 1 / -1; }
    .quote-form-grid label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .4rem; }
    .quote-form-grid label .req { color: var(--orange); font-weight: 600; }
    .quote-form-grid input, .quote-form-grid select {
      width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
      padding: .75rem 1rem; font-family: inherit; font-size: .95rem; background: #fff;
    }
    .quote-form-grid .field-help { font-size: .8rem; color: var(--body); margin-top: .3rem; }
    .quote-form-grid .submit-row { text-align: center; margin-top: .5rem; }
    @media (max-width: 620px) {
      .quote-form-grid { grid-template-columns: 1fr; }
      .quote-form-grid .submit-row { margin-bottom: 65px; }
    }
    /* Pull the reviews bar up so it overlaps roughly half its own height into the
       full-bleed quote section's bottom edge above it. */
    #free-quote + .reviews-section .reviews-bar { margin-top: -140px; }

    /* Custom dropdowns (same mechanics/highlight as the "Our work" filter module) so the
       option highlight can be branded orange &ndash; not possible with a native <select>. */
    .quote-form-grid .custom-select { position: relative; }
    .quote-form-grid .custom-select__toggle {
      display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%;
      font: inherit; font-size: .95rem; text-align: left; color: var(--ink);
      background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
      padding: .75rem 1rem; cursor: pointer;
    }
    .quote-form-grid .custom-select__toggle svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--body); transition: transform .2s ease; }
    .quote-form-grid .custom-select.open .custom-select__toggle svg { transform: rotate(180deg); }
    .quote-form-grid .custom-select__list {
      position: absolute; top: calc(100% + .5rem); left: 0; right: 0;
      background: #fff; border-radius: var(--radius-sm);
      box-shadow: 0 24px 60px rgba(16, 16, 60, .16); padding: .4rem; z-index: 20; list-style: none;
    }
    .quote-form-grid .custom-select__list[hidden] { display: none; }
    .quote-form-grid .custom-select__list li {
      padding: .65rem 1rem; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--ink);
    }
    .quote-form-grid .custom-select__list li:hover,
    .quote-form-grid .custom-select__list li:focus-visible,
    .quote-form-grid .custom-select__list li[aria-selected="true"] { background: var(--orange); color: #fff; }

    @media (max-width: 600px) {
      /* Stack the notebook + price badge below the title/text/buttons instead of overlapping them. */
      .notebook-hero .container { grid-template-columns: 1fr; gap: 0; }
      .notebook-hero .hero-copy { order: 1; }
      .notebook-hero .hero-copy .cta-row { flex-direction: row; }
      .notebook-hero-img { order: 2; margin-top: 14px; }
      .notebook-price-badge { transform: translateX(65px) rotate(8deg) scale(.625); }
      /* 5-panel accordion: horizontal slices stacked vertically instead of narrow vertical strips. */
      .notebook-accordion { flex-direction: column; height: auto; }
      .acc-panel { flex: none; height: 180px; }
      .acc-panel:hover { flex: none; }
      .acc-panel:first-child img { object-position: center 52%; }
      .acc-panel:last-child img { object-position: center 82%; }
      /* Restore breathing room above "Committed to quality" (its -65px pull-up was tuned for desktop). */
      #committed-to-quality { margin-top: -25px !important; }
      #committed-to-quality .section-head { margin-top: 65px; }
      /* Balance the "Committed to quality" title over two lines on mobile. */
      .mobile-break { display: inline; }
      /* Reviews bar sits directly under the quote form as a dark CTA strip — inset it slightly on mobile. */
      .reviews-bar { width: calc(100% - 25px); margin-inline: auto; }
    }