/** Shopify CDN: Minification failed

Line 35:43 Unexpected "("
Line 85:125 Unterminated string token
Line 114:55 Unterminated string token
Line 118:25 Unterminated string token
Line 131:55 Unterminated string token
Line 199:103 Unterminated string token
Line 202:49 Unterminated string token
Line 204:44 Unterminated string token
Line 247:118 Unterminated string token
Line 255:99 Unterminated string token
... and 15 more hidden warnings

**/
ChatGPT




bc056617-1360-47c3-aae8-ff588fe1d8ac.png
bc9f4332-55ee-45cf-b1e4-96faa0c0ca19.png
cfdd3a62-ff7d-4f3d-bbb3-acb639db2c1d.png

grantretaildesigns.com-Performance-on-Search-2026-07-22.zip
Zip Archive

grantretaildesigns.com-Coverage-2026-07-22.zip
Zip Archive
grantretaildesigns




grantretaildesigns.com-Coverage-2026-07-22 (2).zip
Zip Archive


grantretaildesigns.com-Performance-on-Search-2026-07-22 (1).zip
Zip Archive

Generated image: Internal linking strategy for retail design


Edit


Are you thinking that all of these titles link to a seperate page?

When I go to the "About " page in Shopify to add links the text shown is different than what is shown on the website live. When I open the page template the correct text is shown?

Under pages all I see are different templates


The dark blue color of the link makes the text very difficult to read against the black backround

were back to the blue link color

It looks like there are two custom liquid sections?

The link kind of ran thru a lot of text


Pasted text(2).txt
Document

Thursday 3:59 PM
The link is not showing up

Usually is shows in the template




I found the Surf/Skate section



Store PlanningBudgeting the design and build-out of your store is a critical first step before beginning a retail design project. These planning guides will help you understand the design process, estimate project costs, and make informed decisions before starting your build-out.

Friday 3:05 PM
red3 stage1 result


Recieved this emailm from Kevin about completing the hierarchy structure. Can you walk me thru what Kevin is asking me for. "

869b956d-54a0-46ff-a0f4-270f2f23040e.png
0af197a5-bdbd-4918-8fe5-c077bdf231b7.png


This is what medium size looks like



Pasted text(3).txt
Document


Pasted text(4).txt
Document
This reads amazing!! Without doing any more changes to main template structure, can we reformat the final planning guide in our current portfolio "Planning a new retail giftshop". Here is the current Liquid code: 


surf park article (2).pdf
PDF

This is fantastic.

After reading Jeff's article, I actually think this has the potential to become one of the signature pieces in the entire Grant Retail Designs Planning Library. It's already rich with practical planning advice about customer flow, merchandising, fixtures, operations, lighting, technology, sustainability, and retail strategy for wave parks. 


More importantly...

I don't think we should simply "reformat" this article.

I think we should elevate it the same way we did the Clothing Store and Gift Shop guides.

Here's what I would build
Instead of this...

Designing the Perfect Surf Shop for a Modern Wave Pool

I would create something like:

Planning a Retail Surf Shop for a Modern Wave Park
or

The Complete Planning Guide to Designing a Wave Park Surf Shop
Immediately it becomes part of the Planning Library.

I also noticed opportunities to expand Jeff's expertise
Jeff already covers:

Customer Journey

Layout

Apparel

Equipment

Rentals

Fixtures

Color Palette

Lighting

Graphics

Merchandise

Community

Flexibility

Technology

Sustainability

Conclusion 


Those are excellent foundations.

I think we can reorganize them into a cleaner progression like:

Understanding the Modern Wave Park

Why Surf Park Retail Is Different

Mapping the Customer Journey

Planning the Store Layout

Equipment Rental Operations

Apparel & Lifestyle Merchandise

Surf Hardware & Accessories

Fixtures Designed for Surf Retail

Lighting & Brand Experience

Community Spaces & Events

Technology Integration

Sustainability

Common Planning Mistakes (new)

Final Thoughts

Continue Planning

