/* Creates reusable brand-color variables so the site colors can be changed from one place later. */
:root {
  /* Sets the warm cream background inspired by the supplied logo. */
  --cream: #f7f2e9;
  /* Sets a slightly brighter surface color for cards and form areas. */
  --surface: #fffdf8;
  /* Sets the dark brown used in the logo as the primary text and dark-section color. */
  --ink: #351006;
  /* Sets a softer brown for secondary copy. */
  --muted: #6e5b54;
  /* Sets the orange accent taken from the logo. */
  --orange: #ed5d2a;
  /* Sets the cyan accent taken from the logo. */
  --cyan: #28aec0;
  /* Sets a golden accent similar to the filament detail in the logo. */
  --gold: #f5a20a;
  /* Sets a light border color used around cards and form fields. */
  --border: #e5d9cd;
  /* Defines a consistent soft shadow for raised cards. */
  --shadow: 0 22px 55px rgba(53, 16, 6, 0.12);
  /* Defines the maximum width of the main content area. */
  --max-width: 1180px;
}

/* Makes element sizing more predictable by including padding and borders inside declared widths. */
* {
  /* Applies border-box sizing to every element. */
  box-sizing: border-box;
}

/* Enables smooth scrolling when a visitor clicks an on-page navigation link. */
html {
  /* Animates jumps between section anchors. */
  scroll-behavior: smooth;
}

/* Defines the overall page appearance. */
body {
  /* Removes the browser's default outer margin. */
  margin: 0;
  /* Uses a clean system-font stack so no external font download is required. */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Sets the default text color. */
  color: var(--ink);
  /* Sets the main background color. */
  background: var(--cream);
  /* Improves readability with comfortable line spacing. */
  line-height: 1.6;
}

/* Makes images responsive by default. */
img {
  /* Prevents images from exceeding their parent container. */
  max-width: 100%;
  /* Removes the small inline gap browsers normally leave under images. */
  display: block;
}

/* Removes default blue styling and inherits surrounding color unless a component overrides it. */
a {
  /* Uses the current text color for links by default. */
  color: inherit;
  /* Removes the default underline so link styling can be controlled intentionally. */
  text-decoration: none;
}

/* Creates the reusable centered content wrapper used throughout the site. */
.container {
  /* Keeps content nearly full-width on small screens while adding side breathing room. */
  width: min(calc(100% - 2rem), var(--max-width));
  /* Centers the container horizontally. */
  margin-inline: auto;
}

/* Styles the fixed-looking top header. */
.site-header {
  /* Keeps the header visible while the visitor scrolls. */
  position: sticky;
  /* Anchors the sticky header to the top edge of the viewport. */
  top: 0;
  /* Places the header above ordinary page content. */
  z-index: 1000;
  /* Uses a slightly transparent cream background. */
  background: rgba(247, 242, 233, 0.94);
  /* Blurs content behind the translucent header for a polished effect. */
  backdrop-filter: blur(16px);
  /* Adds a subtle divider under the header. */
  border-bottom: 1px solid rgba(53, 16, 6, 0.08);
}

/* Aligns the logo and navigation inside the header. */
.header-inner {
  /* Places the logo and navigation side by side. */
  display: flex;
  /* Vertically centers the header items. */
  align-items: center;
  /* Pushes the logo left and navigation right. */
  justify-content: space-between;
  /* Adds space between items if the screen becomes tight. */
  gap: 2rem;
  /* Gives the header comfortable vertical height. */
  min-height: 86px;
}

/* Sets the clickable logo area width. */
.brand {
  /* Gives the logo a practical desktop width. */
  width: 185px;
}

/* Controls how the source logo image fits within the compact header area. */
.brand img {
  /* Makes the logo fill the width of its clickable container. */
  width: 100%;
  /* Crops empty space around the square source image so the brand appears larger in the header. */
  clip-path: inset(10% 0 10% 0);
  /* Pulls the clipped image inward so it does not make the header excessively tall. */
  margin-block: -14%;
}

