/* RIFenceQuotes.com | "Coastal Rhode Island" theme
   Organized in cascade layers: settings > base > layout > components > utilities.
   Naming: l- layout, c- component (BEM-style __element / --modifier), u- utility. */

@layer settings, base, layout, components, utilities;

@layer settings {
  :root {
    --ri-navy: #0c2d48;
    --ri-deep: #154a72;
    --ri-ocean: #1b679a;
    --ri-seafoam: #8fd3c1;
    --ri-seafoam-pale: #eaf6f2;
    --ri-sand: #e9dbbf;
    --ri-sand-pale: #faf6ee;
    --ri-ink: #152839;
    --ri-ink-soft: #475b6e;
    --ri-line: #d6e1e9;
    --ri-white: #ffffff;
    --ri-radius: 14px;
    --ri-radius-sm: 8px;
    --ri-shadow: 0 12px 32px -20px rgba(12, 45, 72, 0.5);
    --ri-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, sans-serif;
    --ri-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34c100-22 200-22 300 0s200 22 300 0 200-22 300 0 200 22 300 0v26H0z' fill='%23ffffff'/%3E%3C/svg%3E");
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--ri-white);
    color: var(--ri-ink);
    font-family: var(--ri-font);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.7;
    overflow-wrap: break-word;
  }
  h1, h2, h3, h4 { color: var(--ri-navy); letter-spacing: -0.012em; line-height: 1.18; margin: 0 0 0.65rem; }
  h1 { font-size: clamp(2.05rem, 1.35rem + 3vw, 3.35rem); font-weight: 300; }
  h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem); font-weight: 400; }
  h3 { font-size: 1.18rem; font-weight: 600; }
  p { margin: 0 0 1rem; }
  ul, ol { margin: 0 0 1rem; padding-left: 1.3rem; }
  li + li { margin-top: 0.35rem; }
  a { color: var(--ri-ocean); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { color: var(--ri-navy); text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--ri-seafoam); outline-offset: 3px; }
  svg, iframe { max-width: 100%; }
  strong { font-weight: 600; }
}

