/* Perroplas brand — site-wide.
   Loaded on EVERY page so the shared navigation bar, footer and content styling
   all draw from the same values as the Home composition.

   Tokens transcribed verbatim from the Claude Design project
   _ds/perroplas-design-system-7ed3580e-0e18-4edb-ad98-4dedca0da942/tokens/*.css
   Fonts are enqueued separately (Google Fonts), not @import-ed. */

/* ================= tokens/colors.css ================= */
:root{
  /* --- Brand core (sampled from assets/logo.png) --- */
  --perro-navy:#254485;
  --perro-green:#7EC722;

  /* --- Navy ramp --- */
  --navy-900:#0F1D3D;
  --navy-800:#16295A;
  --navy-700:#1B3266;
  --navy-600:#204080;
  --navy-500:#254485;
  --navy-400:#3B5CA3;
  --navy-300:#6E88C0;
  --navy-200:#AFBEDD;
  --navy-100:#DCE3F1;
  --navy-050:#EEF2FA;

  /* --- Green ramp --- */
  --green-900:#2F5A0A;
  --green-800:#42780F;
  --green-700:#5FA015;
  --green-600:#6FB61C;
  --green-500:#7EC722;
  --green-400:#9AD650;
  --green-300:#BCE68C;
  --green-200:#DAF3BF;
  --green-100:#EDF9DE;

  /* --- Steel blue (brochure sub-headings, #004F93) --- */
  --steel-700:#003A6D;
  --steel-600:#004F93;
  --steel-500:#1467AE;
  --steel-200:#B7D5EC;
  --steel-100:#E4EFF8;

  /* --- Industrial neutrals (concrete floor, galvanised steel) --- */
  --ink-900:#111418;
  --ink-800:#1D2126;
  --ink-700:#2C3238;
  --ink-600:#4A525B;
  --ink-500:#6B747E;
  --ink-400:#939BA4;
  --ink-300:#BFC5CC;
  --ink-200:#DDE1E5;
  --ink-150:#E9ECEF;
  --ink-100:#F2F4F6;
  --ink-050:#F8F9FA;
  --white:#FFFFFF;

  /* --- Safety / status (hi-vis factory signage) --- */
  --amber-500:#F2A900;
  --amber-100:#FDF0D0;
  --red-600:#C0271C;
  --red-100:#F8DEDB;
  --info-600:#004F93;
  --info-100:#E4EFF8;

  /* ================= Semantic aliases ================= */
  --brand-primary:var(--perro-navy);
  --brand-primary-hover:var(--navy-600);
  --brand-primary-active:var(--navy-700);
  --brand-accent:var(--perro-green);
  --brand-accent-hover:var(--green-600);
  --brand-accent-active:var(--green-700);

  --text-heading:var(--navy-500);
  --text-body:var(--ink-800);
  --text-muted:var(--ink-500);
  --text-subtle:var(--ink-400);
  --text-on-brand:var(--white);
  --text-on-accent:var(--navy-900);
  --text-link:var(--steel-600);
  --text-link-hover:var(--perro-green);
  --text-eyebrow:var(--perro-green);

  --surface-page:var(--white);
  --surface-sunken:var(--ink-050);
  --surface-card:var(--white);
  --surface-card-alt:var(--ink-100);
  --surface-brand:var(--perro-navy);
  --surface-brand-deep:var(--navy-800);
  --surface-accent:var(--perro-green);
  --surface-accent-soft:var(--green-100);
  --surface-inverse:var(--navy-900);

  --border-subtle:var(--ink-200);
  --border-default:var(--ink-300);
  --border-strong:var(--ink-600);
  --border-brand:var(--perro-navy);
  --border-accent:var(--perro-green);

  --focus-ring:var(--perro-green);
  --overlay-scrim:rgba(15,29,61,.72);
}

