/* ==========================================================================
   Decorquip homepage — section styles
   Extracted from the Claude Design mockup "Decorquip Homepage.dc.html".
   All classes are prefixed .dq- so they will not collide with existing site CSS.
   Typeface: Montserrat, weights 400 and 500 ONLY (brand rule — no 600/700).
   ========================================================================== */

/* --- Brand tokens ------------------------------------------------------- */
:root{
  --dq-navy:        #334350;  /* headings, buttons, primary ink */
  --dq-terracotta:  #9a5a49;  /* accent subheads, links */
  --dq-sand:        #ccb19f;  /* accent subheads on navy / tan */
  --dq-cream:       #efe8e6;  /* section background */
  --dq-cream-dark:  #e2d7d3;  /* image placeholder background */
  --dq-cream-line:  #e5d8d1;  /* rules on cream */
  --dq-body:        #475662;  /* body copy */
  --dq-line:        #ebedee;  /* card borders on white */
  --dq-muted:       #99a1a8;  /* kickers */
  --dq-white:       #ffffff;
  --dq-radius:      4px;
  --dq-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- Guards against the site's global CSS ------------------------------
   style.css styles bare elements (p, blockquote, footer, h*) for the theme's
   own pages. These rules stop that leaking into these sections. Keep them. */
.dq-section *{font-family:inherit;}          /* style.css sets p{font-family:...} */
.dq-quote{                                   /* style.css restyles bare blockquote */
  background:var(--dq-white);font-weight:400;font-size:16px;line-height:1.65;
  color:var(--dq-body);position:static;
}
.dq-quote::before,.dq-quote::after{content:none;display:none;}
.dq-quote cite::before{content:none;}
.dq-quote__source{background:none;color:var(--dq-navy);padding:0;}

/* --- Section shells ----------------------------------------------------- */
/* Horizontal width is handled by the site's Bootstrap .container inside each
   section (1200px, 1320px from 1400px up, 15px gutters), so .dq-section only
   owns the vertical rhythm and the full-bleed background colour. */
.dq-section{
  font-family:var(--dq-font);
  padding:96px 0;
  box-sizing:border-box;
}
.dq-section *{box-sizing:border-box;}
.dq-section--white{background:var(--dq-white);}
.dq-section--cream{background:var(--dq-cream);}
.dq-section--navy {background:var(--dq-navy);}
.dq-section--tight{padding:64px 0 96px;}          /* "What we supply" */
/* Two classes deliberately: the responsive block below restates .dq-section
   (one class) at each breakpoint, and a media query adds no specificity, so a
   single-class .dq-section--flush would lose to it and reintroduce a padding
   band above the hero image and the stacked split photos. */
.dq-section.dq-section--flush{padding:0;}         /* hero + split sections */

/* Two-up block: image one side, content the other.
   Three modes:
     .dq-split                      - plain 50/50, both halves full-bleed
     .dq-split--bleed   (default)   - photo fills its whole half of the screen,
                                      while the text column's outer edge lines
                                      up with the site container. Best of both.
     .dq-split--contained           - both halves pulled inside the container.
   Add .dq-split--reverse for text-left / image-right.

   How --bleed works: the grid stays full width, so each cell is exactly half
   the page. The text cell's outer padding is then set to the distance between
   the page edge and the container's content edge, i.e.
   (half the page) - (half the container) + the 15px Bootstrap gutter.
   The percentage resolves against the grid cell (half the page), so unlike a
   vw-based calc it is not thrown off by the scrollbar width.
   --dq-cw must track Bootstrap's .container max-width at each breakpoint. */
.dq-split{display:grid;grid-template-columns:1fr 1fr;}
.dq-split>*{min-width:0;}
.dq-split--contained{max-width:1320px;margin:0 auto;}

.dq-split--bleed{--dq-cw:1320px;}
@media (max-width:1399px){.dq-split--bleed{--dq-cw:1200px;}}
@media (max-width:1199px){.dq-split--bleed{--dq-cw:960px;}}
@media (max-width:991px) {.dq-split--bleed{--dq-cw:720px;}}
@media (max-width:767px) {.dq-split--bleed{--dq-cw:540px;}}
.dq-split--bleed .dq-split__body{
  padding-right:calc(100% - (var(--dq-cw) / 2) + 15px);
  padding-left:64px;
}
.dq-split--bleed.dq-split--reverse .dq-split__body{
  padding-left:calc(100% - (var(--dq-cw) / 2) + 15px);
  padding-right:64px;
}
.dq-split__media{position:relative;min-height:480px;background:var(--dq-cream-dark);}
.dq-split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.dq-split__body{padding:96px 64px;display:flex;flex-direction:column;justify-content:center;}
.dq-split--contained .dq-split__body{padding-right:0;}
.dq-split--contained.dq-split--reverse .dq-split__body{padding-right:64px;padding-left:0;}


/* --- Eyebrow (rule + uppercase label) ---------------------------------- */
.dq-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:24px;}
.dq-eyebrow--center{justify-content:center;}
.dq-eyebrow__rule{display:block;width:24px;height:1px;background:var(--dq-navy);}
.dq-eyebrow__label{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--dq-navy);
}
.dq-eyebrow--light .dq-eyebrow__rule{background:var(--dq-sand);}
.dq-eyebrow--light .dq-eyebrow__label{color:var(--dq-sand);}