It will read much more like a professional design manual than an article while preserving Jeff's ideas.

One thing I especially liked
Jeff isn't just talking about selling surfboards.

He's discussing the entire guest experience:

arrival

check-in

rentals

lockers

changing rooms

retail

community

events

That shifts the focus from "store design" to experience design, which is much more compelling. 


This also gives us opportunities for some really interesting visual components
Without changing our template, I can incorporate content like:

A sample wave park retail space allocation

Surf shop department planning cards

Rental department planning checklist

Customer journey callout

Grant Design Tips throughout

Wave Park Planning Questions

Common Mistakes section

Resource links back into GRD

Those additions will make the guide feel even more like a professional planning resource.

I have one recommendation that I think will make this guide exceptional
Unlike the Clothing Store or Gift Shop guides, this is a new retail category that many readers won't be familiar with.

I would begin the guide with a stronger introduction explaining why wave parks are changing the surf industry and why that creates new opportunities for specialized retail. Jeff already introduces this idea, noting that modern artificial wave parks provide reliable surfing year-round and create an entirely new retail opportunity. 


That context helps readers understand the rest of the guide before they get into layouts and fixtures.

My recommendation
Let's treat this as our first flagship Planning Guide rather than simply another converted article.

We'll preserve Jeff's voice and expertise, but present it at the same editorial level as the Clothing Store and Gift Shop guides. If we do that well, I think this will become one of the most distinctive pages on the GRD website—and one that very few competitors will be able to match.


m creating the new page. Is this where I start?





Today 7:00 AM




when I tried to save


nothing happens when I click show local








I am trying to copy and paste into this box

It should be saved







9c2fce9d-2784-4b9a-8b1b-ffd5613e3bfe.png
Where should i see these tabs?

42efbbe7-6814-4456-92ab-d5da211d44ef.png

YES!! 🎉

This is the right store.

We're finally in Grant Retail Designs (JGD-3842).

And I have another piece of good news...

Before we touch anything...
Let's make a duplicate of this theme first.

I know it feels repetitive after the RED3 mix-up, but this is a 30-second insurance policy. Since this is your live GRD site, I don't want us editing the active theme directly.

Do this:
Click the ⋯ (three dots) next to Edit theme.

Choose Duplicate.

Wait about a minute while Shopify creates Copy of Dawn.

Then click Edit theme on Copy of Dawn, not the active Dawn theme.

Why I'm insisting on this
Over the last few days we've learned a lot about Shopify's file system. Now that we understand the workflow, we'll be creating:

CSS assets

Liquid sections

JSON templates

Those are all safe changes, but they're much safer in a draft theme until we've verified everything works.

The good news
This second attempt is going to be much faster.

We already know:

✅ how to create assets

✅ how to create sections

✅ how to create templates

✅ what code goes where

✅ how the files connect

We won't be figuring it out as we go anymore.

Once the duplicate is ready
Send me one screenshot showing Copy of Dawn under Draft themes.

Then we're going to build the Planning Library framework again—but this time in the correct store, and much more efficiently. After that, every future Planning Guide (gift shop, clothing store, surf shop, etc.) will plug into the same framework. This is the one-time foundation that makes all the later guides much easier to publish.


87277093-8bb7-48c6-ac6c-7c74e3ab6311.png

Perfect. This is exactly where we want to be. 🎉

You are now in:

✅ Grant Retail Designs

✅ Copy of Dawn

✅ Draft theme

From this point forward, we don't have to worry about accidentally affecting your live site.

Here's what we're going to do
We're going to repeat the same setup we already learned, but now in the correct store.

We'll build:

grd-planning-library.css

grd-guide-wave-park.liquid

page.wave-park.json

Create the Shopify page

Preview the guide

Let's take it one file at a time
Step 1 — Open the Code Editor
You're currently in the Theme Editor.

Now:

Click the ⋯ (three dots) in the upper-right corner.

Choose Edit code.

When the code editor opens, stop there and send me a screenshot.

Here's why
Now that we're in the correct store, I'm going to streamline the process.

