@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Figtree:wght@300;400;500;600;700&display=swap');
/* ===== Reset / guards ===== */
html, body { overflow-x:clip; max-width:100%; }
/* Always reserve the vertical scrollbar track. When the menu opens we lock the page
   with position:fixed, which removes the scrollbar; on classic-scrollbar browsers
   (Firefox/Windows) that widens the viewport and the page visibly jumps behind the
   overlay. Reserving the gutter means it never disappears, so nothing shifts.
   scrollbar-gutter:stable is the purpose-built property; overflow-y:scroll is the
   universal fallback for older browsers. */
html { overflow-y:scroll; scrollbar-gutter:stable; }
.sk-uc .elementor-heading-title { font-family:'Fraunces', Georgia, 'Times New Roman', serif !important; }
a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
.elementor-field:focus-visible { outline:2px solid #876f1c !important; outline-offset:3px; }

/* ===== Content grid ===== */
.sk-header > .elementor-container,
.sk-hero > .elementor-container { max-width:1160px; margin-left:auto; margin-right:auto; }

/* ===== Header (transparent, overlays the hero) ===== */
.sk-header { position:absolute !important; top:0; left:0; right:0; z-index:99;
  background:transparent !important; }
.sk-logo img { width:170px; height:auto; display:block; }
/* the crest logo is tall — size it by height so the bar stays compact.
   translateY nudges the crest's optical centre onto the same plane as the nav text
   (the logo PNG carries a few px of transparent space at the top). */
.sk-header .sk-logo img { width:auto !important; height:66px !important; transform:translateY(3px); }
/* both header columns centre their content vertically so logo + nav share one plane */
.sk-header .elementor-column > .elementor-element-populated {
  display:flex !important; flex-direction:column !important; justify-content:center !important; }
/* nav side: Apply Now link + hamburger, vertically centred */
.sk-navwrap { display:flex; align-items:center; justify-content:flex-end; gap:26px; }
.sk-topcta { font-family:'Figtree', -apple-system, system-ui, sans-serif; color:#fff; text-transform:uppercase; letter-spacing:.18em;
  font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
  padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .2s, color .2s; }
.sk-topcta:hover { color:#fff; border-bottom-color:#fff; }
/* vertically centre logo + nav in the bar */
.sk-header > .elementor-container { align-items:center !important; }
.sk-header .sk-nav-col > .elementor-element-populated { display:flex !important;
  align-items:center !important; justify-content:flex-end !important; width:100%; }
.sk-header .sk-nav-col .elementor-widget-wrap { align-content:center !important; }
.sk-burger { margin:0 !important; display:flex; flex-direction:column; gap:6px; width:34px;
  background:none; border:none; cursor:pointer; padding:0; flex:0 0 auto; }
.sk-burger span { display:block; width:32px; height:2px; background:#fff; }
.sk-nav-col .elementor-widget-wrap { align-items:center; }
.sk-nav-col { display:flex; justify-content:flex-end; }

/* ===== Full-screen menu overlay ===== */
.sk-menu { position:fixed; inset:0; z-index:9999; background:rgba(30,30,30,.96);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s, visibility .3s; overflow-y:auto; }
.sk-menu.open { opacity:1; visibility:visible; pointer-events:auto; }
/* top padding (60) + logo (66px, translateY 3) match the header exactly, so the overlay
   logo lands on top of the header logo with no jump when the menu opens */
.sk-menu-inner { max-width:1280px; margin:0 auto; padding:60px 60px 56px;
  min-height:100vh; display:flex; flex-direction:column; box-sizing:border-box; }
.sk-menu-top { display:flex; align-items:center; justify-content:space-between; }
.sk-menu-top img { width:auto !important; height:66px !important; transform:translateY(3px); }
/* scroll lock while the menu is open (position:fixed is the only reliable lock on iOS) */
body.sk-menu-open { position:fixed !important; left:0; right:0; width:100% !important;
  overflow:hidden !important; }
/* same 34px footprint and position as the header hamburger it replaces */
.sk-close { background:none; border:none; color:#fff; cursor:pointer; padding:0;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  font-size:30px; line-height:1; }
.sk-menu-nav { flex:1; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.sk-menu-nav a { color:#f3eee0; font-size:26px; font-weight:300; text-decoration:none; }
.sk-menu-nav a:hover { color:#876f1c; }
.sk-menu-contact { display:flex; flex-direction:column; gap:4px; }
.sk-menu-contact a { color:rgba(255,255,255,.8); font-size:14px; text-decoration:none; }

/* ===== Hero ===== */
.sk-hero { overflow:hidden !important; }
.sk-hero > .elementor-container { position:relative; z-index:2; }

/* ===== Divider (CSS background; works where image-widget data-URIs don't) ===== */
.sk-rule { height:1px; line-height:0; background:#876f1c; width:60px; }
.sk-rule img { display:none !important; }
.sk-rule--center { margin-left:auto; margin-right:auto; }

/* ===== Buttons ===== */
.sk-btn .elementor-button { font-family:'Figtree', -apple-system, system-ui, sans-serif !important; border-radius:0 !important;
  background:transparent !important; border:1px solid #110F0D !important; color:#110F0D !important;
  text-transform:uppercase; padding:14px 34px !important; }
.sk-btn .elementor-button:hover { background:#876f1c !important; border-color:#876f1c !important; color:#fff !important; }

/* ===== Text max-width helper ===== */
.sk-maxw { max-width:640px; margin-left:auto; margin-right:auto; }

/* ===== Gallery (standard Image Gallery -> clean grid) ===== */
.sk-gallery .gallery { display:grid !important; grid-template-columns:repeat(3,1fr) !important;
  gap:24px !important; margin:0 !important; }
.sk-gallery .gallery-item { width:auto !important; max-width:none !important; display:block !important;
  margin:0 !important; padding:0 !important; float:none !important; }
.sk-gallery .gallery-icon img { display:block; width:100%; height:auto; aspect-ratio:1.2/1; object-fit:cover; border:none !important; }
.sk-gallery .gallery-caption { display:none !important; }

/* ===== Forms (Elementor Pro) — single border + custom select chevron ===== */
.sk-form .elementor-field { border:1px solid #CAC2BB !important; border-radius:0 !important;
  background:#fff !important; padding:11px 14px !important; font-family:'Figtree', -apple-system, system-ui, sans-serif !important; }
.sk-form .elementor-field:focus { border-color:#876f1c !important; }
.sk-form .elementor-select-wrapper { position:relative; }
.sk-form .elementor-select-wrapper select { border:none !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; height:auto !important;
  padding:0 26px 0 0 !important; width:100% !important; }
.sk-form .elementor-select-wrapper::before { display:none !important; }
.sk-form .elementor-select-wrapper::after { content:""; position:absolute; right:4px; top:50%;
  width:8px; height:8px; border:solid #110F0D; border-width:0 0 2px 2px;
  transform:translateY(-70%) rotate(-45deg); pointer-events:none; }

/* ===== Footer (matches the header gold) ===== */
/* -1px pulls the footer over a sub-pixel gap where the white page bg showed as a hairline */
.sk-foot { margin-top:-1px; }
.sk-foot .sk-logo img { width:auto !important; height:76px !important; margin-left:auto; margin-right:auto; }
.sk-foot-nav { text-align:center; }
.sk-foot-nav a { color:#fff; text-decoration:none; margin:0 12px; font-size:14px; }
.sk-foot-nav a:hover { color:#110F0D; }
.sk-foot p { color:rgba(255,255,255,.92) !important; }
.sk-foot-contact a { color:#fff !important; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); }
.sk-foot-areas p { color:rgba(255,255,255,.78) !important; letter-spacing:.04em; }
.sk-foot-legal p { color:rgba(255,255,255,.62) !important; }

/* ===== Social icons (menu overlay + footer) ===== */
.sk-social { display:flex; align-items:center; gap:14px; }
.sk-social a { display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid currentColor; text-decoration:none;
  transition:background .2s, color .2s, border-color .2s; }
.sk-social svg { width:17px; height:17px; display:block; }
.sk-social--menu { margin-top:16px; }
.sk-social--menu a { color:rgba(255,255,255,.8); }
.sk-social--menu a:hover { background:#876f1c; border-color:#876f1c; color:#fff; }
.sk-social--foot { justify-content:center; }
.sk-social--foot a { color:#fff; border-color:rgba(255,255,255,.55); }
.sk-social--foot a:hover { background:#fff; border-color:#fff; color:#876f1c; }

/* ════════════════════════════════════════════════════════════════════════
   UNIFORM MOBILE GUTTER  — every top-level section's content aligns to one
   26px left/right bound (the logo plane). The single most useful rule
   for mobile consistency; don't remove it.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .elementor > .elementor-section.elementor-top-section,
  .elementor > .elementor-section.elementor-top-section > .elementor-container {
    padding-left:0 !important; padding-right:0 !important; }
  .elementor > .elementor-section.elementor-top-section > .elementor-container { max-width:100% !important; }
  .elementor > .elementor-section.elementor-top-section:not(.sk-header) > .elementor-container > .elementor-column {
    width:100% !important; }
  .elementor > .elementor-section.elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding-left:26px !important; padding-right:26px !important; }
  /* header: keep logo + burger on one centered row */
  .sk-header { padding-top:34px !important; padding-bottom:22px !important; }
  .sk-header > .elementor-container { flex-wrap:nowrap !important; align-items:center !important; }
  .sk-header > .elementor-container > .elementor-column { width:auto !important; }
  .sk-header .sk-nav-col { flex:1 1 auto !important; }
  .sk-gallery .gallery { grid-template-columns:repeat(2,1fr) !important; gap:14px !important; }
}

/* ===== Design-specific rules — DWC Careers ===== */
html { scroll-padding-top:96px; }   /* keep anchor targets clear of the sticky header */

/* center every top section's content to the content width */
.elementor > .elementor-section.elementor-top-section > .elementor-container {
  max-width:1160px; margin-left:auto; margin-right:auto; }

/* Eyebrow */
.sk-eyebrow p { margin:0; letter-spacing:.2em; text-transform:uppercase; }
.sk-eyebrow--onhero p { color:#876f1c; }
/* Main-site eyebrows follow the Figma spec (Figtree Bold, 1.2px tracking) rather than
   the Careers page's wider .2em — scoped so the approved Careers styling is untouched. */
.mh-legacy .sk-eyebrow p, .mh-cta .sk-eyebrow p, .mh-story .sk-eyebrow p,
.mh-portfolio .sk-eyebrow p, .mh-project .sk-eyebrow p {
  letter-spacing:1.2px !important; font-weight:700 !important; }

/* ===== Hero ===== */
.sk-hero > .elementor-container > .elementor-column > .elementor-widget-wrap { align-content:flex-end; }
.sk-hero-sub p { margin:0; }
/* hero copy is left-aligned to the logo plane — override the centring from .sk-maxw */
.sk-hero-sub { margin-left:0 !important; margin-right:0 !important; }
/* CTAs side by side with a gap */
.sk-hero-cta .elementor-widget-wrap { display:flex !important; flex-direction:row !important;
  align-items:center !important; gap:16px !important; }
.sk-hero-cta .elementor-widget { width:auto !important; flex:0 0 auto !important; margin-bottom:0 !important; }

/* ===== Button variants ===== */
.sk-btn.sk-btn--solid .elementor-button { background:#876f1c !important;
  border-color:#876f1c !important; color:#fff !important; }
.sk-btn.sk-btn--solid .elementor-button:hover { background:#7B5535 !important;
  border-color:#7B5535 !important; color:#fff !important; }
.sk-btn--ghost .elementor-button { background:transparent !important; border-color:#fff !important;
  color:#fff !important; }
.sk-btn--ghost .elementor-button:hover { background:#fff !important; border-color:#fff !important;
  color:#110F0D !important; }

/* ===== Intro band ===== */
.sk-intro .sk-uc .elementor-heading-title { margin-left:auto; margin-right:auto; max-width:20ch; }

/* ===== Jobs / tabs ===== */
.sk-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  border-bottom:1px solid #CAC2BB; }
.sk-tab { font-family:'Figtree', -apple-system, system-ui, sans-serif; font-weight:600; font-size:14px; color:#60574F;
  background:none; border:0; border-bottom:2px solid transparent; padding:14px 22px;
  cursor:pointer; margin-bottom:-1px; transition:color .2s, border-color .2s; }
/* the theme styles bare <button> on :hover/:focus (a pseudo-class out-specifies our
   plain .sk-tab rule), which painted a pink block behind the tabs in Firefox — so the
   background is forced transparent in EVERY state. */
.sk-tab, .sk-tab:hover, .sk-tab:focus, .sk-tab:active, .sk-tab:focus-visible {
  background:none !important; background-color:transparent !important; box-shadow:none !important; }
.sk-tab:hover { color:#876f1c !important; border-bottom-color:rgba(135,111,28,.45) !important; }
.sk-tab:focus-visible { outline:2px solid #876f1c !important; outline-offset:-2px; }
.sk-tab.is-active { color:#110F0D !important; border-bottom-color:#876f1c !important; }

.sk-job { display:none !important; }
.sk-job.is-active { display:block !important; }
.sk-job > .elementor-container { padding-top:42px; }
.sk-job-title .elementor-heading-title { margin-bottom:6px; }
.sk-job-topmeta { padding-bottom:20px; border-bottom:1px solid #CAC2BB; margin-bottom:4px; }
.sk-pay { color:#5C2D15; font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-size:21px; margin-right:22px; }
.sk-pay-note { font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:13px; font-style:italic; color:#60574F;
  margin-left:8px; white-space:nowrap; }
.sk-job-meta { color:#60574F; font-size:13px; }
.sk-job-split > .elementor-container { align-items:flex-start; }
.sk-job-left > .elementor-element-populated { padding-right:64px !important; }
.sk-job-body h4 { font-family:'Figtree', -apple-system, system-ui, sans-serif; font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:#876f1c; margin:26px 0 10px; }
.sk-job-body p { margin-bottom:14px; }
/* the lead-in line under the job title (e.g. "Project Manager (Experienced)") */
.sk-job-body .sk-job-lead { font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-size:18px; color:#110F0D;
  margin-bottom:16px; }
/* bulleted lists inside the description (experience / schedule / license) */
.sk-job-body ul { list-style:none; margin:0 0 6px; padding:0; }
.sk-job-body li { position:relative; padding:4px 0 4px 18px; }
.sk-job-body li::before { content:""; position:absolute; left:0; top:14px;
  width:5px; height:5px; background:#876f1c; }
.sk-job-apply { margin-top:4px; }
.sk-job-aside > .elementor-element-populated { background:#F8F8F8 !important;
  padding:26px 28px !important; border-top:3px solid #876f1c; }
.sk-aside-h p { margin:0 0 8px; letter-spacing:.14em; text-transform:uppercase; color:#876f1c; }
.sk-job-benefits ul { list-style:none; margin:0; padding:0; font-size:14px; }
.sk-job-benefits li { padding:7px 0; border-bottom:1px solid #CAC2BB; color:#433A33; }
.sk-job-benefits li:last-child { border-bottom:0; }

/* ===== Apply form (on the chestnut section) =====
   Every control is one height (52px), one type scale, one border. The select's box is
   the WRAPPER (the <select> itself is transparent inside it), so the focus ring goes on
   the wrapper via :focus-within — putting it on the <select> draws it over the text. */
.sk-apply-form { max-width:760px; margin-left:auto; margin-right:auto; }
.sk-apply-form .elementor-field-group { margin-bottom:22px !important; }
.sk-apply-form .elementor-field-group > label {
  font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:.02em !important; color:#fff !important; margin-bottom:9px !important; display:block !important; }

/* one box style + one height for every control */
.sk-apply-form input[type=text].elementor-field,
.sk-apply-form input[type=email].elementor-field,
.sk-apply-form input[type=tel].elementor-field,
.sk-apply-form .elementor-select-wrapper {
  height:52px !important; min-height:52px !important; box-sizing:border-box !important;
  background:#fff !important; border:1px solid rgba(255,255,255,.28) !important; border-radius:0 !important;
  padding:0 16px !important; font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:15px !important; }
/* only the select's wrapper is a flex box — flex on an <input> makes Firefox blow the
   file field up to ~100px tall, so inputs are left as plain blocks. */
.sk-apply-form .elementor-select-wrapper { display:flex !important; align-items:center !important; }

/* file upload — same 52px box, with a real styled button instead of the browser default.
   The button is centred by box math rather than flex (flex breaks the field in Firefox):
   52 height - 2px borders - 14px vertical padding = a 36px content box, and the button is
   exactly 36px tall, so the gap above and below is an even 7px. */
.sk-apply-form input[type=file].elementor-field {
  display:block !important; height:52px !important; min-height:52px !important;
  box-sizing:border-box !important; padding:7px 14px !important; line-height:36px !important;
  background:#fff !important; border:1px solid rgba(255,255,255,.28) !important; border-radius:0 !important;
  font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:14px !important; }
.sk-apply-form input[type=file]::file-selector-button,
.sk-apply-form input[type=file]::-webkit-file-upload-button {
  height:36px !important; box-sizing:border-box !important;
  padding:0 18px !important; line-height:36px !important; margin:0 14px 0 0 !important;
  font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:11px !important; font-weight:600 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  background:#110F0D !important; color:#fff !important; border:0 !important; border-radius:0 !important;
  cursor:pointer !important; }
.sk-apply-form input[type=file]::file-selector-button:hover,
.sk-apply-form input[type=file]::-webkit-file-upload-button:hover { background:#876f1c !important; }
.sk-apply-form .elementor-field-group textarea.elementor-field-textual {
  height:124px !important; box-sizing:border-box !important; background:#fff !important;
  border:1px solid rgba(255,255,255,.28) !important; border-radius:0 !important;
  padding:14px 16px !important; font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:15px !important; line-height:1.6 !important; }

/* typed text must be dark — the theme sets -webkit-text-fill-color, so override both */
.sk-apply-form .elementor-field-group .elementor-field-textual,
.sk-apply-form .elementor-field-group select {
  color:#110F0D !important; -webkit-text-fill-color:#110F0D !important; }
.sk-apply-form .elementor-field-group .elementor-field-textual::placeholder {
  color:#8a8178 !important; -webkit-text-fill-color:#8a8178 !important; opacity:1 !important; }

/* select: strip the native arrow so only our single chevron shows */
.sk-apply-form .elementor-select-wrapper { position:relative !important; }
.sk-apply-form .elementor-select-wrapper select {
  -webkit-appearance:none !important; appearance:none !important; background-image:none !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  height:50px !important; padding:0 26px 0 0 !important; margin:0 !important; width:100% !important;
  font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:15px !important; }
.sk-apply-form .elementor-select-wrapper::before { display:none !important; }
.sk-apply-form .elementor-select-wrapper::after { content:"" !important; position:absolute !important;
  right:16px; top:50%; width:8px; height:8px; border:solid #110F0D; border-width:0 0 2px 2px;
  transform:translateY(-70%) rotate(-45deg); pointer-events:none; display:block !important; }

/* radios inline, consistent type */
.sk-apply-form .elementor-field-subgroup { display:flex !important; flex-direction:row !important;
  flex-wrap:wrap; gap:10px 24px; padding-top:4px; }
.sk-apply-form .elementor-field-option { flex:0 0 auto !important; width:auto !important;
  display:flex; align-items:center; gap:7px; }
.sk-apply-form .elementor-field-option label { font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:14px !important;
  font-weight:400 !important; color:rgba(255,255,255,.92) !important; }

/* focus ring sits outside the control, never over the text */
.sk-apply-form input.elementor-field:focus,
.sk-apply-form textarea.elementor-field:focus,
.sk-apply-form .elementor-select-wrapper:focus-within {
  outline:2px solid #876f1c !important; outline-offset:2px !important;
  border-color:#876f1c !important; }
.sk-apply-form select:focus { outline:none !important; }

.sk-apply-form .elementor-button { background:#876f1c !important; color:#fff !important;
  border:none !important; border-radius:0 !important; text-transform:uppercase; letter-spacing:.14em;
  padding:16px 30px !important; font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:13px !important; font-weight:600 !important; }
.sk-apply-form .elementor-button:hover { background:#7B5535 !important; }

/* ===== Sticky Apply pill (fixed; holder takes no space) ===== */
.sk-pill-holder, .sk-pill-holder > .elementor-container,
.sk-pill-holder .elementor-widget-wrap { padding:0 !important; min-height:0 !important; }
/* always visible; z-index sits below the header (99) and far below the menu overlay (9999) */
.sk-apply-pill { position:fixed; right:22px; bottom:22px; z-index:95; opacity:1;
  transform:none; transition:opacity .25s, transform .25s; pointer-events:auto; }
.sk-apply-pill.is-hidden { opacity:0; transform:translateY(14px); pointer-events:none; }
/* never let it sit over the open menu */
body.sk-menu-open .sk-apply-pill { opacity:0 !important; pointer-events:none !important; }
.sk-apply-pill a { display:inline-block; background:#876f1c; color:#fff; font-family:'Figtree', -apple-system, system-ui, sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:15px 26px;
  text-decoration:none; box-shadow:0 10px 30px rgba(17,15,13,.35); }
.sk-apply-pill a:hover { background:#7B5535; }

/* ════════════════════════════════════════════════════════════════════════
   MAIN SITE (2026 design) — all rules scoped to .mh-* so the Careers page
   keeps the styling the client already approved.
   ════════════════════════════════════════════════════════════════════════ */
/* Placeholders for Figma exports that haven't been supplied yet (see mh_image()).
   Elementor drops an image widget with an empty URL, so these are spacer widgets. */
.mh-phbox .elementor-spacer { height:auto !important; }
.mh-phbox .elementor-spacer-inner { height:auto !important; width:100%;
  background:repeating-linear-gradient(45deg,#eceae6,#eceae6 12px,#e3e0da 12px,#e3e0da 24px);
  border:1px solid #ddd9d2; }
.mh-phbox--wide  .elementor-spacer-inner { aspect-ratio:16/9; }
.mh-phbox--shot  .elementor-spacer-inner { aspect-ratio:492/343; }
.mh-phbox--story .elementor-spacer-inner { aspect-ratio:467/451; }
.mh-phbox--stats .elementor-spacer-inner { aspect-ratio:1261/218; }  /* unused: stats row is native now */
.mh-phbox--map   .elementor-spacer-inner { aspect-ratio:571/289; }
.mh-phbox--thumb .elementor-spacer-inner { aspect-ratio:243/204; }
.mh-phbox--hero  .elementor-spacer-inner { aspect-ratio:1047/586; }

/* Elementor's min_height setting doesn't survive our REST import (it reads back as 0),
   so section heights from the Figma frames are set here instead. */
.mh-hero { min-height:671px !important; }
.mh-hero--inner { min-height:607px !important; }
.mh-quote { min-height:584px !important; }

/* photos keep the Figma aspect ratios regardless of the source file's dimensions */
.mh-shot img, .mh-map img, .mh-thumb img, .mh-story-img img, .mh-hero-shot img, .mh-stats img {
  display:block; width:100%; height:auto; }
.mh-shot img { aspect-ratio:492/343; object-fit:cover; }
.mh-thumb img { aspect-ratio:243/204; object-fit:cover; }
.mh-story-img img { aspect-ratio:467/451; object-fit:cover; }
.mh-hero-shot img { aspect-ratio:1047/586; object-fit:cover; }

/* ===== Header (transparent over the hero) ===== */
.mh-header { position:absolute !important; top:0; left:0; right:0; z-index:99;
  background:transparent !important; }
.mh-header > .elementor-container { align-items:center !important; max-width:1160px;
  margin-left:auto; margin-right:auto; }
.mh-header .elementor-column > .elementor-element-populated { display:flex !important;
  flex-direction:column !important; justify-content:center !important; }
.mh-header .sk-logo img { width:auto !important; height:70px !important; }
.mh-navwrap { display:flex; align-items:center; justify-content:flex-end; gap:34px; }
.mh-nav { display:flex; align-items:center; gap:34px; }
.mh-nav a { font-family:'Figtree', -apple-system, system-ui, sans-serif; font-weight:600; font-size:14px; color:#fff; text-decoration:none;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
  padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .2s; }
.mh-nav a:hover { border-bottom-color:#fff; }
.mh-burger { display:none; flex-direction:column; gap:6px; width:34px; background:none;
  border:none; cursor:pointer; padding:0; }
.mh-burger span { display:block; width:32px; height:2px; background:#fff; }

/* ===== Mobile menu overlay ===== */
.mh-menu { position:fixed; inset:0; z-index:9999; background:rgba(18,16,14,.985);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s, visibility .3s; overflow-y:auto; }
.mh-menu.open { opacity:1; visibility:visible; pointer-events:auto; }
.mh-menu-inner { max-width:1280px; margin:0 auto; padding:78px 30px 56px;
  min-height:100vh; display:flex; flex-direction:column; box-sizing:border-box; }
/* centred so the close button lands exactly on the burger it replaces */
.mh-menu-top { display:flex; align-items:center; justify-content:space-between; }
.mh-menu-top img { width:auto !important; height:70px !important; }
.mh-close { background:none; border:none; color:#fff; cursor:pointer; padding:0;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  font-size:32px; line-height:1; }
.mh-menu-nav { flex:1; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.mh-menu-nav a { color:#fff; font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:28px; font-weight:300; text-decoration:none; }
.mh-menu-nav a:hover { color:#be9340; }
.mh-menu-contact { display:flex; flex-direction:column; gap:4px; margin-bottom:20px; }
.mh-menu-contact a, .mh-menu-contact span { color:rgba(255,255,255,.85); font-size:14px; text-decoration:none; }

/* ===== Buttons (Figma gold #be9340) ===== */
.sk-btn.mh-btn .elementor-button { font-family:'Figtree', -apple-system, system-ui, sans-serif !important; border-radius:0 !important;
  text-transform:uppercase !important; letter-spacing:3.7px !important; font-size:10px !important;
  font-weight:500 !important; padding:14px 30px !important; min-width:238px; text-align:center; }
.sk-btn.mh-btn--solid .elementor-button { background:#be9340 !important;
  border:1px solid #be9340 !important; color:#fff !important; }
.sk-btn.mh-btn--solid .elementor-button:hover { background:#866f1c !important;
  border-color:#866f1c !important; }
.sk-btn.mh-btn--ghost .elementor-button { background:transparent !important;
  border:1px solid #fff !important; color:#fff !important; min-width:221px; }
.sk-btn.mh-btn--ghost .elementor-button:hover { background:#fff !important; color:#110F0D !important; }
.mh-btn--center { text-align:center; }

/* ===== Hero ===== */
/* Legibility scrim: the header sits transparent over the photo, and some heroes are
   bright (the About bathroom especially), which left white nav text hard to read.
   A short top gradient guarantees contrast without darkening the whole image. */
.mh-hero { position:relative; }
.mh-hero::after { content:""; position:absolute; left:0; right:0; top:0; height:230px;
  background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
  pointer-events:none; z-index:1; }
.mh-hero > .elementor-container { max-width:1160px; margin-left:auto; margin-right:auto;
  position:relative; z-index:2; }
/* Hero copy sits LOW in the frame — design puts the h1 at y423 and the buttons at y502
   of a 671px hero. Elementor's valign didn't hold, leaving the headline at y150. */
.mh-hero:not(.mh-hero--inner) > .elementor-container > .elementor-column > .elementor-element-populated {
  display:flex !important; flex-direction:column !important; justify-content:flex-end !important;
  min-height:671px; box-sizing:border-box; }
/* interior heroes centre their title instead (design y293 of a 607px hero) */
.mh-hero--inner > .elementor-container > .elementor-column > .elementor-element-populated {
  display:flex !important; flex-direction:column !important; justify-content:center !important;
  min-height:607px; box-sizing:border-box; }
.mh-hero .elementor-element-populated { padding-left:0 !important; }
.mh-hero-cta .elementor-widget-wrap { display:flex !important; flex-direction:row !important;
  align-items:center !important; gap:16px !important; }
.mh-hero-cta .elementor-widget { width:auto !important; flex:0 0 auto !important; margin-bottom:0 !important; }

/* ===== Shared type ===== */
.mh-legacy > .elementor-container, .mh-work > .elementor-container,
.mh-cta > .elementor-container, .mh-quote > .elementor-container,
.mh-foot > .elementor-container, .mh-foot-legal > .elementor-container {
  max-width:1160px; margin-left:auto; margin-right:auto; }
.mh-body p { line-height:1.81 !important; letter-spacing:.28px; }

/* ═══ Grid / split alignment ═══════════════════════════════════════════════
   Elementor caps inner .elementor-container at 1140px and every section column
   carries 24px side padding, so nested grids ended up inset from the text above
   them (measured 194..1246 against a 140..1300 container). The design puts tiles
   flush on the content edge, so each row is pulled back out by
   (24px section padding + its own column padding). ═══════════════════════════ */
/* Desktop only — on mobile the uniform 26px gutter rule owns the edges, and these
   negative margins would push tiles off-screen (measured -20px, hidden by
   overflow-x:clip rather than visibly broken, which makes it easy to miss). */
@media (min-width:901px) {
  .mh-shot-row > .elementor-container,
  .mh-tile-row > .elementor-container,
  .mh-thumb-row > .elementor-container,
  .mh-cta-split > .elementor-container,
  .mh-story-split > .elementor-container,
  .mh-contact-split > .elementor-container { max-width:none !important; }
  .mh-shot-row  > .elementor-container { width:calc(100% + 108px) !important; margin-left:-54px !important; margin-right:-54px !important; }
  .mh-tile-row  > .elementor-container { width:calc(100% + 70px)  !important; margin-left:-35px !important; margin-right:-35px !important; }
  .mh-thumb-row > .elementor-container { width:calc(100% + 72px)  !important; margin-left:-36px !important; margin-right:-36px !important; }
  .mh-cta-split     > .elementor-container,
  .mh-story-split   > .elementor-container,
  .mh-contact-split > .elementor-container { width:calc(100% + 48px) !important; margin-left:-24px !important; margin-right:-24px !important; }
  /* 3 columns at Elementor's integer 33% only total 99%, leaving the row 12px short */
  .mh-tile-row > .elementor-container > .elementor-column { width:33.3333% !important; }
  /* project page: the lead image and breadcrumb sit directly in the section column,
     so they need the same pull-out as the thumbnail rows to line up with them */
  .mh-project .mh-hero-shot { width:calc(100% + 48px) !important; max-width:none !important;
    margin-left:-24px !important; margin-right:-24px !important; }
  .mh-project .mh-crumb { margin-left:-24px !important; }
}

/* ===== Work grid ===== */
.mh-shot-row { margin-bottom:50px; }
.mh-shot-row:last-of-type { margin-bottom:0; }
.mh-shot-col > .elementor-element-populated { padding:0 30px !important; }

/* ===== Testimonial ===== */
/* Rectangle 90 in the design: a 1280x99 white->transparent gradient over the top of
   the photo so it fades out of the white section above instead of butting hard. */
.mh-quote { position:relative; }
.mh-quote::before { content:""; position:absolute; left:0; right:0; top:0; height:99px;
  background:linear-gradient(to bottom, #fff, rgba(255,255,255,0)); pointer-events:none; z-index:2; }
/* The gradient only covers the top 99px, so the container needs no stacking context.
   Leaving it positioned made it the arrows' offset parent and threw them off by
   ~200px; keeping everything static lets the arrows anchor to the column (= content
   width), so left:0 / right:0 lands them exactly on the content edge. */
.mh-quote > .elementor-container { position:static; z-index:auto; }
.mh-quote .elementor-element-populated, .mh-quote .elementor-widget-wrap,
.mh-quote .elementor-widget, .mh-quote .elementor-widget-container { position:static; }
/* design: quote text at y242, attribution y441 of the 584px section */
.mh-quote .elementor-element-populated { padding:242px 90px 60px !important; }
.mh-q .elementor-heading-title { max-width:736px; margin-left:auto; margin-right:auto; }
.mh-q, .mh-qa { display:none !important; }
.mh-q.is-active, .mh-qa.is-active { display:block !important; }
.mh-q .elementor-heading-title { max-width:736px; margin:0 auto; }
/* anchored to the column, so 0 == the content edge (design has them on that line) */
.mh-arrow { position:absolute; top:262px; transform:none; width:26px; height:60px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:none; border:none; cursor:pointer; padding:0; z-index:3; transition:opacity .2s; }
.mh-arrow svg { width:22px; height:58px; display:block; }
.mh-arrow:hover { opacity:.65; }
.mh-arrow--prev { left:0; right:auto; }
.mh-arrow--next { right:0; left:auto; }
.mh-arrow--next svg { transform:scaleX(-1); }

/* ===== CTA band ===== */
.mh-cta-h .elementor-heading-title { max-width:736px; margin-left:auto; margin-right:auto; }
/* design sets the heading immediately under the eyebrow — Elementor's default widget
   margin left a visible gap under "BEGIN YOUR JOURNEY" / "WHY DWC" */
.mh-cta .sk-eyebrow, .mh-legacy .sk-eyebrow, .mh-story .sk-eyebrow,
.mh-portfolio .sk-eyebrow, .mh-project .sk-eyebrow { margin-bottom:2px !important; }
.mh-cta .sk-eyebrow + .elementor-widget-heading .elementor-heading-title,
.mh-legacy .sk-eyebrow + .elementor-widget-heading .elementor-heading-title { margin-top:0; }
.mh-cta-left > .elementor-element-populated { padding-right:90px !important; }
.mh-cta-copy p, .mh-cta-addr p { line-height:1.81 !important; letter-spacing:.28px; }
.mh-cta-addr a { color:inherit; text-decoration:none; }

/* ===== Footer ===== */
.mh-foot .sk-logo img { width:auto !important; height:70px !important; }
.mh-ftag p { line-height:1.81 !important; letter-spacing:.2px; max-width:190px; }
.mh-fnav { display:flex; flex-direction:column; gap:12px; }
.mh-fnav a { color:#fff; text-decoration:none; font-family:'Figtree', -apple-system, system-ui, sans-serif; font-weight:600;
  font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.mh-fnav a:hover { text-decoration:underline; }
.mh-faddr p { line-height:1.81 !important; letter-spacing:.28px; }
.mh-faddr a { color:#fff; text-decoration:none; }
.mh-fcol--social .elementor-widget-wrap { justify-content:flex-end; }
.mh-social--foot a { color:#fff; border-color:rgba(255,255,255,.7); border-radius:50%; }
.mh-social--foot a:hover { background:#fff; color:#866f1c; }
.mh-social--menu { margin-top:4px; }
.mh-social--menu a { color:#fff; border-color:rgba(255,255,255,.6); }
.mh-flegal p { letter-spacing:.2px; }
.mh-flegal a { color:#fff; text-decoration:underline; }

/* ===== Interior page heroes ===== */
.mh-hero--inner .elementor-element-populated { padding-left:24px !important; }
.mh-hero--inner .mh-hero-h1 .elementor-heading-title { text-align:center; }
.mh-eyebrow--lt p { color:#be9340 !important; }
.sk-btn.mh-btn--sm .elementor-button { min-width:192px; }

/* ===== About ===== */
/* stats row — 48+ / 200+ / 15+ / 100%, per the About frame */
.mh-stats-band > .elementor-container { max-width:1160px; margin-left:auto; margin-right:auto; }
.mh-stat .elementor-widget { margin-bottom:0 !important; }
.mh-stat-ico { display:flex; justify-content:center; color:#55625a; }
.mh-stat-ico svg { width:30px; height:30px; display:block; }
/* Target the widget AND any inner <p>: the text widget only emits a <p> when the
   content has NO markup, and the number contains a <span> for the +/% suffix. Keying
   these rules on `p` alone silently did nothing — the figures rendered as 15px body
   text instead of the design's large serif. */
.mh-stat-n, .mh-stat-n p {
  font-family:'Fraunces', Georgia, 'Times New Roman', serif !important; font-size:36px !important; font-weight:700 !important;
  color:#1a1a1a !important; line-height:1.15 !important; letter-spacing:0 !important;
  margin:12px 0 4px !important; }
.mh-stat-suf { font-weight:700; font-size:0.82em; vertical-align:baseline; }
.mh-stat-l, .mh-stat-l p {
  font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:14px !important; font-weight:400 !important;
  color:#6b6b6b !important; letter-spacing:.1px !important; margin:0 !important; }
.mh-story-split > .elementor-container { align-items:center; }
.mh-story-left > .elementor-element-populated { padding-right:44px !important; }
.mh-story-img img { display:block; width:100%; height:auto; }
.mh-story-h .elementor-heading-title { max-width:590px; }
.mh-body p + p { margin-top:1.4em; }

/* ===== Contact ===== */
.mh-contact-split > .elementor-container { align-items:flex-start; }
.mh-contact-left > .elementor-element-populated { padding-right:110px !important; }
.mh-form-note p { color:#9b9b9b !important; font-size:12px; letter-spacing:.24px; }
/* form chrome per the Contact frame: 52px fields, #c3aa5f hairline, 18px labels */
.mh-form .elementor-field-group { margin-bottom:20px !important; }
.mh-form .elementor-field-group > label { font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:18px !important;
  font-weight:300 !important; color:#110F0D !important; margin-bottom:8px !important; display:block !important; }
.mh-form input[type=text].elementor-field,
.mh-form input[type=email].elementor-field,
.mh-form input[type=tel].elementor-field {
  height:52px !important; min-height:52px !important; box-sizing:border-box !important;
  background:#fff !important; border:1px solid #c3aa5f !important; border-radius:0 !important;
  padding:0 16px !important; font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:16px !important; }
.mh-form textarea.elementor-field-textual { height:185px !important; box-sizing:border-box !important;
  background:#fff !important; border:1px solid #c3aa5f !important; border-radius:0 !important;
  padding:14px 16px !important; font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:16px !important; line-height:1.6 !important; }
.mh-form .elementor-field-group .elementor-field-textual { color:#110F0D !important;
  -webkit-text-fill-color:#110F0D !important; }
.mh-form .elementor-field-group .elementor-field-textual::placeholder { color:#9b9b9b !important;
  -webkit-text-fill-color:#9b9b9b !important; opacity:1 !important; }
.mh-form .elementor-field:focus { outline:2px solid #be9340 !important; outline-offset:2px !important; }
.mh-form .elementor-button { background:#be9340 !important; color:#fff !important; border:none !important;
  border-radius:0 !important; text-transform:uppercase !important; letter-spacing:3.7px !important;
  font-size:10px !important; font-weight:500 !important; font-family:'Figtree', -apple-system, system-ui, sans-serif !important;
  padding:14px 30px !important; max-width:203px; }
.mh-form .elementor-button:hover { background:#866f1c !important; }

/* ═══ Projects archive — markup from [dwc_projects] (mu-plugins/dwc-projects.php) ═══
   A CSS grid rather than Elementor columns: the item count is dynamic, so it has to
   wrap on its own. Tiles are deliberately larger than the Figma 329x307 (square at
   ~373px on a 1440 viewport) — the client asked for bigger thumbnails. Drop
   aspect-ratio back to 329/307 to return to the drawn size. */
.dwc-portfolio { width:100%; }
.dwc-search { max-width:845px; margin:0 auto 44px; }
.dwc-search input { width:100%; height:52px; box-sizing:border-box; padding:0 18px;
  border:1px solid #CAC2BB; border-radius:0; background:#fff;
  font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:14px; color:#110F0D; }
.dwc-search input::placeholder { color:#9b9b9b; }
.dwc-search input:focus { outline:2px solid #be9340; outline-offset:2px; border-color:#be9340; }

.dwc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px 22px; }
.dwc-tile { display:block; text-decoration:none; }
.dwc-tile-img { display:block; overflow:hidden; }
.dwc-tile-img img { display:block; width:100%; height:auto; aspect-ratio:1/1;
  object-fit:cover; transition:transform .45s ease; }
.dwc-tile:hover .dwc-tile-img img { transform:scale(1.04); }
.dwc-tile-ph { display:block; aspect-ratio:1/1;
  background:repeating-linear-gradient(45deg,#eceae6,#eceae6 12px,#e3e0da 12px,#e3e0da 24px); }
.dwc-tile-meta { display:flex; flex-direction:column; gap:5px; margin-top:14px; }
.dwc-tile-cat { font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#866f1c; }
.dwc-tile-name { font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-size:20px; color:#3c3a3a; }
.dwc-tile:hover .dwc-tile-name { color:#866f1c; }

.dwc-pager { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:54px;
  font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:13px; }
.dwc-pager a, .dwc-pager span { color:#60574F; text-decoration:none; min-width:22px;
  text-align:center; }
.dwc-pager .current { color:#110F0D; font-weight:700; }
.dwc-pager a:hover { color:#866f1c; }
.dwc-empty { text-align:center; font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:14px; color:#60574F; }
.dwc-empty a { color:#866f1c; }

@media (max-width:900px) {
  .dwc-grid { grid-template-columns:repeat(2,1fr); gap:22px 14px; }
  .dwc-search { margin-bottom:28px; }
  .dwc-pager { margin-top:34px; }
}
@media (max-width:520px) {
  .dwc-grid { grid-template-columns:1fr; }
}

/* ═══ Single project — markup from [dwc_project] ═══════════════════════════ */
/* Pages use Elementor's `elementor_canvas` template, which suppresses the theme's
   own header/footer. A Theme Builder SINGLE can't use canvas (canvas renders the
   post's own content, not the template), so Hello Elementor's chrome renders too —
   244px of empty header above our hero. Our template supplies its own header and
   footer, so the theme's are hidden here.
   Cleaner permanent alternative: disable them globally in Hello's theme settings,
   since every page on this site provides its own chrome. */
body.single-project header.site-header,
body.single-project footer.site-footer { display:none !important; }
.mh-single > .elementor-container { max-width:100% !important; }
.mh-single .elementor-element-populated { padding:0 !important; }

/* hero: featured image, same 607px/overlay treatment as the other interior heroes */
.dwc-p-hero { position:relative; min-height:607px; display:flex; align-items:center;
  justify-content:center; background:#110F0D center/cover no-repeat; }
.dwc-p-hero::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.37); }
.dwc-p-hero::after { content:""; position:absolute; left:0; right:0; top:0; height:230px;
  background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0)); }
.dwc-p-hero-inner { position:relative; z-index:2; }
.dwc-p-hero h1 { font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-size:48px; font-weight:700; color:#fff;
  text-align:center; line-height:1.23; margin:0; }

.dwc-p-body { max-width:1160px; margin:0 auto; padding:56px 24px 78px; }
.dwc-crumb { font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:14px; color:#433A33; display:flex; gap:8px;
  margin-bottom:22px; }
.dwc-crumb a { color:#433A33; text-decoration:none; }
.dwc-crumb a:hover { color:#866f1c; }

/* carousel: one stage, thumbnails switch it, arrows cycle */
.dwc-carousel { position:relative; }
.dwc-stage { position:relative; }
.dwc-slide { display:none; margin:0; }
.dwc-slide.is-active { display:block; }
.dwc-slide img { display:block; width:100%; height:auto; aspect-ratio:1047/586;
  object-fit:cover; }
.dwc-arrow { position:absolute; top:50%; transform:translateY(-50%); width:26px; height:60px;
  display:flex; align-items:center; justify-content:center; color:#fff; background:none;
  border:none; cursor:pointer; padding:0; z-index:3; transition:opacity .2s; }
.dwc-arrow svg { width:22px; height:58px; display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
.dwc-arrow:hover { opacity:.65; }
.dwc-arrow--prev { left:22px; }
.dwc-arrow--next { right:22px; }
.dwc-arrow--next svg { transform:scaleX(-1); }

.dwc-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; margin-top:34px; }
.dwc-thumb { padding:0; border:none; background:none; cursor:pointer; display:block;
  position:relative; }
.dwc-thumb img { display:block; width:100%; height:auto; aspect-ratio:243/204;
  object-fit:cover; transition:opacity .2s; }
.dwc-thumb:hover img { opacity:.82; }
.dwc-thumb.is-active img { outline:2px solid #be9340; outline-offset:-2px; }

.dwc-p-content { margin-top:44px; font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:14px; font-weight:300;
  line-height:1.81; letter-spacing:.28px; color:#433A33; max-width:749px; }
.dwc-p-content p { margin:0 0 1.2em; }
.dwc-p-meta { display:flex; flex-wrap:wrap; gap:14px 54px; margin:38px 0 0;
  padding-top:26px; border-top:1px solid #CAC2BB; }
.dwc-p-meta div { display:flex; flex-direction:column; gap:5px; }
.dwc-p-meta dt { font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#866f1c; margin:0; }
.dwc-p-meta dd { font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:14px; color:#433A33; margin:0; }

@media (max-width:900px) {
  .dwc-p-hero { min-height:420px; }
  .dwc-p-hero h1 { font-size:34px; }
  .dwc-p-body { padding:34px 26px 56px; }
  .dwc-thumbs { grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; }
  .dwc-arrow--prev { left:8px; }
  .dwc-arrow--next { right:8px; }
  .dwc-arrow svg { width:16px; height:42px; }
}

/* ===== Portfolio index (frame 861:164027) ===== */
/* search field: 845x52 centred */
.mh-search { max-width:845px; margin:0 auto; }
.mh-search input { width:100%; height:52px; box-sizing:border-box; padding:0 18px;
  border:1px solid #CAC2BB; border-radius:0; background:#fff;
  font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:14px; color:#110F0D; }
.mh-search input::placeholder { color:#9b9b9b; }
.mh-search input:focus { outline:2px solid #be9340; outline-offset:2px; border-color:#be9340; }
/* 3-up grid of 329x307 tiles, ~22px gutters / ~37px row gap */
.mh-tile > .elementor-element-populated { padding:0 11px 37px !important; }
.mh-tile-img img { display:block; width:100%; height:auto; aspect-ratio:329/307; object-fit:cover; }
.mh-phbox--tile .elementor-spacer-inner { aspect-ratio:329/307; }
/* "1, 2, 3 …" pagination */
.mh-pager { display:flex; justify-content:center; align-items:baseline; gap:6px;
  font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:13px; color:#60574F; }
.mh-pager a { color:#60574F; text-decoration:none; }
.mh-pager a:not(:last-of-type)::after { content:","; }
.mh-pager a.is-active { color:#110F0D; font-weight:700; }
.mh-pager a:hover { color:#866f1c; }

/* active nav item carries the 2px gold underline from the design */
.mh-nav a.is-active { border-bottom:2px solid #866f1c; }
.mh-hero-sub2 p { margin:0; }

/* ===== Project detail ===== */
.mh-crumb { font-family:'Figtree', -apple-system, system-ui, sans-serif; font-size:14px; color:#433A33; display:flex; gap:8px; }
.mh-crumb a { color:#433A33; text-decoration:none; }
.mh-crumb a:hover { color:#866f1c; }
.mh-hero-shot img, .mh-thumb img { display:block; width:100%; height:auto; }
.mh-thumb-col > .elementor-element-populated { padding:0 12px 25px !important; }

/* ===== Main-site mobile ===== */
@media (max-width:900px) {
  .mh-story-split > .elementor-container > .elementor-column,
  .mh-contact-split > .elementor-container > .elementor-column { width:100% !important; }
  .mh-story-left > .elementor-element-populated,
  .mh-contact-left > .elementor-element-populated { padding-right:0 !important; }
  .mh-story-right { margin-top:26px; }
  .mh-contact-right { margin-top:34px; }
  .mh-thumb-col > .elementor-element-populated { padding:0 6px 12px !important; }
  .mh-thumb-row > .elementor-container > .elementor-column { width:50% !important; }
  .mh-nav { display:none; }
  .mh-burger { display:flex; }
  .mh-header { padding-top:40px !important; padding-bottom:26px !important; }
  /* overlay padding tracks the header so the menu logo lands ON the header logo —
     top AND sides (sides must equal the 26px mobile gutter, not the desktop 30) */
  .mh-menu-inner { padding-top:40px !important;
    padding-left:26px !important; padding-right:26px !important; }
  .mh-header > .elementor-container { flex-wrap:nowrap !important; align-items:center !important; }
  .mh-header > .elementor-container > .elementor-column { width:auto !important; }
  .mh-header .mh-nav-col { flex:1 1 auto !important; }
  .mh-hero-cta .elementor-widget-wrap { flex-direction:column !important; align-items:stretch !important; }
  .mh-hero-cta .elementor-widget { width:100% !important; }
  .mh-hero-cta .elementor-button { width:100%; }
  /* Elementor stacks columns below its mobile breakpoint, but the mobile frame keeps
     these grids multi-up — so the widths are forced back. */
  .mh-shot-row > .elementor-container > .elementor-column { width:50% !important; }
  .mh-thumb-row > .elementor-container > .elementor-column { width:25% !important; }
  .mh-tile-row > .elementor-container > .elementor-column { width:50% !important; }
  .mh-tile > .elementor-element-populated { padding:0 6px 14px !important; }
  .mh-shot-col > .elementor-element-populated { padding:0 8px !important; }
  .mh-shot-row { margin-bottom:16px; }
  .mh-cta-left > .elementor-element-populated { padding-right:0 !important; }
  .mh-arrow { top:50%; transform:translateY(-50%); }
  .mh-arrow--prev { left:4px; }
  .mh-arrow--next { right:4px; }
  /* footer stacks and centres, per the Mobile DWC Homepage frame */
  .mh-foot > .elementor-container > .elementor-column { width:100% !important; text-align:center; }
  .mh-foot .sk-logo img { margin-left:auto; margin-right:auto; }
  .mh-ftag p { max-width:none; }
  .mh-fnav { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:18px; margin:18px 0; }
  .mh-fcol--social .elementor-widget-wrap { justify-content:center; }
  .mh-social--foot { justify-content:center; }
}

/* ===== Mobile ===== */
@media (max-width:820px) {
  .sk-hero-h1 .elementor-heading-title { font-size:40px !important; }
  .sk-job-split > .elementor-container > .elementor-column { width:100% !important; }
  .sk-job-left > .elementor-element-populated { padding-right:0 !important; }
  .sk-job-aside { margin-top:24px; }
  .sk-tab { padding:12px 14px; font-size:13px; }
}