/* =========================================================
   단단 홈페이지 - vanilla HTML/CSS/JS clone
   Fonts: Pretendard (self-hosted, weights 400/500/600/700/800)

   SCALING MODEL
   One number drives the whole design: the font-size on .wrap.
   Everything else — type, padding, gaps, icons, borders, radii —
   is a plain em multiple of it, so the entire composition can only
   ever resize as a single unit, in exact proportion.

   .wrap's font-size is a clamp() on the viewport: fluid from 1024px
   up to 1200px, then pinned at its ceiling so wider screens only get
   more side margin.

   The content column's own width is in em as well, so the column and
   its contents shrink by the identical factor. That is what freezes
   line breaks: characters per line cannot change when the text and
   the box holding it scale together.

   Breakpoint: single mobile breakpoint at 1024px (bottom of file),
   where the master scale switches to its own mobile formula.
   ========================================================= */

@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors extracted from the Framer SSR CSS custom properties / fallbacks */
  --color-bg: #fcfaf5;            /* rgb(252,250,245) - html/body background */
  --color-surface: #f5f5f7;       /* card / soft section background */
  --color-surface-alt: #f3f3f1;   /* FAQ item background rgb(242,243,240) */
  --color-border: rgba(0, 0, 0, 0.08);
  --color-text: #000000;
  --color-text-body: rgba(0, 0, 0, 0.9);   /* #000000e6 */
  --color-text-muted: #666666;             /* rgb(102,102,102) */
  --color-accent: #e14f50;                 /* button / token brand color */
  --color-accent-text: #d94545;            /* rgb(217,69,69) logo/wordmark color */
  --color-white: #ffffff;

  /* em, so radii scale with everything else. Resolved against the
     font-size of whichever element uses them — all of which are on
     the master scale. */
  --radius-lg: 1.5em;    /* 24px at full scale */
  --radius-md: 0.75em;   /* 12px */
  --radius-sm: 0.5em;    /* 8px */
  --hairline: 0.0625em;  /* 1px */

  /* em: the content block's own width is part of the scale too, so it
     shrinks at exactly the same rate as everything inside it. That is
     what keeps line breaks frozen — characters per line can't change
     if both the text and the column scale by the same factor. */
  --max-width: 75em;     /* 1200px at full scale */
  --side-padding: 1.25em; /* 20px */
}

* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================
   The scale container
   ========================================================= */

.wrap {
  /* The one number the whole design hangs off. Between 1024px and
     1200px it tracks the viewport; at 1200px it hits the ceiling and
     stops, so wider screens just get more side margin — the content
     block itself is done growing.

     Note this is vw, not cqw: an element that is itself a query
     container resolves container units against its ANCESTOR, not
     itself, so cqw here would silently mean "viewport" anyway. Using
     vw says what actually happens. Proportionality is guaranteed the
     honest way instead — max-width below is in em, so the column
     width scales by the very same factor as its contents. */
  font-size: clamp(0.8rem, -0.364rem + 1.818vw, 1rem);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6em var(--side-padding);
}

/* =========================================================
   Typography — every size is a multiple of the master scale
   ========================================================= */

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

h1 {
  font-weight: 700;
  font-size: 2.8125em;   /* 45px */
  line-height: 1.3em;
  letter-spacing: -0.01em;
  word-break: keep-all;
  white-space: nowrap;   /* breaks come only from manual <br> — see mobile override */
  color: var(--color-text);
}

h2 {
  font-weight: 700;
  font-size: 2.1875em;   /* 35px */
  line-height: 1.3em;
  letter-spacing: -0.01em;
  word-break: keep-all;
  white-space: nowrap;
  margin-bottom: 0.686em; /* 24px */
  color: var(--color-text);
}

h3 {
  font-weight: 600;
  font-size: 1.5em;      /* 24px */
  line-height: 1.4em;
  letter-spacing: -0.005em;
  word-break: keep-all;
  color: var(--color-text);
}

h4 {
  font-weight: 600;
  font-size: 1.1875em;   /* 19px */
  line-height: 1.5em;
  letter-spacing: 0em;
  word-break: keep-all;
  color: var(--color-text);
}

p {
  font-weight: 500;
  font-size: 1em;        /* 16px */
  line-height: 1.6em;
  letter-spacing: 0em;
  word-break: keep-all;
  color: var(--color-text-body);
}

/* small "kicker" label above section headings, e.g. "해결책" */
.kicker {
  font-weight: 600;
  font-size: 1em;
  line-height: 1.4em;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 0.75em;
}