/* Places the desktop navigation links on one row. */
.primary-navigation {
  /* Displays the navigation links horizontally. */
  display: flex;
  /* Vertically aligns the links. */
  align-items: center;
  /* Adds even spacing between links. */
  gap: 1.35rem;
  /* Makes navigation text slightly heavier. */
  font-weight: 700;
  /* Uses a compact navigation text size. */
  font-size: 0.95rem;
}

/* Gives normal navigation links a subtle interactive transition. */
.primary-navigation a {
  /* Animates color changes on hover. */
  transition: color 180ms ease;
}

/* Changes ordinary navigation links to the orange accent when hovered. */
.primary-navigation a:hover {
  /* Applies the orange brand color. */
  color: var(--orange);
}

/* Styles the quote link as a button inside the navigation. */
.primary-navigation .nav-cta {
  /* Adds horizontal and vertical space inside the button. */
  padding: 0.75rem 1rem;
  /* Gives the button rounded corners. */
  border-radius: 999px;
  /* Uses the dark brand color as the button background. */
  background: var(--ink);
  /* Makes the button text readable against the dark background. */
  color: white;
}

/* Changes the navigation CTA background when hovered. */
.primary-navigation .nav-cta:hover {
  /* Uses the orange brand color for hover feedback. */
  color: white;
  /* Changes the background to orange. */
  background: var(--orange);
}

/* Hides the mobile menu button on larger screens. */
.nav-toggle {
  /* Removes the button from the desktop layout. */
  display: none;
}

/* Creates generous vertical space around major page sections. */
.section {
  /* Adds consistent top and bottom padding. */
  padding: 6rem 0;
}

/* Gives light sections a bright neutral surface. */
.section-light {
  /* Uses the brighter card background color. */
  background: var(--surface);
}

/* Styles the main hero section. */
.hero {
  /* Adds extra space above and below the opening content. */
  padding: 6.5rem 0 7rem;
  /* Creates a subtle multi-color background using the brand accents. */
  background:
    radial-gradient(circle at 88% 18%, rgba(40, 174, 192, 0.18), transparent 24rem),
    radial-gradient(circle at 12% 80%, rgba(237, 93, 42, 0.12), transparent 25rem),
    var(--cream);
  /* Hides any decorative overflow beyond the hero edges. */
  overflow: hidden;
}

/* Creates the hero's responsive two-column layout. */
.hero-grid {
  /* Uses CSS Grid for reliable column alignment. */
  display: grid;
  /* Gives the text slightly more width than the image. */
  grid-template-columns: 1.1fr 0.9fr;
  /* Adds generous space between the two columns. */
  gap: 5rem;
  /* Vertically centers the content in both columns. */
  align-items: center;
}

/* Styles the small uppercase labels used throughout the site. */
.eyebrow {
  /* Removes unnecessary top margin. */
  margin-top: 0;
  /* Adds a little space beneath the label. */
  margin-bottom: 0.8rem;
  /* Uses the orange accent for attention. */
  color: var(--orange);
  /* Makes the label bold. */
  font-weight: 800;
  /* Adds extra letter spacing for a crafted label look. */
  letter-spacing: 0.14em;
  /* Displays the label in uppercase. */
  text-transform: uppercase;
  /* Keeps the label smaller than body copy. */
  font-size: 0.78rem;
}

/* Styles the main hero headline. */
.hero h1 {
  /* Removes the browser's default top margin. */
  margin-top: 0;
  /* Controls the bottom spacing before the supporting paragraph. */
  margin-bottom: 1.4rem;
  /* Scales fluidly between phone and large-desktop sizes. */
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  /* Tightens line spacing for a strong display headline. */
  line-height: 0.98;
  /* Tightens letter spacing slightly for large text. */
  letter-spacing: -0.055em;
  /* Limits the headline width for easier reading. */
  max-width: 12ch;
}

/* Styles the main supporting paragraph in the hero. */
.hero-text {
  /* Uses the softer text color. */
  color: var(--muted);
  /* Makes the supporting copy slightly larger than normal body text. */
  font-size: 1.18rem;
  /* Limits line length for readability. */
  max-width: 58ch;
  /* Removes extra top margin and sets the bottom spacing. */
  margin: 0 0 2rem;
}