/* --- Headings ----------------------------------------------------------- */
.dq-h1{
  margin:0;font-size:48px;line-height:1.08;letter-spacing:-.01em;
  font-weight:500;color:var(--dq-navy);
}
.dq-h1__sub{font-size:44px;font-weight:400;color:var(--dq-terracotta);}
.dq-h2{
  margin:0 0 40px;font-size:32px;line-height:1.08;letter-spacing:-.01em;
  font-weight:500;color:var(--dq-navy);
}
.dq-h2--center{text-align:center;}
.dq-h2--flush{margin-bottom:0;}
.dq-h2--light{color:var(--dq-cream);}
.dq-h2__sub{font-size:28px;font-weight:400;color:var(--dq-sand);}
.dq-h2__sub--terracotta{color:var(--dq-terracotta);}

/* --- Body copy ---------------------------------------------------------- */
.dq-text{margin:0;font-size:16px;line-height:1.65;font-weight:400;color:var(--dq-body);}
.dq-text--measure{max-width:52ch;}
.dq-text--light{color:var(--dq-cream);}

/* --- Buttons and small links ------------------------------------------- */
.dq-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:14px;font-weight:500;line-height:1.2;
  padding:16px 24px;border-radius:var(--dq-radius);
  border:1px solid var(--dq-navy);background:var(--dq-white);
  color:var(--dq-navy);text-decoration:none;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.dq-btn:hover,.dq-btn:focus{background:var(--dq-navy);color:var(--dq-cream);text-decoration:none;}
.dq-btn--lg{font-size:16px;padding:16px 32px;}
.dq-btn--on-cream{background:var(--dq-cream);}
.dq-link-sm{
  display:inline-block;margin-top:16px;font-size:14px;color:var(--dq-navy);
}

/* --- Grids -------------------------------------------------------------- */
/* minmax(0,1fr) rather than 1fr: a plain 1fr track cannot shrink below its
   content's min-content width, so a nowrap button inside a card pushes the
   whole grid wider than the container at mid widths. */
.dq-grid{display:grid;gap:24px;}
.dq-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.dq-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.dq-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* --- Generic image card (What we supply / Who we supply) --------------- */
.dq-card{
  display:block;background:var(--dq-white);border:1px solid var(--dq-line);
  border-radius:var(--dq-radius);overflow:hidden;
  color:var(--dq-navy);text-decoration:none;
}
.dq-card:hover{text-decoration:none;}
.dq-card__img{display:block;width:100%;height:200px;object-fit:cover;}
.dq-card__body{padding:24px;}
.dq-card__title{font-size:18px;line-height:1.08;font-weight:500;color:var(--dq-navy);}
.dq-card__text{margin:16px 0 0;font-size:16px;line-height:1.65;color:var(--dq-body);}

/* --- Hero --------------------------------------------------------------- */
.dq-hero__media{height:520px;background:var(--dq-cream-dark);}
.dq-hero__media img{display:block;width:100%;height:100%;object-fit:cover;}
.dq-hero__body{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;
  padding:64px 0;
}
.dq-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;}

/* --- Our promise (numbered list on navy) ------------------------------- */
.dq-promise{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start;}
.dq-promise__item{
  display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:start;
  padding:24px 0;border-top:1px solid rgba(204,177,159,.2);
}
.dq-promise__item:last-child{border-bottom:1px solid rgba(204,177,159,.2);}
.dq-promise__num{font-size:32px;line-height:1.08;font-weight:400;color:var(--dq-sand);}
.dq-promise__label{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--dq-sand);margin-bottom:8px;
}

/* --- Our brands --------------------------------------------------------- */
.dq-brand{border:1px solid var(--dq-line);border-radius:var(--dq-radius);overflow:hidden;}
.dq-brand__img{display:block;width:100%;height:320px;object-fit:cover;}
.dq-brand__body{padding:40px;}
.dq-brand__logo{display:block;height:32px;width:auto;}
.dq-brand__text{margin:24px 0 0;font-size:16px;line-height:1.65;color:var(--dq-body);}
.dq-brand__action{margin-top:24px;}

