/* ==========================================================================
   Al Saad — Layout: sections, containers, generic grid helpers
   ========================================================================== */

/* Full-bleed section wrapper. Modifiers set the background. */
.section {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 5rem);
    padding-inline: var(--gutter);
    overflow: hidden;
}

.section--dark   { background: var(--bg-dark);  color: var(--text-on-dark); }
.section--stone  { background: var(--bg-stone); color: var(--text-on-dark); }
.section--cream  { background-repeat: no-repeat;
    background-size: cover;background-color: var(--bg-cream); color: var(--text-on-light); }
.section--white  { background: var(--bg-page);  color: var(--text-on-light); }
.section--muted  { background: rgba(41,37,36,.06); color: var(--text-on-light); }
.section--ink    { color: var(--color-black); }   /* force near-black text (FBE block) */
#services{
background-image: url(../img/what-we-do.jpg);
}
/* Centered inner column matching the design's 1392px content width. */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
}

/* Generic responsive helpers ------------------------------------------------ */
.stack { display: flex; flex-direction: column; }
.row   { display: flex; flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

.gap-3  { gap: var(--space-3); }
.gap-5  { gap: var(--space-5); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-14 { gap: var(--space-14); }

/* Two-column split used by several sections (text + media). */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
}

/* Decorative rotated "ring" shapes seen on cream/dark sections. */
.deco-ring {
    position: absolute;
    width: 895px;
    height: 895px;
    border: 109px solid var(--color-stone-700);
    border-radius: 24px;
    opacity: .05;
    pointer-events: none;
    z-index: 0;
}
/* Positional variants (replace per-instance inline styles) */
.deco-ring--tl { top: -236px; left: -78px;  transform: rotate(58deg); }
.deco-ring--tr { top: 76px;   right: -200px; transform: rotate(73deg); }
.deco-ring--bl { top: 283px;  left: 481px;  transform: rotate(-73deg); }
.deco-ring--br { top: -462px; right: -300px; transform: rotate(73deg); }
.deco-ring--c  { top: -825px; left: 677px;  transform: rotate(73deg); }
.deco-ring--pvc{ top: -35px;  left: 484px;  transform: rotate(58deg); }
/* Services: two faint rotated frames — one diagonal edge on the LEFT, one on
   the RIGHT — crossing the upper background (subtle, like the design). */
.deco-ring--svc-1,
.deco-ring--svc-2 { opacity: .09; border-color: var(--color-stone-700); }
.deco-ring--svc-1 { top: -430px; left: -430px;  transform: rotate(45deg); }
.deco-ring--svc-2 { top: -430px; right: -430px; transform: rotate(45deg); }

@media (max-width: 900px) { .deco-ring { display: none; } }

/* Keep real content above decorations. */
.section > .container,
.section > * { position: relative; z-index: 1; }

.hr {
    height: 1px;
    width: 100%;
    background: currentColor;
    opacity: .12;
    border: 0;
}
.hr--fade {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg,
        rgba(68,64,60,.05), rgba(68,64,60,.4), rgba(68,64,60,.05));
}