/* ==========================================================================
   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 */
.dq-section--listing{padding:48px 0 96px;}        /* range / collection pages */
.dq-section--listing .dq-h2{margin-bottom:32px;}
/* operator-only visit counter, top right of listing pages */
.dq-admin-pill{
  display:inline-block;margin:16px 0 0;padding:6px 12px;
  font:500 12px/1.4 var(--dq-font);letter-spacing:.04em;
  color:var(--dq-navy);background:var(--dq-cream);border-radius:var(--dq-radius);
}

/* 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));}

/* --- Six-up tile grid (range / collection listings) ----------------------
   Own ladder, independent of the 2/3/4 grids below: 6 > 4 > 3 > 2, which
   mirrors the old col-xl-2 col-lg-3 col-md-4 col-6 columns. The tile
   variant of the card scales its image with the column instead of the
   fixed 200px the 4-up cards use, and drops the title a size. */
.dq-grid--6{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;}
@media (max-width:1199px){.dq-grid--6{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:991px) {.dq-grid--6{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:575px) {.dq-grid--6{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}}

.dq-grid--6 > *{position:relative;min-width:0;}          /* the range_griditem wrapper */
.dq-grid--6 .dq-card{height:100%;}                        /* equal heights in a row */
.dq-card--tile .dq-card__img{height:auto;aspect-ratio:1/1;}
.dq-card--tile .dq-card__body{padding:16px;}
.dq-card--tile .dq-card__title{font-size:16px;line-height:1.25;}
@media (max-width:575px){
  .dq-card--tile .dq-card__body{padding:12px;}
  .dq-card--tile .dq-card__title{font-size:14px;}
}

/* --- Product tile (collection listings) ---------------------------------
   Same tile as --tile, plus a meta row under the title: SKU left, unit of
   sale right, both muted. Images sit on a light ground because product
   photos are cut-outs on white/grey and would otherwise float. */
.dq-card--product .dq-card__img{height:auto;aspect-ratio:1/1;background:#f3f1f0;object-fit:cover;}
/* Flex column so the meta row sits on the card's bottom edge: titles that
   wrap to two or three lines then no longer push SKU/unit out of line with
   the neighbouring cards (the cards themselves are already equal height). */
.dq-card.dq-card--product{display:flex;flex-direction:column;}   /* two classes: must outrank .dq-card{display:block}, which comes later in the file */
.dq-card--product .dq-card__body{padding:16px;display:flex;flex-direction:column;flex:1 1 auto;}
.dq-card--product .dq-card__title{font-size:16px;line-height:1.3;}
.dq-card__meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:auto;padding-top:10px;font-size:13px;line-height:1.4;color:var(--dq-muted);
}
.dq-card__sku{letter-spacing:.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dq-card__unit{flex:0 0 auto;}
@media (max-width:575px){
  .dq-card--product .dq-card__body{padding:12px;}
  .dq-card--product .dq-card__title{font-size:14px;}
  .dq-card__meta{font-size:12px;}
}

/* corner tag over the image, e.g. "While stocks last" */
.dq-card__tag{
  position:absolute;top:8px;left:8px;z-index:1;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;
  padding:4px 7px;border-radius:var(--dq-radius);
  background:var(--dq-navy);color:var(--dq-cream);
}
/* operator-only control, sits OUTSIDE the <a> so the click does not follow the link */
.dq-card__admin{
  position:absolute;top:8px;right:8px;z-index:2;
  font:500 12px/1 var(--dq-font);padding:6px 8px;
  border:1px solid var(--dq-navy);border-radius:var(--dq-radius);
  background:var(--dq-white);color:var(--dq-navy);cursor:pointer;
}
.dq-card__admin:hover{background:var(--dq-navy);color:var(--dq-white);}

/* --- 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);}

/* --- Opt-in hover lift (matches the Venetian M2M page's product cards) ---
   Add class="dq-card dq-card--lift" to the cards that should respond.
   Rest: faint 1px shadow. Hover/focus: shadow deepens over .2s. No transform,
   no image zoom - that is all the source page does. Keyboard focus gets the
   same lift so the affordance is not mouse-only. */
.dq-card--lift{
  box-shadow:0 1px 2px rgba(51,67,80,.05);
  transition:box-shadow .2s ease;
}
.dq-card--lift:hover,
.dq-card--lift:focus-visible{
  box-shadow:0 4px 14px rgba(51,67,80,.12);
}
@media (prefers-reduced-motion:reduce){
  .dq-card--lift{transition:none;}
}

/* --- 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;}

/* --- Desktop: the hero fills the first screen --------------------------
   Add class "dq-hero" to the hero <section>. The cream body keeps its
   natural height and sits on the bottom edge of the viewport; the photo
   takes whatever is left, and because it is anchored bottom, any cropping
   comes off the TOP of the picture. --dq-header-h is set by a few lines of
   script in index.php that measure the sticky header (it changes height
   when the utility bar shows for signed-in users); with no script the
   fallback is 0 and the hero simply fills the whole viewport.
   min-height, not height: if a very short window cannot fit the body plus
   220px of photo, the section grows rather than clipping the body. */
@media (min-width:992px){
  .dq-hero{
    display:flex;flex-direction:column;
    min-height:calc(100vh - var(--dq-header-h,0px));
  }
  .dq-hero .dq-hero__media{flex:1 1 auto;height:auto;min-height:220px;position:relative;overflow:hidden;}
  .dq-hero .dq-hero__media img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center bottom;
  }
  .dq-hero > .container{flex:0 0 auto;}
}

/* --- 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) */
/* font-weight is explicit: style.css has `blockquote p{font-weight:500}`, which the
   .dq-quote reset on the blockquote itself does not reach */
.dq-quote__text{margin:0;font-size:16px;line-height:1.65;font-weight:400;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;}
}