@layer layout {
  .l-wrap { margin-inline: auto; max-width: 74rem; padding-inline: 1.25rem; width: 100%; }
  .l-section { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
  .l-section--sand { background: var(--ri-sand-pale); border-block: 1px solid #efe5d3; }
  .l-section--foam { background: var(--ri-seafoam-pale); }
  .l-grid { display: grid; gap: 1.25rem; }
  .l-stack > * + * { margin-top: 1.25rem; }
  .l-readable { max-width: 44rem; }
  @media (min-width: 46rem) {
    .l-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .l-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 62rem) {
    .l-aside-layout { align-items: start; display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr) 19rem; }
  }
}

@layer components {
  /* skip link */
  .u-skip { background: var(--ri-navy); border-radius: var(--ri-radius-sm); color: var(--ri-white); left: 1rem; padding: 0.6rem 1rem; position: absolute; top: -4rem; z-index: 50; }
  .u-skip:focus { color: var(--ri-white); top: 1rem; }

  /* masthead */
  .c-masthead { background: var(--ri-white); border-bottom: 1px solid var(--ri-line); }
  .c-masthead__inner { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; padding-block: 0.9rem; }
  .c-logo { align-items: center; color: var(--ri-navy); display: inline-flex; gap: 0.6rem; text-decoration: none; }
  .c-logo:hover { color: var(--ri-navy); }
  .c-logo img { height: 38px; width: 38px; }
  .c-logo__word { display: block; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.1; }
  .c-logo__word em { color: var(--ri-ocean); font-style: normal; }
  .c-logo__tag { color: var(--ri-ink-soft); display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
  .c-nav { align-items: center; display: flex; flex-wrap: wrap; font-size: 0.95rem; gap: 0.2rem 1.15rem; }
  .c-nav a { color: var(--ri-ink); padding-block: 0.4rem; text-decoration: none; }
  .c-nav a:hover { color: var(--ri-ocean); text-decoration: underline; }
  .c-nav a[aria-current="page"] { color: var(--ri-ocean); font-weight: 600; }
  .c-nav .c-nav__cta { background: var(--ri-navy); border-radius: 999px; color: var(--ri-white); font-weight: 500; padding: 0.45rem 1rem; }
  .c-nav .c-nav__cta:hover { background: var(--ri-deep); color: var(--ri-white); text-decoration: none; }

  /* hero */
  .c-hero { background: linear-gradient(160deg, var(--ri-navy) 0%, var(--ri-deep) 62%, #1f6b87 100%); color: #e7f0f7; padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); position: relative; }
  .c-hero::after { background: var(--ri-wave) center bottom / 100% 100% no-repeat; content: ""; display: block; height: clamp(28px, 4vw, 56px); margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
  .c-hero__grid { align-items: center; display: grid; gap: 2rem; }
  @media (min-width: 60rem) { .c-hero__grid { gap: 3.5rem; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
  .c-hero h1 { color: var(--ri-white); }
  .c-hero__eyebrow { border: 1px solid rgba(143, 211, 193, 0.55); border-radius: 1rem; color: var(--ri-seafoam); display: inline-block; font-size: 0.8rem; letter-spacing: 0.08em; margin-bottom: 1rem; padding: 0.25rem 0.8rem; text-transform: uppercase; }
  .c-hero__lede { color: #d9e6f0; font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); font-weight: 300; max-width: 38rem; }
  .c-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
  .c-glance { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--ri-radius); padding: 1.4rem 1.5rem; }
  .c-glance h2 { color: var(--ri-sand); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
  .c-glance ul { list-style: none; margin: 0; padding: 0; }
  .c-glance li { color: #e7f0f7; padding-left: 1.6rem; position: relative; }
  .c-glance li::before { background: var(--ri-seafoam); content: ""; height: 2px; left: 0; position: absolute; top: 0.72em; width: 0.9rem; }

  /* buttons */
  .c-btn { align-items: center; border: 2px solid transparent; border-radius: 999px; cursor: pointer; display: inline-flex; font: inherit; font-size: 1rem; font-weight: 600; justify-content: center; line-height: 1.2; min-height: 3rem; padding: 0.7rem 1.5rem; text-decoration: none; }
  .c-btn--solid { background: var(--ri-seafoam); color: var(--ri-navy); }
  .c-btn--solid:hover { background: #a9e0d1; color: var(--ri-navy); }
  .c-btn--navy { background: var(--ri-navy); color: var(--ri-white); }
  .c-btn--navy:hover { background: var(--ri-deep); color: var(--ri-white); }
  .c-btn--outline { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: var(--ri-white); }
  .c-btn--outline:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--ri-white); color: var(--ri-white); }
  .c-btn:disabled { background: #cfd9e1; color: #3e5163; cursor: default; }

  /* small caps label above section headings */
  .c-eyebrow { color: var(--ri-ocean); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; margin: 0 0 0.5rem; text-transform: uppercase; }
  .c-intro { color: var(--ri-ink-soft); font-size: 1.1rem; max-width: 46rem; }

  /* coastal materials */
  .c-material { background: var(--ri-white); border: 1px solid var(--ri-line); border-radius: var(--ri-radius); box-shadow: var(--ri-shadow); padding: 1.4rem 1.4rem 0.6rem; }
  .c-material__head { align-items: baseline; border-bottom: 3px solid var(--ri-seafoam); display: flex; gap: 0.5rem; justify-content: space-between; margin-bottom: 0.8rem; padding-bottom: 0.5rem; }
  .c-material__head h3 { font-size: 1.3rem; font-weight: 500; margin: 0; }
  .c-material__head a { font-size: 0.88rem; }
  .c-material dl { margin: 0; }
  .c-material dt { color: var(--ri-deep); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
  .c-material dd { font-size: 0.98rem; margin: 0.15rem 0 0.95rem; }

  .c-coast-extras { margin-top: 1.25rem; }
  .c-callout { background: var(--ri-navy); border-radius: var(--ri-radius); color: #dfe9f1; padding: 1.5rem 1.6rem; }
  .c-callout h3 { color: var(--ri-white); font-size: 1.3rem; font-weight: 500; }
  .c-callout a { color: var(--ri-seafoam); }
  .c-callout--sand { background: var(--ri-sand); color: var(--ri-ink); }
  .c-callout--sand h3 { color: var(--ri-navy); }
  .c-callout--sand a { color: #0f4f7a; }

  /* regions */
  .c-region { background: var(--ri-white); border: 1px solid var(--ri-line); border-radius: var(--ri-radius); padding: 1.6rem 1.6rem 1.1rem; }
  .c-region--metro { border-top: 6px solid var(--ri-navy); }
  .c-region--coast { background: linear-gradient(180deg, var(--ri-seafoam-pale), var(--ri-white) 55%); border-top: 6px solid var(--ri-seafoam); }
  .c-region__places { color: var(--ri-ink-soft); font-size: 0.9rem; margin: -0.2rem 0 0.9rem; }
  .c-region__lead { font-size: 1.08rem; }
  .c-region ul { padding-left: 1.1rem; }
  .c-region li::marker { color: var(--ri-ocean); }
  .c-region__foot { border-top: 1px dashed var(--ri-line); font-size: 0.95rem; padding-top: 0.8rem; }

  /* process */
  .c-steps { counter-reset: ri-step; display: grid; gap: 1rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
  @media (min-width: 52rem) { .c-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .c-steps li { background: var(--ri-white); border: 1px solid var(--ri-line); border-radius: var(--ri-radius); counter-increment: ri-step; margin: 0; padding: 1.2rem 1.3rem; }
  .c-steps li::before { color: var(--ri-ocean); content: counter(ri-step, decimal-leading-zero); display: block; font-size: 1.9rem; font-weight: 200; line-height: 1; margin-bottom: 0.6rem; }
  .c-steps h3 { margin-bottom: 0.3rem; }
  .c-steps p { font-size: 0.98rem; margin: 0; }

  /* quote / consent block */
  .c-quote { background: var(--ri-white); border: 1px solid var(--ri-line); border-radius: var(--ri-radius); box-shadow: var(--ri-shadow); padding: clamp(1.3rem, 1rem + 2vw, 2.4rem); scroll-margin-top: 1rem; }
  .c-quote__cols { display: grid; gap: 1.5rem 2.5rem; }
  @media (min-width: 56rem) { .c-quote__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
  .c-quote__asks { list-style: none; margin: 0 0 1rem; padding: 0; }
  .c-quote__asks li { border-bottom: 1px solid #edf2f6; margin: 0; padding: 0.45rem 0 0.45rem 1.9rem; position: relative; }
  .c-quote__asks li::before { border: 2px solid var(--ri-ocean); border-radius: 50%; content: ""; height: 0.8rem; left: 0.2rem; position: absolute; top: 0.95rem; width: 0.8rem; }
  .c-quote__gate { background: var(--ri-sand-pale); border: 1px solid #eadfc9; border-radius: var(--ri-radius-sm); padding: 1.2rem; }
  .c-check { align-items: start; cursor: pointer; display: grid; font-size: 0.95rem; gap: 0.7rem; grid-template-columns: 1.4rem minmax(0, 1fr); }
  .c-check input { accent-color: var(--ri-navy); height: 1.3rem; margin: 0.2rem 0 0; width: 1.3rem; }
  .c-quote__submit { margin-top: 1.1rem; width: 100%; }
  .c-quote__status { color: var(--ri-ink-soft); font-size: 0.93rem; margin: 0.9rem 0 0; }
  .c-quote__plain { font-size: 0.93rem; margin: 0.9rem 0 0; }
  .has-js .c-quote__plain { display: none; }
  .c-quote__small { color: var(--ri-ink-soft); font-size: 0.9rem; }
  .c-quote__stage { margin-top: 1.5rem; }
  .c-quote__stage iframe { background: var(--ri-white); border: 1px solid var(--ri-line); border-radius: var(--ri-radius-sm); display: block; width: 100%; }

  /* link cards */
  .c-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin-top: 1.5rem; }
  .c-card { background: var(--ri-white); border: 1px solid var(--ri-line); border-radius: var(--ri-radius); color: var(--ri-ink); display: block; padding: 1.15rem 1.25rem; text-decoration: none; }
  a.c-card:hover { border-color: var(--ri-ocean); box-shadow: var(--ri-shadow); color: var(--ri-ink); }
  .c-card__title { color: var(--ri-navy); display: block; font-size: 1.08rem; font-weight: 600; margin-bottom: 0.25rem; }
  a.c-card .c-card__title::after { color: var(--ri-ocean); content: " \2192"; }
  .c-card__text { color: var(--ri-ink-soft); display: block; font-size: 0.95rem; }

  /* towns by region */
  .c-towns { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin-top: 1.5rem; }
  .c-towns h3 { color: var(--ri-deep); font-size: 0.85rem; letter-spacing: 0.1em; margin-bottom: 0.3rem; text-transform: uppercase; }
  .c-towns p { font-size: 0.97rem; margin: 0; }

  /* reasons */
  .c-points { display: grid; gap: 1rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
  @media (min-width: 46rem) { .c-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .c-points li { background: var(--ri-white); border-left: 4px solid var(--ri-seafoam); border-radius: 0 var(--ri-radius-sm) var(--ri-radius-sm) 0; margin: 0; padding: 1rem 1.2rem; }
  .c-points h4 { color: var(--ri-navy); font-size: 1.05rem; margin: 0 0 0.2rem; }
  .c-subhead { margin-top: 2.2rem; }
  .c-points p { font-size: 0.97rem; margin: 0; }

  /* questions */
  .c-faq { border-top: 1px solid var(--ri-line); }
  .c-faq details { border-bottom: 1px solid var(--ri-line); }
  .c-faq summary { color: var(--ri-navy); cursor: pointer; font-weight: 600; list-style: none; padding: 1rem 2.2rem 1rem 0; position: relative; }
  .c-faq summary::-webkit-details-marker { display: none; }
  .c-faq summary::after { color: var(--ri-ocean); content: "+"; font-size: 1.5rem; font-weight: 300; position: absolute; right: 0.3rem; top: 0.7rem; }
  .c-faq details[open] summary::after { content: "\2013"; }
  .c-faq details > div { max-width: 46rem; padding: 0 0 1rem; }

  /* inner page header */
  .c-pagehero { background: var(--ri-seafoam-pale); padding-top: 1.5rem; }
  .c-pagehero::after { background: var(--ri-wave) center bottom / 100% 100% no-repeat; content: ""; display: block; height: 32px; margin-top: 2rem; }
  .c-pagehero__lede { color: var(--ri-ink-soft); font-size: 1.12rem; max-width: 44rem; }
  .c-trail ol { color: var(--ri-ink-soft); display: flex; flex-wrap: wrap; font-size: 0.88rem; gap: 0.3rem; list-style: none; margin: 0 0 1.2rem; padding: 0; }
  .c-trail li { margin: 0; }
  .c-trail li + li::before { color: #8aa0b3; content: "/"; margin-right: 0.35rem; }

  /* article body */
  .c-article h2 { margin-top: 2.2rem; }
  .c-article h2:first-child { margin-top: 0; }
  .c-article h3 { margin-top: 1.5rem; }
  .c-article li { max-width: 44rem; }
  .c-article p { max-width: 44rem; }
  .c-sidecard { background: var(--ri-navy); border-radius: var(--ri-radius); color: #dfe9f1; margin-top: 2rem; padding: 1.3rem; position: sticky; top: 1rem; }
  @media (min-width: 62rem) { .c-sidecard { margin-top: 0; } }
  .c-sidecard h2 { color: var(--ri-white); font-size: 1.15rem; font-weight: 500; }
  .c-sidecard ul { font-size: 0.95rem; padding-left: 1.1rem; }
  .c-sidecard a:not(.c-btn) { color: var(--ri-seafoam); }
  .c-after-faq { margin-top: 1.4rem; }
  .c-note { background: var(--ri-sand-pale); border-left: 4px solid var(--ri-sand); border-radius: 0 var(--ri-radius-sm) var(--ri-radius-sm) 0; font-size: 0.97rem; padding: 0.9rem 1.1rem; }

  /* footer */
  .c-footer { background: var(--ri-navy); color: #c9d7e3; font-size: 0.95rem; padding-block: 3rem 2rem; }
  .c-footer a { color: var(--ri-white); }
  .c-footer a:hover { color: var(--ri-seafoam); }
  .c-footer__cols { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .c-footer h2 { color: var(--ri-sand); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  .c-footer__links { list-style: none; margin: 0; padding: 0; }
  .c-footer__about { grid-column: 1 / -1; max-width: 36rem; }
  @media (min-width: 60rem) { .c-footer__about { grid-column: auto / span 2; } }
  .c-footer__notice { border-top: 1px solid rgba(255, 255, 255, 0.15); color: #b5c6d4; font-size: 0.86rem; margin-top: 2.2rem; padding-top: 1.5rem; }
  .c-footer__notice p { max-width: 62rem; }
}

@layer utilities {
  .u-center { text-align: center; }
  .u-mt-0 { margin-top: 0; }
  .u-visually-hidden { clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
}