/* ================= tokens/typography.css ================= */
:root{
  /* Families */
  --font-core:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-rounded:"Baloo 2","Archivo",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-display:var(--font-core);
  --font-body:var(--font-core);

  /* Weights */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:800;

  /* Sizes — 1.25 ratio, floored at 14px for body UI */
  --size-3xs:11px;
  --size-2xs:12px;
  --size-xs:13px;
  --size-sm:14px;
  --size-base:16px;
  --size-md:18px;
  --size-lg:21px;
  --size-xl:26px;
  --size-2xl:32px;
  --size-3xl:40px;
  --size-4xl:52px;
  --size-5xl:66px;
  --size-6xl:84px;

  /* Line heights */
  --leading-tight:1.05;
  --leading-snug:1.2;
  --leading-normal:1.45;
  --leading-relaxed:1.62;

  /* Tracking */
  --tracking-tighter:-0.02em;
  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.06em;
  --tracking-wider:0.12em;
  --tracking-widest:0.24em;

  /* Semantic type roles */
  --type-hero-size:var(--size-5xl);
  --type-hero-weight:var(--weight-black);
  --type-hero-tracking:var(--tracking-tighter);
  --type-section-size:var(--size-3xl);
  --type-eyebrow-size:var(--size-xs);
  --type-eyebrow-tracking:var(--tracking-widest);
  --type-body-size:var(--size-base);
  --type-body-leading:var(--leading-relaxed);
  --type-caption-size:var(--size-2xs);
}

/* ================= tokens/spacing.css ================= */
:root{
  /* 4px base grid */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:80px;
  --space-12:104px;
  --space-13:136px;

  /* Semantic spacing */
  --gutter-inline:24px;
  --gutter-inline-lg:56px;
  --section-pad-y:96px;
  --section-pad-y-sm:56px;
  --card-pad:28px;
  --card-pad-sm:20px;
  --stack-tight:8px;
  --stack:16px;
  --stack-loose:28px;
  --content-max:1200px;
  --prose-max:68ch;
}

/* ================= tokens/radius.css ================= */
:root{
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-xl:16px;
  --radius-capsule:999px;

  --radius-button:var(--radius-capsule);
  --radius-card:var(--radius-lg);
  --radius-input:var(--radius-sm);
  --radius-badge:var(--radius-capsule);
  --radius-image:var(--radius-md);
}

/* ================= tokens/elevation.css ================= */
:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(15,29,61,.08);
  --shadow-sm:0 2px 6px rgba(15,29,61,.10);
  --shadow-md:0 6px 18px rgba(15,29,61,.12);
  --shadow-lg:0 16px 40px rgba(15,29,61,.16);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-logo:0 2px 4px rgba(15,29,61,.35);

  --shadow-hover:0 10px 28px rgba(37,68,133,.18);
  --shadow-focus:0 0 0 3px rgba(126,199,34,.45);

  --scrim-bottom:linear-gradient(to top,rgba(15,29,61,.88) 0%,rgba(15,29,61,.55) 45%,rgba(15,29,61,0) 100%);
  --scrim-left:linear-gradient(to right,rgba(15,29,61,.90) 0%,rgba(15,29,61,.55) 50%,rgba(15,29,61,0) 100%);
  --scrim-flat:rgba(15,29,61,.62);
}

/* ================= tokens/motion.css ================= */
:root{
  --duration-instant:80ms;
  --duration-fast:140ms;
  --duration-base:220ms;
  --duration-slow:400ms;
  --duration-slower:700ms;

  --ease-standard:cubic-bezier(.2,0,.2,1);
  --ease-out:cubic-bezier(0,0,.25,1);
  --ease-in:cubic-bezier(.4,0,1,1);

  --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
  --transition-lift:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard);
}


/* ================= design-system base, shared by the chrome and the Home page =================
   tokens/base.css, scoped so it styles the site header/footer and the Home
   composition without reaching into Elementor-built content. */
.pp-chrome *,.pp-chrome *::before,.pp-chrome *::after,
.pp-page *,.pp-page *::before,.pp-page *::after{box-sizing:border-box}
.pp-chrome h1,.pp-chrome h2,.pp-chrome h3,.pp-chrome h4,
.pp-page h1,.pp-page h2,.pp-page h3,.pp-page h4,.pp-page h5,.pp-page h6{
  font-family:var(--font-display);color:var(--text-heading);margin:0;
  line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}