/* plain centered label above the testimonial quote */
.section-label {
  color: var(--color-text-body);
  margin: 0 0 1em;
}

.section-label.center {
  text-align: center;
}

/* =========================================================
   Layout helpers
   ========================================================= */

.section-head {
  text-align: left;
  max-width: 45em;       /* 720px */
  margin: 0 0 3em;       /* 48px */
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625em;          /* 10px */
  padding: 0.75em 1.5em; /* 12px 24px */
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-white) !important;
  font-weight: 500;
  font-size: 1em;        /* 16px */
  border: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn p, .btn span {
  color: var(--color-white);
  font-size: 1em;
}

.btn:hover {
  opacity: 0.88;
}

.btn:active {
  transform: scale(0.97);
}

/* =========================================================
   Shared text+image row layout: hero / 해결책 / 이야기 먼저
   ========================================================= */

.container {
  display: flex;
  align-items: center;
  gap: 4em;              /* 64px */
}

.text-box {
  flex: 1;
  min-width: 0;
}

.image-box {
  flex: 1;
  min-width: 0;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.image-box img,
.image-box iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 250, 245, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.75em;        /* 76px */
  padding-top: 0;
  padding-bottom: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5em;            /* 8px */
}

.logo img {
  width: 1.75em;         /* 28px */
  height: 1.75em;
}

.logo strong {
  font-weight: 700;
  font-size: 1.25em;     /* 20px */
  letter-spacing: -0.03em;
  line-height: 1.3em;
  color: var(--color-accent-text);
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 2em;              /* 32px */
}

.main-nav a {
  font-weight: 500;
  font-size: 0.9375em;   /* 15px */
  letter-spacing: -0.01em;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1em;              /* 16px */
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5em;        /* 8px */
}

.nav-toggle span {
  display: block;
  width: 1.375em;        /* 22px */
  height: 0.125em;       /* 2px */
  background: var(--color-text);
  margin: 0.3125em 0;    /* 5px */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* =========================================================
   Hero
   ========================================================= */

.hero .wrap {
  padding-top: 3em;      /* 48px */
}

.hero-copy h1 {
  margin-bottom: 0.533em; /* 24px, in h1's own em basis */
}

.hero-copy p {
  margin-bottom: 2.5em;   /* 40px */
  /* em width, so the wrap point can never drift out of sync with the
     font by a rounding pixel and drop a word to a new line */
  max-width: 34.5em;
}

/* =========================================================
   해결책 / Features
   ========================================================= */

.features-title {
  max-width: 20em;       /* 700px, in h2's own em basis */
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 2.5em;            /* 40px */
}

.feature-item {
  border-left: 0.1875em solid var(--color-text); /* 3px */
  padding-left: 1.5em;   /* 24px */
}

.feature-item h3 {
  margin-bottom: 0.667em; /* 16px, in h3's own em basis */
}

.feature-item p {
  max-width: 34.5em;
}

/* =========================================================
   단단 이야기 / About
   ========================================================= */

.about {
  background: var(--color-surface-alt);
}

.about .wrap {
  padding-top: 7.5em;    /* 120px */
  padding-bottom: 7.5em;
}

/* A letter laid on the section: paper card, generous margins, read top to
   bottom rather than split into columns. */
.letter {
  max-width: 41.25em;    /* 660px */
  margin: 0 auto;
  background: var(--color-bg);
  padding: 4.5em 3.5em;  /* 72px 56px */
  box-shadow: 0 0.0625em 0.125em rgba(0, 0, 0, 0.04),
              0 0.75em 2em rgba(0, 0, 0, 0.07);
  /* Square corners and a slight tilt, so it reads as a sheet of paper set
     down on the page rather than another rounded card. */
  transform: rotate(-1deg);
}

.letter p {
  line-height: 1.8;
  margin-bottom: 1.5em;  /* 24px */
}

.letter p:last-of-type {
  margin-bottom: 0;
}

.letter-sign {
  margin-top: 2.75em;    /* 44px */
}

.signature {
  display: block;
  width: 8.5em;          /* 136px */
  height: auto;
  margin-bottom: 0.75em; /* 12px */
}

.letter .person-row {
  justify-content: flex-start;
}

.letter .avatar {
  width: 2em;            /* 32px */
  height: 2em;
}

.letter .about-person .name,
.letter .about-person .role {
  font-size: 0.8125em;   /* 13px */
}

.person-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75em;           /* 12px */
}