/* Places hero buttons on one row when space allows. */
.hero-actions {
  /* Uses flexbox for the button group. */
  display: flex;
  /* Allows buttons to wrap on narrower screens. */
  flex-wrap: wrap;
  /* Adds space between buttons. */
  gap: 0.9rem;
  /* Adds space below the buttons. */
  margin-bottom: 2rem;
}

/* Defines shared button styling. */
.button {
  /* Allows links to behave like sized interface buttons. */
  display: inline-flex;
  /* Vertically centers button text. */
  align-items: center;
  /* Horizontally centers button text. */
  justify-content: center;
  /* Gives buttons comfortable clickable space. */
  padding: 0.9rem 1.25rem;
  /* Creates pill-shaped buttons. */
  border-radius: 999px;
  /* Removes default form-button borders. */
  border: 0;
  /* Makes the text bold. */
  font-weight: 800;
  /* Uses the same font as the surrounding page. */
  font: inherit;
  /* Makes buttons show the hand cursor. */
  cursor: pointer;
  /* Animates small hover changes. */
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

/* Makes buttons lift slightly when hovered. */
.button:hover {
  /* Moves the button upward by two pixels. */
  transform: translateY(-2px);
}

/* Styles the primary orange button. */
.button-primary {
  /* Uses the orange brand color. */
  background: var(--orange);
  /* Uses white text for contrast. */
  color: white;
  /* Adds a subtle colored shadow. */
  box-shadow: 0 12px 28px rgba(237, 93, 42, 0.25);
}

/* Darkens the primary button slightly when hovered. */
.button-primary:hover {
  /* Uses a deeper orange for interactive feedback. */
  background: #d94d1e;
}

/* Styles secondary buttons with a lighter treatment. */
.button-secondary {
  /* Uses a translucent white background. */
  background: rgba(255, 255, 255, 0.72);
  /* Uses the primary text color. */
  color: var(--ink);
  /* Adds a subtle outline. */
  border: 1px solid rgba(53, 16, 6, 0.14);
}

/* Styles the short hero benefit list. */
.hero-points {
  /* Removes the browser's default bullet markers. */
  list-style: none;
  /* Removes default list padding. */
  padding: 0;
  /* Removes default list margins. */
  margin: 0;
  /* Lays the items out in a responsive row. */
  display: flex;
  /* Allows the items to wrap when necessary. */
  flex-wrap: wrap;
  /* Adds spacing between benefit items. */
  gap: 0.75rem 1.4rem;
  /* Uses a slightly smaller text size. */
  font-size: 0.95rem;
  /* Makes the benefits moderately bold. */
  font-weight: 700;
}

/* Adds a small cyan dot before each hero benefit. */
.hero-points li::before {
  /* Creates the decorative marker. */
  content: "●";
  /* Uses the cyan brand color. */
  color: var(--cyan);
  /* Adds space between the dot and text. */
  margin-right: 0.45rem;
}

/* Creates a positioning context for the hero product card and floating badge. */
.hero-media {
  /* Allows the badge to be positioned relative to this wrapper. */
  position: relative;
}

/* Gives photographs a consistent professional card treatment. */
.image-card {
  /* Uses the bright surface color behind images. */
  background: var(--surface);
  /* Adds internal white space like a framed product photo. */
  padding: 0.8rem;
  /* Rounds the outside corners. */
  border-radius: 1.7rem;
  /* Adds the shared card shadow. */
  box-shadow: var(--shadow);
  /* Adds a very light border. */
  border: 1px solid rgba(53, 16, 6, 0.08);
}

/* Rounds the actual image corners inside image cards. */
.image-card img {
  /* Rounds the photo itself slightly less than the outer frame. */
  border-radius: 1.25rem;
  /* Makes the image fill the full card width. */
  width: 100%;
}

/* Gives the main hero photo a slightly rotated handmade/product-showcase feel. */
.hero-image-card {
  /* Rotates the card a small amount. */
  transform: rotate(2deg);
}

/* Styles the floating NFC message over the hero image. */
.hero-badge {
  /* Positions the badge independently of normal document flow. */
  position: absolute;
  /* Places the badge near the lower-left edge of the photo. */
  left: -2rem;
  /* Places the badge near the bottom of the photo. */
  bottom: 2rem;
  /* Stacks the bold title and description vertically. */
  display: grid;
  /* Adds a small gap between the two lines. */
  gap: 0.2rem;
  /* Limits the badge width. */
  max-width: 270px;
  /* Adds internal spacing. */
  padding: 1rem 1.15rem;
  /* Uses the dark brand color. */
  background: var(--ink);
  /* Uses white text for contrast. */
  color: white;
  /* Rounds the badge corners. */
  border-radius: 1rem;
  /* Adds a shadow so the badge feels layered above the photo. */
  box-shadow: var(--shadow);
}

/* Makes the NFC badge title use the cyan accent. */
.hero-badge strong {
  /* Applies the cyan brand color. */
  color: var(--cyan);
}

/* Styles section-heading blocks used before grids. */
.section-heading {
  /* Limits the text width so large sections remain easy to scan. */
  max-width: 760px;
  /* Adds space below the heading before cards begin. */
  margin-bottom: 3rem;
}

/* Styles second-level headings across the page. */
.section-heading h2,
.nfc-copy h2,
.about-grid h2,
.quote-copy h2 {
  /* Removes unnecessary top margin. */
  margin-top: 0;
  /* Adds controlled space beneath the heading. */
  margin-bottom: 1rem;
  /* Scales headings responsively. */
  font-size: clamp(2rem, 4vw, 3.5rem);
  /* Tightens heading line spacing. */
  line-height: 1.04;
  /* Tightens large-letter spacing slightly. */
  letter-spacing: -0.04em;
}

/* Styles explanatory paragraphs below section headings. */
.section-heading > p:last-child,
.nfc-copy > p,
.about-copy,
.quote-copy > p {
  /* Uses the softer body-copy color. */
  color: var(--muted);
}

/* Creates the responsive service-card grid. */
.card-grid {
  /* Uses CSS Grid so cards stay aligned. */
  display: grid;
  /* Creates four equal columns on large screens. */
  grid-template-columns: repeat(4, 1fr);
  /* Adds spacing between cards. */
  gap: 1rem;
}

/* Styles each service card. */
.service-card {
  /* Uses the warm cream color to distinguish cards from the section background. */
  background: var(--cream);
  /* Adds comfortable internal spacing. */
  padding: 1.6rem;
  /* Rounds card corners. */
  border-radius: 1.25rem;
  /* Adds a subtle outline. */
  border: 1px solid var(--border);
}

/* Styles the numbered service marker. */
.service-number {
  /* Uses cyan for a distinctive technical accent. */
  color: var(--cyan);
  /* Makes the number bold. */
  font-weight: 900;
  /* Adds extra letter spacing. */
  letter-spacing: 0.08em;
  /* Adds space below the number. */
  margin-bottom: 2.5rem;
}

/* Styles service-card headings. */
.service-card h3 {
  /* Removes default top spacing. */
  margin-top: 0;
  /* Adds controlled spacing beneath the heading. */
  margin-bottom: 0.65rem;
  /* Uses a readable card-heading size. */
  font-size: 1.2rem;
}

/* Styles service-card body text. */
.service-card p {
  /* Removes extra bottom space. */
  margin-bottom: 0;
  /* Uses the softer copy color. */
  color: var(--muted);
}

/* Gives the featured NFC section a subtle colored background. */
.nfc-section {
  /* Creates a gentle cyan tint without overpowering the brand. */
  background: linear-gradient(135deg, rgba(40, 174, 192, 0.09), transparent 48%), var(--cream);
}

/* Creates the NFC section's two-column layout. */
.nfc-grid {
  /* Uses CSS Grid for image/text alignment. */
  display: grid;
  /* Gives the image and text equal width. */
  grid-template-columns: 1fr 1fr;
  /* Adds generous spacing between columns. */
  gap: 5rem;
  /* Vertically centers both columns. */
  align-items: center;
}

/* Creates the row of small NFC use-case labels. */
.use-case-list {
  /* Uses flexbox for chip-style labels. */
  display: flex;
  /* Allows labels to move to additional rows. */
  flex-wrap: wrap;
  /* Adds space between labels. */
  gap: 0.55rem;
  /* Adds vertical space around the label group. */
  margin: 1.8rem 0;
}

/* Styles each individual NFC use-case label. */
.use-case-list span {
  /* Adds internal spacing. */
  padding: 0.45rem 0.7rem;
  /* Creates rounded pill-shaped labels. */
  border-radius: 999px;
  /* Uses a translucent cyan background. */
  background: rgba(40, 174, 192, 0.13);
  /* Uses the dark text color. */
  color: var(--ink);
  /* Makes labels moderately bold. */
  font-weight: 700;
  /* Uses a compact size. */
  font-size: 0.9rem;
}

/* Styles simple text links that act as calls to action. */
.text-link {
  /* Uses the orange accent. */
  color: var(--orange);
  /* Makes the link stand out. */
  font-weight: 800;
}

/* Creates the dark portfolio section. */
.section-dark {
  /* Uses the deepest logo brown as the background. */
  background: var(--ink);
  /* Sets ordinary text to white in this section. */
  color: white;
}

/* Adjusts supporting paragraph color within the dark section. */
.section-heading-dark > p:last-child {
  /* Uses a translucent white for softer contrast. */
  color: rgba(255, 255, 255, 0.7);
}

/* Creates the featured project card. */
.project-feature {
  /* Uses a responsive two-column grid. */
  display: grid;
  /* Gives the text slightly more width than the image. */
  grid-template-columns: 1.1fr 0.9fr;
  /* Adds spacing between the two columns. */
  gap: 3rem;
  /* Vertically centers the project content. */
  align-items: center;
  /* Adds internal spacing. */
  padding: 1.2rem;
  /* Uses a slightly lighter dark background. */
  background: rgba(255, 255, 255, 0.07);
  /* Adds a subtle outline. */
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* Rounds the card corners. */
  border-radius: 1.5rem;
}

/* Adds extra breathing room around the project text. */
.project-feature > div {
  /* Adds internal spacing around the project description. */
  padding: 1.3rem;
}

/* Styles the featured project label. */
.project-label {
  /* Uses cyan for the project category. */
  color: var(--cyan);
  /* Makes the category bold. */
  font-weight: 800;
  /* Displays it in uppercase. */
  text-transform: uppercase;
  /* Adds letter spacing. */
  letter-spacing: 0.12em;
  /* Uses a small category-label size. */
  font-size: 0.75rem;
}

/* Styles the featured project title. */
.project-feature h3 {
  /* Removes default top margin. */
  margin-top: 0;
  /* Sets a responsive headline size. */
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  /* Tightens line spacing. */
  line-height: 1.08;
  /* Adds controlled spacing beneath the heading. */
  margin-bottom: 1rem;
}

/* Styles supporting text inside the project feature. */
.project-feature p:not(.project-label) {
  /* Uses a softer white for body copy. */
  color: rgba(255, 255, 255, 0.72);
}

/* Styles the project image. */
.project-feature img {
  /* Gives the image rounded corners. */
  border-radius: 1rem;
  /* Makes the image fill its grid column. */
  width: 100%;
  /* Uses a consistent crop height on large screens. */
  max-height: 420px;
  /* Crops the image while preserving its proportions. */
  object-fit: cover;
}

/* Makes the prototype disclaimer smaller. */
.project-note {
  /* Uses a compact note size. */
  font-size: 0.86rem;
}

/* Creates the two-column about section. */
.about-grid {
  /* Uses CSS Grid. */
  display: grid;
  /* Gives the heading and copy equal width. */
  grid-template-columns: 1fr 1fr;
  /* Adds generous spacing between columns. */
  gap: 5rem;
  /* Aligns content to the beginning of each column. */
  align-items: start;
}

/* Removes unnecessary top margin from the first about paragraph. */
.about-copy p:first-child {
  /* Aligns the first paragraph with the nearby heading. */
  margin-top: 0;
}

/* Creates the quote section's warm gradient background. */
.quote-section {
  /* Blends the logo's orange and cyan accents into a light background. */
  background:
    radial-gradient(circle at 10% 20%, rgba(237, 93, 42, 0.16), transparent 24rem),
    radial-gradient(circle at 90% 80%, rgba(40, 174, 192, 0.16), transparent 24rem),
    var(--cream);
}

/* Creates the quote section's two-column layout. */
.quote-grid {
  /* Uses CSS Grid for the copy and form. */
  display: grid;
  /* Makes the form slightly wider than the copy. */
  grid-template-columns: 0.8fr 1.2fr;
  /* Adds generous space between columns. */
  gap: 5rem;
  /* Aligns both columns to the top. */
  align-items: start;
}

/* Styles the small form-owner note. */
.form-note {
  /* Uses a smaller text size than the main pitch. */
  font-size: 0.88rem;
}

/* Styles the quote request form. */
.quote-form {
  /* Uses a clean light background. */
  background: var(--surface);
  /* Adds comfortable internal spacing. */
  padding: 1.6rem;
  /* Rounds the form container. */
  border-radius: 1.4rem;
  /* Adds the shared elevated-card shadow. */
  box-shadow: var(--shadow);
  /* Adds a subtle border. */
  border: 1px solid rgba(53, 16, 6, 0.08);
  /* Uses grid layout so fields stack consistently. */
  display: grid;
  /* Adds space between form controls. */
  gap: 0.7rem;
}

/* Styles form field labels. */
.quote-form label {
  /* Makes labels clear and easy to scan. */
  font-weight: 800;
  /* Adds slight space above labels after the first field. */
  margin-top: 0.3rem;
}

/* Gives text fields and the textarea a consistent appearance. */
.quote-form input,
.quote-form textarea {
  /* Makes fields fill the form width. */
  width: 100%;
  /* Adds comfortable typing space. */
  padding: 0.9rem 1rem;
  /* Uses the same font as the page. */
  font: inherit;
  /* Uses the normal text color for entered content. */
  color: var(--ink);
  /* Uses a white background. */
  background: white;
  /* Adds a light border. */
  border: 1px solid var(--border);
  /* Rounds field corners. */
  border-radius: 0.8rem;
  /* Removes browser-specific outer shadows. */
  outline: none;
}

/* Highlights a field when the visitor clicks or tabs into it. */
.quote-form input:focus,
.quote-form textarea:focus {
  /* Changes the border to cyan for a clear focus state. */
  border-color: var(--cyan);
  /* Adds an accessible visible focus ring. */
  box-shadow: 0 0 0 3px rgba(40, 174, 192, 0.15);
}

/* Allows only vertical resizing of the project description box. */
.quote-form textarea {
  /* Prevents sideways resizing from breaking the layout. */
  resize: vertical;
}

/* Hides the anti-spam honeypot field from normal visitors. */
.hidden-field {
  /* Removes the field from the visual page while leaving it in the HTML for spam detection. */
  display: none;
}

/* Adds a little spacing above the form's submit button. */
.quote-form .button {
  /* Separates the button from the final text field. */
  margin-top: 0.5rem;
}

/* Styles the site footer. */
.site-footer {
  /* Uses the dark brand background. */
  background: #240b04;
  /* Uses white text. */
  color: white;
  /* Adds vertical spacing. */
  padding: 2.2rem 0;
}

/* Aligns the footer's two content groups. */
.footer-inner {
  /* Places footer groups side by side on wide screens. */
  display: flex;
  /* Pushes one group to each side. */
  justify-content: space-between;
  /* Vertically centers the groups. */
  align-items: center;
  /* Adds spacing if the layout wraps. */
  gap: 2rem;
}

/* Styles footer paragraphs. */
.site-footer p {
  /* Uses softer white for supporting information. */
  color: rgba(255, 255, 255, 0.64);
  /* Removes excessive default paragraph margins. */
  margin: 0.2rem 0 0;
}

/* Begins tablet-specific layout adjustments. */
@media (max-width: 920px) {
  /* Reduces major section padding on medium screens. */
  .section {
    /* Uses slightly tighter vertical spacing. */
    padding: 4.5rem 0;
  }

  /* Stacks the hero into one column. */
  .hero-grid {
    /* Uses a single column instead of two. */
    grid-template-columns: 1fr;
    /* Reduces the gap between hero text and image. */
    gap: 3rem;
  }

  /* Prevents the hero heading from becoming unnecessarily narrow once stacked. */
  .hero h1 {
    /* Allows more characters per line. */
    max-width: 16ch;
  }

  /* Keeps the floating badge inside the photo area on narrower screens. */
  .hero-badge {
    /* Moves the badge inward from the left edge. */
    left: 1rem;
    /* Moves the badge slightly closer to the bottom. */
    bottom: 1rem;
  }

  /* Changes the four-card service grid to two columns. */
  .card-grid {
    /* Creates two equal card columns. */
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stacks major two-column sections on medium screens. */
  .nfc-grid,
  .about-grid,
  .quote-grid,
  .project-feature {
    /* Uses one full-width column. */
    grid-template-columns: 1fr;
    /* Uses a smaller gap when stacked. */
    gap: 2.5rem;
  }
}

/* Begins phone-specific layout adjustments. */
@media (max-width: 720px) {
  /* Makes the header a little shorter. */
  .header-inner {
    /* Reduces the minimum header height. */
    min-height: 74px;
  }

  /* Slightly reduces the logo width on phones. */
  .brand {
    /* Uses a compact phone-friendly logo size. */
    width: 155px;
  }

  /* Displays the mobile hamburger menu button. */
  .nav-toggle {
    /* Shows the previously hidden button. */
    display: grid;
    /* Vertically centers the three bars. */
    align-content: center;
    /* Adds even space between bars. */
    gap: 4px;
    /* Gives the button a square tap target. */
    width: 44px;
    /* Gives the button a square tap target. */
    height: 44px;
    /* Uses a transparent background. */
    background: transparent;
    /* Adds a subtle outline. */
    border: 1px solid var(--border);
    /* Rounds the button corners. */
    border-radius: 0.75rem;
    /* Adds internal horizontal space around the bars. */
    padding: 0 11px;
    /* Shows the hand cursor when hovered. */
    cursor: pointer;
  }

  /* Styles each bar inside the mobile hamburger icon. */
  .nav-toggle span {
    /* Makes each bar fill the inner button width. */
    width: 100%;
    /* Gives each bar visible thickness. */
    height: 2px;
    /* Uses the dark brand color. */
    background: var(--ink);
  }

  /* Converts the main navigation into a hidden dropdown panel on phones. */
  .primary-navigation {
    /* Removes the menu from view until JavaScript opens it. */
    display: none;
    /* Positions the dropdown relative to the browser viewport/header. */
    position: absolute;
    /* Places the menu directly beneath the header. */
    top: 74px;
    /* Aligns the menu with the left edge. */
    left: 0;
    /* Aligns the menu with the right edge. */
    right: 0;
    /* Stacks links vertically. */
    flex-direction: column;
    /* Aligns menu text to the left. */
    align-items: stretch;
    /* Uses the light surface background. */
    background: var(--surface);
    /* Adds comfortable menu spacing. */
    padding: 1rem;
    /* Adds a divider under the dropdown. */
    border-bottom: 1px solid var(--border);
    /* Adds a subtle dropdown shadow. */
    box-shadow: 0 14px 30px rgba(53, 16, 6, 0.1);
  }

  /* Shows the phone navigation after JavaScript applies the open class. */
  .primary-navigation.is-open {
    /* Makes the vertical menu visible. */
    display: flex;
  }

  /* Adds tap-friendly spacing to each mobile navigation link. */
  .primary-navigation a {
    /* Enlarges each menu item's clickable area. */
    padding: 0.8rem;
  }

  /* Reduces hero spacing on phones. */
  .hero {
    /* Uses more compact phone-friendly spacing. */
    padding: 4rem 0 4.5rem;
  }

  /* Straightens the hero photo on phones for cleaner use of narrow space. */
  .hero-image-card {
    /* Removes the desktop rotation. */
    transform: none;
  }

  /* Makes the service cards stack in one column. */
  .card-grid {
    /* Uses one full-width service card per row. */
    grid-template-columns: 1fr;
  }

  /* Stacks footer groups on phones. */
  .footer-inner {
    /* Changes the layout from row to column. */
    flex-direction: column;
    /* Aligns footer content to the left. */
    align-items: flex-start;
  }
}