.pp-chrome p,.pp-page p{margin:0}
.pp-chrome a,.pp-page a{color:var(--text-link);text-decoration:none;
  transition:color var(--duration-fast) var(--ease-standard)}
.pp-chrome a:hover,.pp-page a:hover{color:var(--perro-green);text-decoration:underline;text-underline-offset:3px}
.pp-chrome img,.pp-page img{display:block;max-width:100%}
.pp-chrome :focus-visible,.pp-page :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pp-chrome ul,.pp-chrome figure,.pp-page ul,.pp-page figure{margin:0}
.pp-chrome{font-family:var(--font-core);font-size:var(--size-base);
  line-height:var(--leading-relaxed);color:var(--text-body);-webkit-font-smoothing:antialiased}
::selection{background:var(--green-200);color:var(--navy-900)}

html{scroll-behavior:smooth}
@keyframes perro-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ================= states the canvas expressed as style-hover ================= */
.pp-navlink:hover{color:var(--perro-navy);text-decoration:none}
.pp-arrow:hover{background:var(--navy-050);text-decoration:none}

/* Button component hover/active, from components/core/Button.jsx VARIANTS */
.pp-btn{transition:var(--transition-control)}
.pp-btn:hover{text-decoration:none}
.pp-btn--primary:hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover)}
.pp-btn--accent:hover{background:var(--brand-accent-hover);border-color:var(--brand-accent-hover)}
.pp-btn--secondary:hover{background:var(--brand-primary);color:var(--text-on-brand)}
.pp-btn--ghost:hover{color:var(--brand-accent-active)}
.pp-btn--inverse:hover{background:var(--navy-050);border-color:var(--navy-050)}
.pp-btn:active{filter:brightness(.92)}

/* Form controls — focus state from components/forms/{Input,Select,Textarea}.jsx */
.pp-control:focus{border-color:var(--perro-navy);box-shadow:var(--shadow-focus);outline:none}
.pp-control[aria-invalid="true"]{border-color:var(--red-600)}

/* ================= site header: mobile ================= */
/* The design is a desktop composition with a single flat nav row. Below 900px
   the row would wrap into the page, so it collapses behind a toggle. The
   checkbox drives it, so the menu opens with no JavaScript. */
.pp-navtoggle{display:none}
.pp-navtoggle-label{display:none;width:44px;height:44px;flex:0 0 auto;
  align-items:center;justify-content:center;cursor:pointer;color:var(--perro-navy)}
.pp-navtoggle-label span{position:relative;display:block;width:22px;height:2px;
  background:currentColor;transition:background var(--duration-fast) var(--ease-standard)}
.pp-navtoggle-label span::before,.pp-navtoggle-label span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;
  transition:transform var(--duration-fast) var(--ease-standard)}
.pp-navtoggle-label span::before{top:-7px}
.pp-navtoggle-label span::after{top:7px}

/* !important throughout: the design sets display, align-items, gap,
   justify-content on the <nav> and padding/border on each link as inline
   styles, and an inline style outranks any selector here. Nothing in this
   block applies above 900px, so the desktop header is untouched. */
@media (max-width:900px){
  .pp-navtoggle-label{display:flex}
  .pp-nav{display:none !important;width:100%;flex-direction:column !important;
    align-items:stretch !important;justify-content:flex-start !important;
    gap:0 !important;padding-bottom:12px}
  .pp-navtoggle:checked ~ .pp-nav{display:flex !important}
  .pp-nav .pp-navlink{padding:12px 0 !important;
    border-bottom:1px solid var(--ink-200) !important;border-top:0}
  .pp-nav .pp-btn{align-self:flex-start;margin-top:14px}
  .pp-navtoggle:checked ~ .pp-navtoggle-label span{background:transparent}
  .pp-navtoggle:checked ~ .pp-navtoggle-label span::before{transform:translateY(7px) rotate(45deg)}
  .pp-navtoggle:checked ~ .pp-navtoggle-label span::after{transform:translateY(-7px) rotate(-45deg)}
}