.avatar {
  width: 2.75em;         /* 44px */
  height: 2.75em;
  border-radius: 50%;
  object-fit: cover;
}

.about-person {
  display: flex;
  flex-direction: column;
}

.about-person .name {
  font-weight: 500;
  font-size: 1em;
}

.about-person .role {
  font-weight: 500;
  font-size: 1em;
  color: rgba(0, 0, 0, 0.6);
}

/* =========================================================
   FAQ
   ========================================================= */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.625em;          /* 10px */
}

.faq-item {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;              /* 16px */
  padding: 1.5em 1em;    /* 24px 16px */
  background: none;
  border: none;
  text-align: left;
  font-size: 1em;
}

.faq-question h4 {
  margin: 0;
}

.faq-icon {
  position: relative;
  width: 1.75em;         /* 28px */
  height: 1.75em;
  flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-text);
  transition: transform 0.2s ease;
}

.faq-icon::before {
  width: 0.75em;         /* 12px */
  height: 0.125em;       /* 2px */
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  width: 0.125em;
  height: 0.75em;
  transform: translate(-50%, -50%);
}

.faq-item[data-open="true"] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-answer p {
  padding: 0 1em 1.5em;  /* 16px 24px */
}

.faq-item[data-open="true"] .faq-answer {
  max-height: 18.75em;   /* 300px */
}

/* =========================================================
   고객 후기 / Testimonial
   ========================================================= */

.testimonial .wrap {
  max-width: 50em;       /* 800px at full scale */
  text-align: center;
}

.quote {
  margin: 0;
}

/* An oversized quotation mark, set faint so it frames the passage without
   competing with it — the cue that this is someone speaking, not our copy. */
.quote::before {
  content: "\201C";
  display: block;
  /* Pretendard draws this glyph as a pair of straight ticks; a serif face
     gives it the curled shape that reads as a quotation mark at this size. */
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5em;
  line-height: 1;
  color: var(--color-text);
  opacity: 0.15;
}

.quote blockquote {
  margin: 0;
}

.quote blockquote p {
  font-size: 1.25em;     /* 20px */
  line-height: 1.8;
  color: var(--color-text-body);
  margin-bottom: 1.8em;  /* 36px, in this element's own em basis */
}

.quote figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125em;          /* 2px */
}

.quote .name {
  font-weight: 600;
}

.quote .role {
  font-size: 0.875em;    /* 14px */
  color: var(--color-text-muted);
}

.quote .brand {
  margin-top: 0.75em;    /* 12px */
  font-size: 0.8125em;   /* 13px */
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

/* =========================================================
   이야기 먼저 / Method
   ========================================================= */

.method-copy p {
  margin-bottom: 2em;    /* 32px */
  max-width: 34.5em;
}

.method-steps {
  display: flex;
  flex-direction: column;
  gap: 1em;              /* 16px */
}

.method-step {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.75em;     /* 8px 12px */
}

.method-step strong {
  font-weight: 500;
}

/* =========================================================
   작업 사례 / Portfolio
   ========================================================= */

/* Heading on the left, prev/next on the right, both sitting on the same
   baseline as the cards below. */
.portfolio-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5em;            /* 24px */
  margin-bottom: 3em;    /* 48px — takes over the section-head's own margin */
}

.portfolio-head .section-head {
  margin-bottom: 0;
}

.slider-nav {
  display: flex;
  gap: 0.5em;            /* 8px */
  flex-shrink: 0;
}

.slider-nav[hidden] {
  display: none;         /* author display:flex would otherwise beat [hidden] */
}

/* Same hairline as the cards so the controls read as part of the set,
   not as a second call to action next to the red buttons. */