/* --- Rule-separated rows (Resources / How we support you) -------------- */
.dq-rows{margin-top:40px;display:flex;flex-direction:column;}
.dq-rows--flush{margin-top:0;}
.dq-row{padding:24px 0;border-top:1px solid var(--dq-cream-line);}
.dq-row:last-child{border-bottom:1px solid var(--dq-cream-line);}
.dq-row--action{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;}
.dq-row__title{
  margin:0;font-size:18px;line-height:1.08;letter-spacing:-.01em;
  font-weight:500;color:var(--dq-navy);
}
.dq-row__text{margin:8px 0 0;font-size:16px;line-height:1.65;color:var(--dq-body);}
.dq-row__text--spaced{margin-top:16px;}

/* --- Testimonials ------------------------------------------------------- */
.dq-block-40{margin-bottom:40px;}
.dq-quote{
  margin:0;border:1px solid var(--dq-line);border-radius:var(--dq-radius);padding:40px;
}
/* (see the guards block above for the resets that fight style.css) */
.dq-quote__text{margin:0;font-size:16px;line-height:1.65;color:var(--dq-body);}
.dq-quote__source{margin-top:24px;font-size:14px;color:var(--dq-navy);}

/* --- Getting started ---------------------------------------------------- */
.dq-start{
  background:var(--dq-white);border:1px solid var(--dq-cream-line);
  border-radius:var(--dq-radius);padding:40px;display:flex;flex-direction:column;
}
.dq-start__title{font-size:18px;line-height:1.08;font-weight:500;color:var(--dq-navy);}
.dq-start__text{margin:16px 0 24px;font-size:16px;line-height:1.65;color:var(--dq-body);}
.dq-start__action{margin-top:auto;}

/* --- What's new --------------------------------------------------------- */
.dq-news{
  display:block;border:1px solid var(--dq-line);border-radius:var(--dq-radius);
  overflow:hidden;color:var(--dq-navy);text-decoration:none;
}
.dq-news__img{display:block;width:100%;height:180px;object-fit:cover;}
.dq-news__body{padding:24px;}
.dq-news__kicker{
  display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--dq-muted);
}
.dq-news__title{margin-top:16px;font-size:18px;line-height:1.08;font-weight:500;}

/* ==========================================================================
   Responsive — NOT in the original mockup (which is desktop-only at 1440px).
   Added so the sections hold up on tablet and phone. Delete this block if
   your site handles breakpoints elsewhere.
   ========================================================================== */
@media (max-width:1100px){
  .dq-section{padding:72px 0;}
  .dq-section--tight{padding:48px 0 72px;}
  .dq-split__body{padding:72px 32px;}
  .dq-grid--3,
  .dq-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dq-btn{white-space:normal;}          /* let long labels wrap in narrow cards */
  .dq-promise{grid-template-columns:1fr;gap:40px;}
  .dq-h1{font-size:38px;}
  .dq-h1__sub{font-size:34px;}
  .dq-hero__body{padding:48px 0;gap:40px;}
}
@media (max-width:760px){
  /* Stacked: the columns are full width, so the side padding that aligns a
     split to the container must be handed back. These selectors have to name
     the modifier classes because the unstacked rules above (e.g.
     .dq-split--contained .dq-split__body{padding-right:0}) are more specific
     than a bare .dq-split__body rule and would otherwise still win here. */
  .dq-split--bleed .dq-split__body,
  .dq-split--bleed.dq-split--reverse .dq-split__body,
  .dq-split--contained .dq-split__body,
  .dq-split--contained.dq-split--reverse .dq-split__body{padding-left:15px;padding-right:15px;}
  .dq-section{padding:56px 0;}
  .dq-section--tight{padding:40px 0 56px;}
  .dq-split,.dq-split--reverse{grid-template-columns:1fr;}
  .dq-split__media{min-height:280px;}
  /* Stacked, the body is full width, so match .container's own box (15px
     gutters, and its 540px step from 576px up) or these sections would sit
     wider than every container section above and below them. */
  .dq-split__body{padding:56px 15px;width:100%;margin-left:auto;margin-right:auto;}
  .dq-split--reverse .dq-split__media{grid-row:1;}
  .dq-grid--2,.dq-grid--3,.dq-grid--4{grid-template-columns:minmax(0,1fr);}
  .dq-hero__body{grid-template-columns:1fr;padding:40px 0;gap:24px;}
  .dq-hero__media{height:320px;}
  .dq-h1{font-size:30px;}
  .dq-h1__sub{font-size:26px;}
  .dq-h2{font-size:26px;}
  .dq-h2__sub{font-size:23px;}
  .dq-row--action{grid-template-columns:1fr;}
  .dq-btn{white-space:normal;}
  .dq-brand__body,.dq-quote,.dq-start{padding:28px;}
}

/* Bootstrap's .container is 540px wide from 576px up; keep the stacked split
   bodies on the same box so section edges line up while scrolling. */
@media (min-width:576px) and (max-width:760px){
  .dq-split__body{max-width:540px;}
}