/* ================= WordPress admin bar =================
   The header is position:fixed, so it is positioned against the viewport and
   ignores the html{margin-top:32px} the admin bar applies. Offset it (and the
   anchor scroll margin) by the bar's height, at WordPress's own breakpoints.
   !important is required: the design sets top and scroll-margin-top inline.
   Logged-out visitors see none of this. */
.admin-bar [data-header]{top:32px !important}
.admin-bar .pp-page [id]{scroll-margin-top:100px !important}
.admin-bar .pp-body-offset{padding-top:calc(var(--pp-header-h,68px) + 32px)}
@media screen and (max-width:782px){
  .admin-bar [data-header]{top:46px !important}
  .admin-bar .pp-page [id]{scroll-margin-top:114px !important}
  .admin-bar .pp-body-offset{padding-top:calc(var(--pp-header-h,68px) + 46px)}
}
@media screen and (max-width:600px){
  /* Below 600px the admin bar is position:absolute and scrolls away. */
  .admin-bar [data-header]{top:0 !important}
  .admin-bar .pp-page [id]{scroll-margin-top:68px !important}
  .admin-bar .pp-body-offset{padding-top:var(--pp-header-h,68px)}
}

/* =======================================================================
   Interior pages — blog, contact, and any page built in the editor.

   Hello Elementor's own stylesheet stays loaded on these pages; these rules
   layer the brand on top of it rather than replacing it, so Elementor-built
   layouts keep working. The Home template dequeues Hello and is unaffected by
   everything below.
   ======================================================================= */

/* The site header is position:fixed with no spacer. Home's hero carries its own
   padding-top; every other page needs the offset or its content starts
   underneath the header. */
.pp-body-offset{padding-top:var(--pp-header-h,68px)}

.pp-interior{background:var(--white);color:var(--text-body);
  font-family:var(--font-core);font-size:var(--size-base);line-height:var(--leading-relaxed)}

/* Hello Elementor caps the content column and the page title at a responsive
   max-width (800px at >=992px, 1140px at >=1200px) and centres them. The brand
   layout does its own centring at 1200px on the inner wrappers, so the cap is
   released here — otherwise the title band and the blog grid sit boxed inside a
   full-width page.

   Hello's selector is `body:not([class*=elementor-page-]) .site-main`, which has
   exactly the same specificity as `.pp-interior main.site-main` and loads after
   it, so it would win the tie on source order. The #content id — which Hello
   itself always renders — breaks the tie without resorting to !important. */
.pp-interior main#content.site-main,
.pp-el-interior main#content.site-main{max-width:none;width:100%;margin:0;padding:0}
.pp-interior .page-header .entry-title,
.pp-el-interior .page-header .entry-title{max-width:none;margin-inline:0}

/* ---- page / post title band ---- */
.pp-interior .page-header,
.pp-el-interior .page-header{background:var(--perro-navy);margin:0;
  padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,72px);
  clip-path:polygon(0 0,100% 0,100% 100%,88px 100%,0 calc(100% - 88px))}
.pp-interior .page-header > *,
.pp-el-interior .page-header > *{width:100%;max-width:1200px;margin:0 auto;
  padding-inline:clamp(20px,4vw,56px)}
.pp-interior .page-header .entry-title,
.pp-interior .page-header h1,
.pp-el-interior .page-header .entry-title,
.pp-el-interior .page-header h1{font-family:var(--font-display);
  font-size:clamp(30px,4.4vw,52px);font-weight:var(--weight-black);
  letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);
  text-transform:uppercase;color:var(--white)}
.pp-interior .page-header .entry-title::after,
.pp-el-interior .page-header .entry-title::after{content:"";display:block;
  width:56px;height:4px;background:var(--brand-accent);margin-top:var(--space-5)}