.slider-btn {
  font-size: 1em;        /* buttons don't inherit font-size; keep the scale */
  width: 2.75em;         /* 44px */
  height: 2.75em;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: var(--hairline) solid #222;
  background: transparent;
  color: var(--color-text);
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.slider-btn svg {
  width: 1em;            /* 16px */
  height: 1em;
}

.slider-btn:hover:not(:disabled) {
  background: var(--color-text);
  color: var(--color-bg);
}

.slider-btn:focus-visible {
  outline: 0.125em solid var(--color-text);
  outline-offset: 0.125em;
}

.slider-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.portfolio-track {
  display: flex;
  gap: 0.625em;          /* 10px */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.portfolio-track::-webkit-scrollbar {
  display: none;
}

.portfolio-card {
  flex: 0 0 calc(33.333% - 0.4375em);
  scroll-snap-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: var(--hairline) solid #222;
  overflow: hidden;
}

.portfolio-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.portfolio-card-body {
  padding: 1em 1.5em 2em; /* 16px 24px 32px */
}

.portfolio-card-body h3 {
  margin-bottom: 0.5em;   /* 12px, in h3's own em basis */
}

.portfolio-card-body p {
  margin-bottom: 0.75em;  /* 12px */
}

.portfolio-card-body a {
  font-weight: 500;
  font-size: 1em;
  display: inline-block;
}

/* =========================================================
   단단 3중 보장 / Guarantee
   ========================================================= */

/* Pitch on the left, centred against the stack of promises on the right. */
.guarantee-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4em;              /* 64px, same as the other two-column rows */
  align-items: center;
}

.guarantee-layout .section-head {
  margin-bottom: 0;
}

.guarantee-list {
  display: flex;
  flex-direction: column;
  gap: 1.125em;          /* 18px */
}

.guarantee-card {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: 2.25em 2.75em; /* 36px 44px */
}

.guarantee-icon {
  width: 2em;            /* 32px */
  height: 2em;
  color: var(--color-text);
  margin-bottom: 1.25em; /* 20px */
}

.guarantee-card h3 {
  margin-bottom: 0.5em;  /* 12px, in h3's own em basis */
}

/* =========================================================
   가격 안내 / Pricing
   ========================================================= */

.pricing-group {
  margin-bottom: 4em;    /* 64px */
}

.pricing-group:last-child {
  margin-bottom: 0;
}

.pricing-group-title {
  margin-bottom: 0.75em; /* 18px, in h3's own em basis */
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.125em;          /* 18px, same rhythm as the guarantee cards */
}

/* Quiet cards in the reading order of a price list: what it is, what it
   costs, who it's for, then what's inside. Only the price carries weight. */
.price-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: 2em 2.25em 2.25em; /* 32px 36px 36px */
}

/* Descriptions run one or two lines; letting them absorb the slack keeps
   every "포함 사항" divider in a row on the same line. */
.plan-desc {
  flex-grow: 1;
}

/* Where subgrid exists, line the five parts of each card up across the
   row instead — that also holds when one list runs longer than the rest. */
@supports (grid-template-rows: subgrid) {
  .price-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
}

.plan-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.421em;          /* 8px, in h4's own em basis */
  margin-bottom: 0.421em;
}

.plan-badge {
  font-size: 0.684em;    /* 13px */
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
  background: rgba(225, 79, 80, 0.1);
  padding: 0.385em 0.692em; /* 5px 9px */
  border-radius: 999px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.375em;          /* 6px */
  margin-bottom: 0.5em;  /* 8px */
  color: var(--color-text-muted);
}

.plan-price strong {
  font-size: 1.75em;     /* 28px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.plan-price span {
  font-size: 0.875em;    /* 14px */
}

.plan-includes {
  font-size: 0.875em;    /* 14px */
  font-weight: 700;
  color: var(--color-text);
  margin-top: 1.857em;   /* 26px, in this element's own em basis */
  padding-top: 1.571em;  /* 22px */
  border-top: var(--hairline) solid var(--color-border);
  margin-bottom: 0.857em; /* 12px */
}

.plan-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625em;          /* 10px */
}

.plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625em;          /* 10px */
  font-weight: 500;
  line-height: 1.6em;
  color: var(--color-text-body);
}

/* The glyph is a mask filled with currentColor, so it dims along with the
   label when a line is excluded. */
.plan-list li::before {
  content: "";
  flex: 0 0 1em;
  height: 1em;
  margin-top: 0.3em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plan-note {
  display: block;
  font-size: 0.875em;    /* 14px */
  color: var(--color-text-muted);
}

.pricing-note {
  margin-top: 1.25em;    /* 20px */
  font-size: 0.9375em;   /* 15px */
  color: var(--color-text-muted);
}

.pricing-note a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: 0.2em;
}

.plan-list li.is-excluded {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.plan-list li.is-excluded::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E");
}

/* =========================================================
   상담 신청하기 / Contact
   ========================================================= */

.contact .wrap {
  max-width: 50em;       /* 800px at full scale */
}

/* The same grey card the guarantee and pricing sections use, so the form
   sits on the page like the rest of the content instead of floating. */
.contact-card {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: 3.5em 3.5em 3.5em; /* 56px */
}

.contact-card .section-head {
  margin-bottom: 2.5em;  /* 40px */
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25em 1em;       /* 20px 16px */
}

.contact-form .field-full {
  grid-column: 1 / -1;
}