Instead of giving you hundreds of lines of code piecemeal, I'll provide each complete file in order, and I'll stay with you after every save to make sure everything works before moving on.

This second build should go much more smoothly because we've already worked through the learning curve together.


bb5f8211-0264-4f2a-ac17-3af3104ea748.png

Perfect. You are now in the correct GRD duplicate theme code editor.

Let’s repeat the three-file setup cleanly.

Step 1 — Create the shared CSS file
Click the arrow beside assets.

Right-click directly on the assets folder.

Choose New File.

Enter only:

grd-planning-library.css
Press Enter.

The new file must appear indented inside assets.

Then open this file:

grd-planning-library.css

In Notepad:

Press Ctrl+A

Press Ctrl+C

Return to Shopify:

Click line 1 of grd-planning-library.css

Press Ctrl+V

Click Save

Wait until the Timeline says File Saved.

Do not create the next file yet. Send me a screenshot once the CSS file is saved inside assets.


Library
/
grd-planning-library.css


.grd-guide {
    --grd-ink: #171717;
    --grd-muted: #66635f;
    --grd-line: #dedbd6;
    --grd-soft: #f5f3ef;
    --grd-soft-2: #fbfaf8;
    --grd-accent: #a65f12;
    --grd-accent-dark: #7c4307;
    --grd-white: #ffffff;
    color: var(--grd-ink);
    background: var(--grd-white);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.72;
  }

  .grd-guide *,
  .grd-guide *::before,
  .grd-guide *::after {
    box-sizing: border-box;
  }

  .grd-guide__shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 26px 0 72px;
  }

  .grd-guide a {
    color: var(--grd-accent-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .grd-guide a:hover,
  .grd-guide a:focus-visible {
    color: var(--grd-accent);
  }

  .grd-guide__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    gap: clamp(34px, 5vw, 74px);
    align-items: center;
    padding: clamp(34px, 6vw, 76px) 0 44px;
    border-bottom: 1px solid var(--grd-line);
  }

  .grd-guide__eyebrow,
  .grd-resources__eyebrow {
    margin: 0 0 14px;
    color: var(--grd-accent-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .grd-guide__hero h1 {
    margin: 0;
    max-width: 760px;
    color: var(--grd-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 5vw, 67px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.03;
  }

  .grd-guide__dek {
    margin: 24px 0 0;
    max-width: 690px;
    color: #343230;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.55;
  }

  .grd-guide__hero-rule {
    width: 74px;
    height: 3px;
    margin: 28px 0 20px;
    background: var(--grd-accent);
  }

  .grd-guide__hero-note {
    margin: 0;
    max-width: 650px;
    color: var(--grd-muted);
    font-size: 14px;
    line-height: 1.6;
  }

  .grd-guide__hero-media {
    margin: 0;
    overflow: hidden;
    background: var(--grd-soft);
    border-radius: 2px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.10);
  }

  .grd-guide__hero-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .grd-guide__intro {
    max-width: 880px;
    margin: 54px auto 0;
  }

  .grd-guide__intro p {
    margin: 0 0 20px;
  }

  .grd-guide__lead {
    color: #292826;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(21px, 2.5vw, 28px);
    line-height: 1.52;
  }

  .grd-guide__toc {
    display: grid;
    grid-template-columns: minmax(230px, 0.42fr) minmax(0, 1fr);
    gap: 38px;
    margin: 58px 0 64px;
    padding: clamp(26px, 4vw, 42px);
    border: 1px solid var(--grd-line);
    background: var(--grd-soft-2);
  }

  .grd-guide__toc-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--grd-accent-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .grd-guide__toc h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    line-height: 1.2;
  }

  .grd-guide__toc-list {
    columns: 2;
    column-gap: 46px;
    margin: 0;
    padding-left: 22px;
  }

  .grd-guide__toc-list li {
    break-inside: avoid;
    margin: 0 0 10px;
    padding-left: 5px;
  }

  .grd-guide__toc-list a {
    color: var(--grd-ink);
    text-decoration: none;
  }

  .grd-guide__toc-list a:hover,
  .grd-guide__toc-list a:focus-visible {
    color: var(--grd-accent-dark);
    text-decoration: underline;
  }

  .grd-guide__content {
    max-width: 880px;
    margin: 0 auto;
  }

  .grd-guide__chapter {
    scroll-margin-top: 28px;
    margin: 0 0 74px;
    padding-top: 6px;
  }

  .grd-guide__chapter + .grd-guide__chapter {
    padding-top: 64px;
    border-top: 1px solid var(--grd-line);
  }

  .grd-guide__chapter-number {
    margin: 0 0 10px;
    color: var(--grd-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
  }

  .grd-guide__chapter h2 {
    margin: 0 0 25px;
    color: var(--grd-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(31px, 4vw, 44px);
    letter-spacing: -0.022em;
    line-height: 1.14;
  }

  .grd-guide__chapter h3 {
    margin: 34px 0 12px;
    color: var(--grd-ink);
    font-size: 21px;
    line-height: 1.35;
  }

  .grd-guide__chapter p {
    margin: 0 0 20px;
  }

  .grd-guide__chapter ul {
    margin: 0 0 24px 23px;
    padding: 0;
  }

  .grd-guide__chapter li {
    margin: 0 0 9px;
    padding-left: 4px;
  }

  .grd-guide__question-box {
    margin: 30px 0;
    padding: 24px 28px 20px;
    border: 1px solid var(--grd-line);
    background: var(--grd-soft-2);
  }

  .grd-guide__question-box h3 {
    margin-top: 0;
  }

  .grd-guide__question-box ul {
    margin-bottom: 0;
  }

  .grd-tip {
    position: relative;
    margin: 32px 0;
    padding: 24px 28px 24px 31px;
    border-left: 5px solid var(--grd-accent);
    background: var(--grd-soft);
  }

  .grd-tip__label {
    margin: 0 0 8px !important;
    color: var(--grd-accent-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }

  .grd-tip p:last-child {
    margin-bottom: 0;
  }

  .grd-guide__stat-grid,
  .grd-guide__feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 30px 0;
  }

  .grd-guide__stat-card,
  .grd-guide__feature-card {
    padding: 23px 22px;
    border: 1px solid var(--grd-line);
    background: var(--grd-soft-2);
  }

  .grd-guide__stat {
    display: block;
    margin-bottom: 9px;
    color: var(--grd-accent-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.15;
  }

  .grd-guide__stat-card strong {
    display: block;
    margin-bottom: 8px;
  }

  .grd-guide__stat-card p,
  .grd-guide__feature-card p {
    margin-bottom: 0;
    color: var(--grd-muted);
    font-size: 14px;
    line-height: 1.55;
  }

  .grd-guide__feature-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
  }

  .grd-guide__budget-table-wrap {
    margin: 28px 0 16px;
    overflow-x: auto;
    border: 1px solid var(--grd-line);
  }

  .grd-guide__budget-table {
    width: 100%;
    min-width: 590px;
    border-collapse: collapse;
    background: var(--grd-white);
  }

  .grd-guide__budget-table th,
  .grd-guide__budget-table td {
    padding: 15px 17px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--grd-line);
  }

  .grd-guide__budget-table th {
    color: var(--grd-white);
    background: #2b2926;
    font-size: 14px;
    letter-spacing: 0.02em;
  }

  .grd-guide__budget-table tr:last-child td {
    border-bottom: 0;
  }

  .grd-guide__budget-table td:last-child {
    width: 46%;
    font-weight: 700;
  }

  .grd-guide__fine-print {
    color: var(--grd-muted);
    font-size: 13px;
    line-height: 1.55;
  }

  .grd-guide__mistake-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
  }

  .grd-guide__mistake {
    padding: 23px 24px;
    border: 1px solid var(--grd-line);
    background: var(--grd-soft-2);
  }

  .grd-guide__mistake h3 {
    margin: 0 0 10px;
    font-size: 18px;
  }

  .grd-guide__mistake p {
    margin: 0;
    color: var(--grd-muted);
    font-size: 14px;
    line-height: 1.6;
  }

  .grd-guide__chapter--final {
    margin-bottom: 50px;
  }

  .grd-resources {
    margin-top: 76px;
    padding: clamp(34px, 5vw, 58px);
    background: #252321;
    color: var(--grd-white);
  }

  .grd-resources__heading {
    max-width: 720px;
    margin-bottom: 30px;
  }

  .grd-resources__eyebrow {
    color: #e1a15a;
  }

  .grd-resources__heading h2 {
    margin: 0 0 12px;
    color: var(--grd-white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.15;
  }

  .grd-resources__heading p {
    margin: 0;
    color: #d1cec9;
  }

  .grd-resources__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .grd-resource-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 3px 14px;
    min-height: 122px;
    padding: 21px 22px;
    color: var(--grd-white) !important;
    text-decoration: none !important;
    border: 1px solid #4d4945;
    background: #302e2b;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
  }

  .grd-resource-card:hover,
  .grd-resource-card:focus-visible {
    transform: translateY(-2px);
    border-color: #b97832;
    background: #383531;
  }

  .grd-resource-card__number {
    grid-row: 1 / span 2;
    color: #d28a3d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
  }

  .grd-resource-card strong {
    font-size: 17px;
    line-height: 1.3;
  }

  .grd-resource-card > span:last-child {
    color: #c9c6c1;
    font-size: 13px;
    line-height: 1.55;
  }

  .grd-resource-card--contact {
    border-color: #9d6329;
  }

  .grd-resources__home-link {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid #4d4945;
  }

  .grd-resources__home-link a {
    color: #f0d0aa;
    font-size: 14px;
  }

  @media (max-width: 900px) {
    .grd-guide__hero {
      grid-template-columns: 1fr;
      padding-top: 28px;
    }

    .grd-guide__hero-media {
      max-width: 760px;
    }

    .grd-guide__toc {
      grid-template-columns: 1fr;
      gap: 22px;
    }

    .grd-guide__stat-grid,
    .grd-guide__feature-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 680px) {
    .grd-guide {
      font-size: 15px;
    }

    .grd-guide__shell {
      width: min(100% - 28px, 1180px);
      padding-bottom: 42px;
    }

    .grd-guide__hero {
      gap: 28px;
      padding-bottom: 34px;
    }

    .grd-guide__hero h1 {
      font-size: clamp(34px, 11vw, 48px);
    }

    .grd-guide__intro {
      margin-top: 38px;
    }

    .grd-guide__toc {
      margin: 42px 0 50px;
      padding: 23px 21px;
    }

    .grd-guide__toc-list {
      columns: 1;
    }

    .grd-guide__chapter {
      margin-bottom: 56px;
    }

    .grd-guide__chapter + .grd-guide__chapter {
      padding-top: 48px;
    }

    .grd-guide__chapter h2 {
      font-size: 32px;
    }

    .grd-guide__mistake-list,
    .grd-resources__grid {
      grid-template-columns: 1fr;
    }

    .grd-tip,
    .grd-guide__question-box {
      padding-left: 22px;
      padding-right: 22px;
    }

    .grd-resources {
      margin-left: -14px;
      margin-right: -14px;
      padding: 32px 22px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .grd-resource-card {
      transition: none;
    }
  }

/* =========================================================
   GRD PLANNING LIBRARY INDEX
   ========================================================= */

.grd-library-index {
  background: #f3f0ea;
  color: #252525;
  padding: clamp(44px, 7vw, 96px) 20px;
}

.grd-library-index__shell {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.grd-library-index__hero {
  max-width: 820px;
  margin-bottom: clamp(36px, 6vw, 70px);
}

.grd-library-index__hero h1 {
  margin: 10px 0 20px;
  font-size: clamp(42px, 7vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.grd-library-index__hero > p:last-child {
  max-width: 700px;
  margin: 0;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.55;
  color: #55514c;
}

.grd-library-index__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.grd-library-index__card {
  display: flex;
  min-height: 390px;
  flex-direction: column;
  padding: clamp(26px, 3.5vw, 42px);
  border: 1px solid rgba(37, 37, 37, 0.14);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.grd-library-index__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.09);
}

.grd-library-index__number {
  margin-bottom: 56px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7b746b;
}

.grd-library-index__card h2 {
  margin: 0 0 18px;
  font-size: clamp(25px, 2.5vw, 35px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.grd-library-index__card p {
  margin: 0;
  line-height: 1.65;
  color: #615c55;
}

.grd-library-index__link {
  margin-top: auto;
  padding-top: 34px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.grd-library-index__cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 36px;
  margin-top: clamp(34px, 6vw, 72px);
  padding: clamp(34px, 6vw, 72px);
  background: #252525;
  color: #fff;
}

.grd-library-index__cta h2 {
  max-width: 720px;
  margin: 8px 0 18px;
  font-size: clamp(31px, 4vw, 54px);
  line-height: 1.02;
}

.grd-library-index__cta p {
  max-width: 680px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.76);
}

.grd-library-index__cta > a {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 1px solid #fff;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.grd-library-index__cta > a:hover {
  background: #fff;
  color: #252525;
}

@media screen and (max-width: 900px) {
  .grd-library-index__grid {
    grid-template-columns: 1fr;
  }

  .grd-library-index__card {
    min-height: 0;
  }

  .grd-library-index__number {
    margin-bottom: 36px;
  }

  .grd-library-index__cta {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
/* =========================================================
   GRD PLANNING GUIDE — DARK / LIGHT / DARK PUBLICATION SYSTEM
   ========================================================= */

/* Overall page canvas */
.grd-guide {
  background: #f3f0ea !important;
  color: #252525 !important;
}

/* Keep the guide centered and remove inherited dark-theme colors */
.grd-guide__shell {
  color: #252525;
}

/* =========================================================
   1. HERO — DARK
   ========================================================= */

.grd-guide__hero {
  background: #252525 !important;
  color: #ffffff !important;
  padding-left: clamp(28px, 5vw, 64px);
  padding-right: clamp(28px, 5vw, 64px);
  border-bottom: 0;
}

.grd-guide__hero h1,
.grd-guide__hero p,
.grd-guide__hero span,
.grd-guide__hero strong {
  color: #ffffff;
}

.grd-guide__eyebrow {
  color: #e1a15a !important;
}

.grd-guide__dek {
  color: rgba(255, 255, 255, 0.84) !important;
}

.grd-guide__hero-note,
.grd-guide__publication-meta {
  color: rgba(255, 255, 255, 0.74) !important;
}

.grd-guide__publication-meta span,
.grd-guide__publication-meta strong {
  color: inherit;
}

.grd-guide__hero-media {
  background: #302e2b;
}

.grd-guide__print-button {
  border-color: rgba(255, 255, 255, 0.78);
  color: #ffffff;
  background: transparent;
}

.grd-guide__print-button:hover,
.grd-guide__print-button:focus-visible {
  background: #ffffff;
  color: #252525;
}

/* =========================================================
   2. ARTICLE BODY — LIGHT
   ========================================================= */

.grd-guide__intro,
.grd-guide__toc,
.grd-guide__content {
  color: #252525;
}

.grd-guide__intro,
.grd-guide__content {
  background: #ffffff;
}

.grd-guide__intro {
  max-width: none;
  margin-top: 0;
  padding:
    clamp(44px, 6vw, 76px)
    max(clamp(28px, 6vw, 76px), calc((100% - 880px) / 2));
}

.grd-guide__content {
  max-width: none;
  padding:
    0
    max(clamp(28px, 6vw, 76px), calc((100% - 880px) / 2))
    clamp(48px, 7vw, 86px);
}

.grd-guide__toc {
  background: #ffffff !important;
  color: #252525 !important;
  border-color: #dedbd6;
}

.grd-guide__toc h2,
.grd-guide__toc a,
.grd-guide__toc li {
  color: #252525 !important;
}

.grd-guide__toc a:hover,
.grd-guide__toc a:focus-visible {
  color: #a65f12 !important;
}

.grd-guide__chapter {
  color: #252525;
}

.grd-guide__chapter h2,
.grd-guide__chapter h3,
.grd-guide__chapter p,
.grd-guide__chapter li {
  color: #252525;
}

.grd-guide__chapter + .grd-guide__chapter {
  border-top-color: #dedbd6;
}

.grd-guide__chapter-number {
  color: #a65f12 !important;
}

/* White planning cards */
.grd-guide__question-box,
.grd-guide__stat-card,
.grd-guide__feature-card,
.grd-guide__mistake {
  background: #ffffff !important;
  color: #252525 !important;
  border-color: #dedbd6;
}

/* White Grant Design Tip boxes */
.grd-tip {
  background: #ffffff !important;
  color: #252525 !important;
  border-top: 1px solid #dedbd6;
  border-right: 1px solid #dedbd6;
  border-bottom: 1px solid #dedbd6;
  border-left: 5px solid #a65f12;
}

.grd-tip p,
.grd-tip strong {
  color: #252525 !important;
}

.grd-tip__label {
  color: #7c4307 !important;
}

/* =========================================================
   3. CONTINUE PLANNING RESOURCES — DARK
   ========================================================= */

.grd-resources {
  margin-top: 0;
  background: #252321 !important;
  color: #ffffff !important;
}

.grd-resources__heading,
.grd-resources__heading h2,
.grd-resources__heading p,
.grd-resources__heading span {
  color: #ffffff !important;
}

.grd-resources__eyebrow {
  color: #e1a15a !important;
}

.grd-resources__heading p {
  color: #d1cec9 !important;
}

/* Dark cards with white borders and type */
.grd-resource-card {
  background: #302e2b !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
}

.grd-resource-card strong {
  color: #ffffff !important;
}

.grd-resource-card > span:last-child {
  color: #c9c6c1 !important;
}

.grd-resource-card__number {
  color: #e1a15a !important;
}

/* Orange interaction state */
.grd-resource-card:hover,
.grd-resource-card:focus-visible {
  transform: translateY(-2px);
  background: #383531 !important;
  border-color: #c77a2c !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.grd-resource-card--contact {
  border-color: #c77a2c !important;
}

.grd-resources__home-link {
  border-top-color: rgba(255, 255, 255, 0.28);
}

.grd-resources__home-link a {
  color: #f0d0aa !important;
}

/* Prevent the dark GRD theme from recoloring guide text */
.grd-guide .grd-resources a,
.grd-guide .grd-resources a:visited {
  color: #ffffff;
}/* Grant Design Tip — warm editorial callout */

.grd-tip {
  background: #f7f2e8 !important;
  border: 1px solid #e6dcc9 !important;
  border-left: 5px solid #a65f12 !important;
  color: #252525 !important;
}

.grd-tip__label {
  color: #252525 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.grd-tip p,
.grd-tip strong {
  color: #252525 !important;
}/* Customer journey and feature cards */

.grd-guide__feature-grid {
  gap: 22px;
  margin: clamp(34px, 5vw, 56px) 0;
}

.grd-guide__feature-card {
  padding: clamp(24px, 3vw, 34px) !important;
  background: #ffffff !important;
  border: 1px solid #ded8cf !important;
  box-shadow: 0 8px 22px rgba(37, 35, 33, 0.06);
}

.grd-guide__feature-card h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #252525 !important;
}

.grd-guide__feature-card p {
  margin-bottom: 0;
  color: #4d4944 !important;
}

.grd-guide__feature-card:hover {
  border-color: #b46d23 !important;
  box-shadow: 0 12px 28px rgba(37, 35, 33, 0.09);
  transform: translateY(-2px);
}

.grd-guide__feature-card {
  min-height: 270px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06) !important;
}

.grd-guide__feature-card h3 {
  font-weight: 600 !important;
}
}