/* ---- body copy ---- */
.pp-interior .page-content,
.pp-interior .post-content{width:100%;max-width:1200px;margin:0 auto;
  padding:clamp(40px,6vw,72px) clamp(20px,4vw,56px) clamp(48px,7vw,88px)}
.pp-interior .page-content > *,
.pp-interior .post-content > *{max-width:var(--prose-max)}
.pp-interior .page-content h2{font-family:var(--font-display);font-size:var(--size-2xl);
  font-weight:var(--weight-black);letter-spacing:var(--tracking-tight);
  text-transform:uppercase;color:var(--text-heading);margin:var(--space-9) 0 var(--space-5)}
.pp-interior .page-content h3{font-family:var(--font-display);font-size:var(--size-lg);
  font-weight:var(--weight-bold);color:var(--steel-600);margin:var(--space-8) 0 var(--space-4)}
.pp-interior .page-content h2:first-child,
.pp-interior .page-content h3:first-child{margin-top:0}
.pp-interior .page-content p{margin:0 0 var(--space-5)}
.pp-interior .page-content a{color:var(--text-link)}
.pp-interior .page-content ul,
.pp-interior .page-content ol{margin:0 0 var(--space-5);padding-left:var(--space-6)}
.pp-interior .page-content li{margin-bottom:var(--space-2)}
.pp-interior .page-content blockquote{margin:var(--space-7) 0;padding:var(--space-5) var(--space-6);
  border-left:4px solid var(--brand-accent);background:var(--ink-050);color:var(--ink-700)}
.pp-interior .page-content img{border-radius:var(--radius-image)}
.pp-interior .page-content code,
.pp-interior .page-content pre{font-family:var(--font-mono);font-size:var(--size-sm)}

/* ---- blog archive ----
   Hello Elementor puts the loop inside the same .page-content wrapper it uses
   for singular content, so the archive is selected by body class rather than by
   a wrapper of its own. */
.blog .pp-interior .page-content,
.archive .pp-interior .page-content,
.search .pp-interior .page-content{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(16px,2vw,28px);align-items:stretch}
/* cards span the container, so the prose measure must not apply here */
.blog .pp-interior .page-content > *,
.archive .pp-interior .page-content > *,
.search .pp-interior .page-content > *{max-width:none}
.pp-interior .post{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:var(--card-pad);margin:0;
  display:flex;flex-direction:column;transition:var(--transition-lift)}
.pp-interior .post:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.pp-interior .post .entry-title{font-family:var(--font-display);font-size:var(--size-md);
  font-weight:var(--weight-bold);letter-spacing:0;color:var(--text-heading);
  text-transform:none;margin:0 0 var(--space-3)}
.pp-interior .post .entry-title a{color:inherit}
.pp-interior .post .entry-title a:hover{color:var(--perro-green);text-decoration:none}
.pp-interior .post .post-meta,
.pp-interior .post .entry-meta{font-family:var(--font-mono);font-size:var(--size-2xs);
  color:var(--text-subtle);margin-bottom:var(--space-3)}
.pp-interior .post .entry-excerpt,
.pp-interior .post .entry-summary,
.pp-interior .post > p{font-size:var(--size-sm);line-height:var(--leading-normal);
  color:var(--text-muted);flex:1;margin:0}
.pp-interior .post .read-more,
.pp-interior .post .more-link{display:inline-flex;align-self:flex-start;margin-top:var(--space-5);
  font-size:var(--size-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--perro-navy)}
.pp-interior .post-tags .tag-links{font-family:var(--font-mono);font-size:var(--size-2xs);
  color:var(--text-subtle)}

/* pagination */
.pp-interior .pagination,
.pp-interior .nav-links{width:100%;max-width:1200px;margin:0 auto;
  padding:0 clamp(20px,4vw,56px) clamp(48px,7vw,88px);
  display:flex;gap:var(--space-2);flex-wrap:wrap}