.contact-form label {
  display: block;
  margin-bottom: 0.533em; /* 8px, in the label's own em basis */
  font-size: 0.9375em;   /* 15px */
  font-weight: 600;
  color: var(--color-text);
}

.contact-form .optional {
  font-weight: 500;
  color: var(--color-text-muted);
}

/* White fields on the grey card: the edge comes from the contrast, so the
   border can stay a faint hairline until the field is in use. */
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 1em;        /* inputs don't inherit font-size; keep the scale */
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-white);
  border: var(--hairline) solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  padding: 0.75em 0.875em; /* 12px 14px */
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form ::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.contact-form textarea {
  resize: vertical;
  min-height: 8.5em;     /* ~136px, room for a few lines */
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-text);
  box-shadow: 0 0 0 0.1875em rgba(0, 0, 0, 0.06);
}

.contact-form button {
  grid-column: 1 / -1;
  margin-top: 0.5em;     /* 8px, on top of the row gap */
  width: 100%;
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  border-top: 1px solid var(--color-border);
}

.site-footer .wrap {
  padding-top: 4em;      /* 64px */
  padding-bottom: 2em;   /* 32px */
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 2em;              /* 32px */
  flex-wrap: wrap;
  margin-bottom: 2em;
}

.footer-top h2 {
  font-size: 1.5em;      /* 24px */
}

.footer-contact {
  font-size: 0.9375em;   /* 15px */
  color: var(--color-text-muted);
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75em;           /* 12px */
  border-top: var(--hairline) solid var(--color-border);
  padding-top: 1.5em;    /* 24px */
  font-size: 0.8125em;   /* 13px */
  color: var(--color-text-muted);
}

/* =========================================================
   Mobile — single breakpoint at 1024px.

   The master scale gets its own formula here (14px → 16px across
   375 → 1024), and the headings get their own smaller multiples.
   Everything else keeps its em definitions from above and follows
   along automatically.
   ========================================================= */

@media (max-width: 1024px) {
  .wrap {
    font-size: clamp(0.875rem, 0.803rem + 0.308vw, 1rem);
    padding-top: 4em;    /* 64px */
    padding-bottom: 4em;
  }

  /* Once the layout drops to one column, cap the content column at
     592px and centre it. The leftover space becomes side margin, so
     on a tablet the margin absorbs the extra width first — the
     stacked illustration never blows up to full tablet width. Keep
     narrowing and the margin runs out; only then does the column
     itself shrink, with --side-padding holding the gutter.
     Overrides the narrower 50em sections too, so every section
     shares the same column down here. */
  .wrap,
  .testimonial .wrap,
  .contact .wrap {
    max-width: 37em;     /* 592px at full mobile scale */
  }

  .site-header .wrap {
    padding-top: 0;
    padding-bottom: 0;
  }

  .about .wrap {
    padding-top: 4em;
    padding-bottom: 4em;
  }

  h1 {
    font-size: 2em;      /* 32px at full mobile scale */
    white-space: normal; /* real word-wrap on mobile, unlike desktop nowrap */
  }
  h2 {
    font-size: 1.75em;   /* 28px */
    white-space: normal;
  }
  h3 {
    font-size: 1.375em;  /* 22px */
  }
  h4 {
    font-size: 1.125em;  /* 18px */
  }

  .container {
    flex-direction: column;
    align-items: stretch;
    gap: 2.5em;          /* 40px */
  }
  .image-box {
    order: -1;
  }

  .main-nav {
    position: absolute;
    top: 4.75em;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: var(--hairline) solid var(--color-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .main-nav.open {
    max-height: 16.25em;
  }
  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5em 1.25em 1.5em;
  }
  .main-nav li {
    width: 100%;
    padding: 0.75em 0;
    border-bottom: var(--hairline) solid var(--color-border);
  }
  .header-actions .btn.header-cta {
    display: none;
  }
  .nav-toggle {
    display: block;
  }

  .letter {
    padding: 2.5em 1.75em;  /* 40px 28px */
    transform: none;        /* the tilt only reads well at desktop width */
  }

  .portfolio-card {
    flex: 0 0 100%;
  }

  .guarantee-layout {
    grid-template-columns: 1fr;
    gap: 2.5em;            /* matches the stacked .container rows */
  }

  .guarantee-card {
    padding: 1.75em 1.75em; /* 28px */
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .price-card {
    padding: 1.75em;       /* 28px, matching the guarantee cards */
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-card {
    padding: 2.25em 1.75em; /* 36px 28px */
  }
}