.pp-interior .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 var(--space-3);border-radius:var(--radius-capsule);
  border:1px solid var(--border-default);font-size:var(--size-sm);
  font-weight:var(--weight-semibold);color:var(--perro-navy);text-decoration:none}
.pp-interior .page-numbers:hover{background:var(--navy-050);text-decoration:none}
.pp-interior .page-numbers.current{background:var(--perro-navy);border-color:var(--perro-navy);
  color:var(--white)}

/* =======================================================================
   Contact Form 7
   CF7 renders plain inputs with no inline styles, so the design's form
   components cannot reach it. These rules restyle its output from the same
   tokens: 4px square-shouldered fields, capsule submit button.
   ======================================================================= */
.pp-interior .wpcf7{max-width:760px}
.pp-interior .wpcf7 label{display:block;margin-bottom:var(--space-5);
  font-family:var(--font-core);font-size:var(--size-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--perro-navy)}
.pp-interior .wpcf7 input[type=text],
.pp-interior .wpcf7 input[type=email],
.pp-interior .wpcf7 input[type=tel],
.pp-interior .wpcf7 input[type=url],
.pp-interior .wpcf7 input[type=number],
.pp-interior .wpcf7 input[type=date],
.pp-interior .wpcf7 select,
.pp-interior .wpcf7 textarea{width:100%;margin-top:var(--space-2);
  font-family:var(--font-core);font-size:var(--size-sm);line-height:1.5;
  letter-spacing:normal;text-transform:none;font-weight:var(--weight-regular);
  color:var(--text-body);background:var(--white);padding:11px 14px;
  border-radius:var(--radius-input);border:1px solid var(--border-default);
  box-shadow:none;outline:none;transition:var(--transition-control)}
.pp-interior .wpcf7 textarea{resize:vertical;display:block}
.pp-interior .wpcf7 input:focus,
.pp-interior .wpcf7 select:focus,
.pp-interior .wpcf7 textarea:focus{border-color:var(--perro-navy);box-shadow:var(--shadow-focus)}
.pp-interior .wpcf7 input[type=submit],
.pp-interior .wpcf7 button[type=submit]{width:auto;display:inline-flex;align-items:center;
  justify-content:center;margin-top:var(--space-2);padding:16px 34px;
  font-family:var(--font-core);font-size:var(--size-md);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:1;
  color:var(--text-on-brand);background:var(--brand-primary);
  border:2px solid var(--brand-primary);border-radius:var(--radius-button);
  box-shadow:var(--shadow-inset);cursor:pointer;transition:var(--transition-control)}
.pp-interior .wpcf7 input[type=submit]:hover,
.pp-interior .wpcf7 button[type=submit]:hover{background:var(--brand-primary-hover);
  border-color:var(--brand-primary-hover)}
.pp-interior .wpcf7-not-valid-tip{font-size:var(--size-2xs);color:var(--red-600);
  letter-spacing:normal;text-transform:none;font-weight:var(--weight-regular)}
.pp-interior .wpcf7 .wpcf7-response-output{margin:var(--space-5) 0 0;padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-sm);border:1px solid var(--border-subtle);
  font-size:var(--size-sm);letter-spacing:normal;text-transform:none}
.pp-interior .wpcf7 form.sent .wpcf7-response-output{border-color:var(--green-500);
  background:var(--green-100);color:var(--green-900)}
.pp-interior .wpcf7 form.invalid .wpcf7-response-output,
.pp-interior .wpcf7 form.failed .wpcf7-response-output{border-color:var(--red-600);
  background:var(--red-100);color:var(--red-600)}

/* two-up field row used by the contact page markup */
.pp-interior .pp-field-row{display:flex;flex-wrap:wrap;gap:var(--space-5)}
.pp-interior .pp-field-row > *{flex:1 1 220px;min-width:0}

/* comments */
.pp-interior .comments-area{width:100%;max-width:1200px;margin:0 auto;
  padding:0 clamp(20px,4vw,56px) clamp(48px,7vw,88px)}
.pp-interior .comments-area > *{max-width:var(--prose-max)}