/* ================================================================= SNOWLEOPARD Studio & Research — services.css Ghostwriting page (services.html): banner, retainer partnerships with pricing, testimonial and the Newsletter Voice Workbook. Depends on the tokens in base.css. ================================================================= */ /* ----- Shared elements -------------------------------------------- */ /* Hidden only when JavaScript is running to reveal it (.js is set in ), so content stays visible if the script fails. */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.72s ease, transform 0.72s ease; } .js .reveal.on { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } /* ----- Banner ----------------------------------------------------- */ /* Shares the Research page head's height and 6rem top spacing. */ .gw-banner { position: relative; min-height: clamp(440px, 44vw, 540px); display: flex; align-items: flex-start; overflow: hidden; background: #f2ebe5; } .gw-banner .gw-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; } .gw-banner .gw-banner-bg { filter: none; } /* Left-only scrim: bone under the copy, clear by the middle. */ .gw-banner .scrim { position: absolute; inset: 0; background: linear-gradient( to right, rgba(243, 234, 225, 0.85) 0%, rgba(243, 234, 225, 0.52) 20%, rgba(243, 234, 225, 0) 40% ); } .gw-banner-inner { position: relative; z-index: 2; text-align: left; width: 100%; max-width: none; margin: 0; padding: 6rem var(--edge) 5rem; } .gw-banner h1 { font-weight: 600; font-size: clamp(2.4rem, 4.5vw, 3.95rem); line-height: 1.1; letter-spacing: -0.012em; margin: 1.8rem 0 1.3rem; text-wrap: balance; } .gw-banner h1 em { font-style: italic; font-weight: 600; } .gw-subhead { font-family: var(--serif); font-weight: 400; font-size: 1.16rem; line-height: 1.8; margin: 0 0 1.6rem; max-width: 52ch; } /* Banner eyebrow with a 48px trailing hairline, as on Portfolio. */ .gw-label { /* Page-opening eyebrow in the homepage hero's serif treatment. */ font-family: var(--serif); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--museum-black); display: block; margin: 0 0 1.6rem; white-space: nowrap; } .gw-label::after { content: ""; display: inline-block; width: 48px; height: 1px; margin-left: 1rem; vertical-align: 0.34em; background: rgba(38, 38, 38, 0.45); } /* Scroll cue: a signpost to the partnerships, set in the eyebrow register. */ .gw-scroll-cue { display: inline-block; margin-top: 0.35rem; font-family: var(--serif); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--museum-black); text-decoration: none; border-bottom: 1px solid rgba(38, 38, 38, 0.28); padding-bottom: 0.3rem; transition: border-color 0.25s ease; } .gw-scroll-cue:hover { border-bottom-color: var(--museum-black); } .gw-scroll-cue:focus-visible { outline: 2px solid var(--museum-black); outline-offset: 4px; } .gw-scroll-cue .arr { display: inline-block; margin-left: 0.45rem; transition: transform 0.25s ease; } .gw-scroll-cue:hover .arr { transform: translateY(3px); } .gw-banner-grid { display: block; max-width: min(500px, 42%); } .gw-banner-lead h1 { margin-bottom: 0; } .gw-banner-support { margin-top: 1.7rem; } .gw-banner-support .gw-subhead { max-width: none; } /* ----- Partnerships ----------------------------------------------- */ /* Full bleed ground; the measure applies to the grid inside. */ .gw-plates-wrap { max-width: none; margin: 0; padding: 6.5rem var(--edge) 2rem; } .gw-plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem; max-width: var(--maxw); margin: 0 auto; } /* Lead-in set below the intro paragraph in size and weight. */ .gw-plates-lead { font-family: var(--serif); font-size: clamp(0.98rem, 1.25vw, 1.14rem); font-weight: 400; line-height: 1.75; color: var(--museum-black); text-align: center; max-width: 64ch; margin: 0 auto 3rem; text-wrap: pretty; } .price { font-size: 1.32rem; font-weight: 500; font-variant-numeric: oldstyle-nums; } .gw-feat { list-style: none; margin-top: 1.2rem; padding: 0; } .gw-feat li { font-weight: 400; font-size: 0.98rem; padding: 0.42rem 0 0.42rem 1.6rem; position: relative; } .gw-feat li::before { content: ""; position: absolute; left: 0; top: 1.02rem; width: 14px; height: 1px; background: rgba(38, 38, 38, 0.45); } /* ----- Responsive ------------------------------------------------- */ @media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .gw-plates { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } /* The veil is solid across the band where the tree fills the crop. */ .gw-banner .scrim { background: linear-gradient( to right, rgba(243, 234, 225, 0.95) 0%, rgba(243, 234, 225, 0.9) 55%, rgba(243, 234, 225, 0.74) 100% ); } .gw-banner-grid { max-width: min(480px, 78%); } /* The eyebrow may wrap; its hairline follows the last word. */ .gw-label { white-space: normal; } } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .gw-plates-wrap { padding: 3.5rem var(--edge) 1rem; } .gw-banner-inner { padding: 4.5rem var(--edge) 3.5rem; } /* Phones: the veil holds fully solid behind the copy. */ .gw-banner .scrim { background: rgba(243, 234, 225, 0.78); } .gw-banner-grid { max-width: none; } } /* ----- Partnerships introduction ---------------------------------- */ .gw-intro-compass { margin: 0 0 1.1rem; line-height: 0; display: flex; justify-content: center; } .gw-intro-compass img { width: 72px; height: 72px; object-fit: contain; display: block; } /* A Birch Light band across the full width. */ .gw-intro { background: #dfd4ca; max-width: none; margin: 0; padding: 4rem max(var(--edge), calc((100% - 820px) / 2)) 1.5rem; text-align: center; } .gw-intro-eyebrow { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--museum-black); margin: 0 0 1.4rem; display: flex; align-items: center; justify-content: center; gap: 1rem; } .gw-intro-eyebrow::before, .gw-intro-eyebrow::after { content: ""; width: 48px; height: 1px; background: rgba(38, 38, 38, 0.35); } /* Space beneath the headline scales with it. */ .gw-intro-h { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0; } .gw-intro-h em { font-style: italic; font-weight: 600; } /* The tiers share the introduction's Birch ground. */ .gw-plates-wrap { background: #dfd4ca; padding-top: 1.5rem; } .gw-tier { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; } /* Desktop: hairlines between the three columns bind them into one table. */ @media (min-width: 1025px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { .gw-tier + .gw-tier::before { content: ""; position: absolute; left: -1.6rem; top: 0.5rem; bottom: 0.5rem; width: 1px; background: rgba(38, 38, 38, 0.14); } } .gw-tier .gw-tier-name { font-size: 2.4rem; font-weight: 600; margin: 0 0 0.5rem; line-height: 1; color: var(--apothecary); } .gw-tier .plate-sub { font-family: var(--serif); font-size: 1.02rem; font-weight: 400; line-height: 1.4; color: var(--museum-black); margin: 0 0 1.5rem; max-width: 26ch; min-height: 2.8em; display: flex; align-items: center; justify-content: center; text-wrap: balance; } .gw-price { margin: 1.6rem 0 0; padding-bottom: 1.3rem; border-bottom: 1px solid rgba(38, 38, 38, 0.16); width: 100%; } .gw-price .price { font-size: 1.5rem; font-weight: 600; font-variant-numeric: oldstyle-nums; color: var(--museum-black); } .gw-price .per { font-size: 0.95rem; font-weight: 400; color: var(--museum-black); margin-left: 0.15em; } .gw-tier .gw-feat { list-style: none; margin: 1.5rem 0 0; padding: 0; width: 100%; text-align: left; } .gw-tier .gw-feat li { font-weight: 400; font-size: 1rem; line-height: 1.5; padding: 0.5rem 0 0.5rem 1.6rem; position: relative; } .gw-tier .gw-feat li::before { content: ""; position: absolute; left: 0.15rem; top: 0.88rem; width: 0.42rem; height: 0.72rem; background: none; border: solid var(--apothecary); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0.85; display: block; } /* ----- Newsletter Voice Workbook ---------------------------------- */ /* The download page's hero, repeated here so the offer and download are one step. */ .wb-hero { position: relative; display: flex; align-items: center; overflow: hidden; } .wb-bg { position: absolute; inset: 0; background: url("../images/heroes/jungle-view.jpg") center/cover no-repeat; } /* Veil is heaviest under the copy and eases toward the cover. */ /* A saturated copy of the photograph, masked to the blooms, lifts the flowers without thinning the veil. */ .wb-bg::after { content: ""; position: absolute; inset: 0; background: inherit; filter: saturate(2.4) contrast(1.04); pointer-events: none; -webkit-mask-image: radial-gradient( ellipse 22% 22% at 30% 97%, #000 0%, rgba(0, 0, 0, 0.62) 48%, transparent 86% ), radial-gradient( ellipse 6% 11% at 45% 68%, #000 0%, rgba(0, 0, 0, 0.6) 46%, transparent 88% ); mask-image: radial-gradient( ellipse 22% 22% at 30% 97%, #000 0%, rgba(0, 0, 0, 0.62) 48%, transparent 86% ), radial-gradient( ellipse 6% 11% at 45% 68%, #000 0%, rgba(0, 0, 0, 0.6) 46%, transparent 88% ); } .wb-scrim { position: absolute; inset: 0; background: linear-gradient( to right, rgba(243, 239, 230, 0.93) 0%, rgba(243, 239, 230, 0.9) 26%, rgba(243, 239, 230, 0.82) 46%, rgba(243, 239, 230, 0.76) 66%, rgba(243, 239, 230, 0.72) 100% ); /* The right-hand stop keeps the download label above 4.5:1 contrast. */ } /* Stacked, the wash runs across the full width. */ @media (max-width: 900px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .wb-scrim { background: linear-gradient( to bottom, rgba(243, 239, 230, 0.72) 0%, rgba(243, 239, 230, 0.8) 34%, rgba(243, 239, 230, 0.9) 55%, rgba(243, 239, 230, 0.93) 100% ); } } .wb-inner { position: relative; z-index: 2; width: 100%; padding: 4.5rem var(--edge); /* Columns are capped near their content so the pair stays together. */ display: grid; /* The auto cover track keeps the cover flush right at any size. */ grid-template-columns: minmax(0, 33rem) auto; justify-content: space-between; gap: clamp(2.25rem, 2.6vw, 3.25rem); align-items: center; /* A narrower measure keeps the copy and cover reading as one object. */ max-width: 1050px; margin-inline: auto; } .wb-label { font-family: var(--serif); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--museum-black); display: block; margin: 0 0 1.35rem; } .wb-label::after { content: ""; display: inline-block; width: 48px; height: 1px; margin-left: 1rem; vertical-align: 0.34em; background: rgba(38, 38, 38, 0.45); } .wb-headline { font-family: var(--serif); font-weight: 600; font-size: clamp(1.95rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.012em; margin: 0 0 1.4rem; text-wrap: balance; } .wb-body { font-weight: 600; font-size: 1.1rem; line-height: 1.6; max-width: 48ch; color: #4a4744; margin: 0; } .wb-invite { margin-top: 2.4rem; padding-top: 0; max-width: 46ch; } /* Museum Black for 4.5:1 over the photograph. */ .wb-invite-title { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--museum-black); margin: 0 0 0.7rem; } .wb-invite-copy { font-size: 0.96rem; font-weight: 500; line-height: 1.65; color: #3c3934; margin: 0 0 1.05rem; } .wb-invite-copy em { font-style: italic; } .wb-form { max-width: 400px; } /* The cover is the download link. */ .wb-cover { display: flex; flex-direction: column; align-items: center; } .wb-cover a { display: block; max-width: 430px; width: 100%; text-decoration: none; transition: transform 0.4s ease; } .wb-cover a:hover { transform: translateY(-8px) scale(1.012); } .wb-cover img { width: 100%; height: auto; display: block; box-shadow: 0 22px 60px -24px rgba(38, 38, 38, 0.5); transition: box-shadow 0.4s ease; } .wb-cover a:hover img { box-shadow: 0 34px 82px -26px rgba(38, 38, 38, 0.6); } .wb-cover a:focus-visible { outline: 2px solid var(--museum-black); outline-offset: 6px; } /* Fireweed marks the action: 5.4:1 against the darkest part of the scrim. */ .wb-hint { display: block; text-align: center; font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fireweed); margin-top: 1.25rem; } .wb-cover a:hover .wb-hint { color: #74203f; } .wb-hint .arr { display: inline-block; margin-left: 0.4rem; transition: transform 0.25s ease; } .wb-cover a:hover .arr { transform: translateY(3px); } /* Short desktop windows: the cover height follows the available height, less the sticky header, so the band fits one screen. */ @media (min-width: 901px) and (orientation: landscape) and (min-height: 501px), (min-width: 1001px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { .wb-cover a { max-width: min(430px, calc((100vh - 380px) / 1.25)); } } @media (min-width: 901px) and (max-height: 960px) and (orientation: landscape) and (min-height: 501px), (min-width: 1001px) and (max-height: 960px) and (orientation: landscape) { .wb-inner { padding-top: 3.25rem; padding-bottom: 3.25rem; } /* The next section's first line shows above the fold. */ .wb-hero + .wb-inside { padding-top: 2.5rem; } } @media (min-width: 901px) and (max-height: 840px) and (min-height: 501px), (min-width: 1001px) and (max-height: 840px) { .wb-inner { padding-top: 2.25rem; padding-bottom: 2.25rem; } } @media (max-width: 900px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .wb-inner { display: flex; flex-direction: column; gap: 0; padding: 4rem var(--edge); align-items: stretch; } /* Stacked order: title and description, the cover, then the invitation. */ .wb-copy { display: contents; } .wb-label { order: 1; } .wb-headline { order: 2; } .wb-body { order: 3; } .wb-cover { order: 4; margin-top: 2.9rem; } .wb-invite { order: 5; margin-top: 2.9rem; } .wb-cover a { max-width: 360px; } .wb-invite { max-width: none; } .wb-form { max-width: 460px; } } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .wb-form, .wb-form .btn-pill { max-width: 100%; width: 100%; } } /* Narrow screens: centred eyebrows drop their hairlines. */ @media (max-width: 420px) { .gw-intro-eyebrow::before, .gw-intro-eyebrow::after { display: none; } } /* Phones: heavier banner copy over the photograph. */ @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .gw-subhead { font-weight: 600; } /* The eyebrow rule sits beneath the wrapped label. */ .wb-label { margin-bottom: 1.25rem; } .wb-label::after { display: block; width: 48px; height: 1px; margin: 0.78rem 0 0 0; vertical-align: initial; background: rgba(38, 38, 38, 0.45); } } .gw-banner-mobile-nib { display: none; } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { /* The nib sits with the headline. */ .gw-banner-lead { display: flex; align-items: center; gap: 1rem; } .gw-banner-mobile-nib { display: flex; order: 2; flex: 0 0 auto; justify-content: center; align-items: center; margin: 0; line-height: 0; } .gw-banner-mobile-nib img { width: 35px; height: auto; display: block; transform: translate(-28px, 14px); } .gw-banner-lead h1 { order: 1; flex: 1 1 auto; margin-top: 1.8rem; } .gw-intro-compass { display: flex; } } /* Desktop: each partnership promise on its own line. */ @media (min-width: 1025px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { .gw-intro .gw-intro-h em { display: block; white-space: nowrap; } } /* Workbook titles lead; descriptions in regular weight. */ .wb-inside .wbi-body { font-weight: 400; } /* Phones: workbook exercises left-aligned, as on the homepage. */ @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .wb-inside .wbi-inner { text-align: left; } .wb-inside .wbi-eyebrow { justify-content: flex-start; } .wb-inside .wbi-eyebrow::before { display: none; } .wb-inside .wbi-eyebrow::after { flex: 0 0 48px; } .wb-inside .wbi-grid { max-width: none; margin-inline: 0; } .wb-inside .wbi-item { align-items: flex-start; } .wb-inside .wbi-body { max-width: none; margin-inline: 0; text-wrap: pretty; } .wb-inside .wbi-item + .wbi-item::before { left: 0; right: 0; } .wb-inside .wbi-close { margin-inline: 0; } /* Feature lists centred as blocks, text left-aligned. */ .gw-tier .gw-feat { width: min(100%, 18rem); margin-inline: auto; text-align: left; } /* One gap between the package promise and the price. */ .gw-tier .plate-sub { margin-bottom: 0; min-height: 0; } .gw-tier .gw-price { margin-top: 1.25rem; padding-bottom: 1rem; } .gw-tier .gw-feat { margin-top: 1rem; } /* Underline-only email field. */ .wb-hero .wb-form input[type="email"] { background: transparent; border: 0; border-bottom: 1px solid rgba(22, 59, 54, 0.78); border-radius: 0; padding: 0.6rem 0; box-shadow: none; } .wb-hero .wb-form input[type="email"]:focus { outline: none; border-bottom-color: var(--fireweed); box-shadow: 0 1px 0 var(--fireweed); } } /* Package cards: icons and copy share one left-aligned column. */ .gw-plates { gap: clamp(1rem, 2.2vw, 2rem); } .gw-plates .gw-tier { box-sizing: border-box; min-width: 0; padding: clamp(1.5rem, 2.4vw, 2.4rem); align-items: flex-start; text-align: left; background: var(--birch-light); border: 1px solid rgba(22, 59, 54, 0.16); border-radius: 24px; transition: opacity 0.72s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .gw-plates .gw-tier + .gw-tier::before { content: none; } /* Offsets each icon's transparent margin within a fixed 100px slot, so headings and prices align. */ .gw-tier-icon { position: relative; width: 100px; height: 100px; margin: 0 0 1.5rem; flex: none; } .gw-tier-icon img { position: absolute; display: block; max-width: none; object-fit: contain; transform: none; } .gw-tier-icon--sprout img { width: 75.447154px; height: 66.01626px; left: 0; top: 21.99187px; } .gw-tier-icon--signal img { width: 75.447154px; height: 66.01626px; left: 0; top: 21.99187px; } .gw-tier-icon--source img { width: 75.447154px; height: 66.01626px; left: 0; top: 21.99187px; } .gw-plates .gw-tier .plate-sub { display: block; text-align: left; text-wrap: pretty; max-width: none; min-height: 2.8em; margin: 0; } .gw-plates .gw-tier .gw-price { text-align: left; margin-top: 1.75rem; } .gw-plates .gw-tier .gw-feat { width: 100%; margin-inline: 0; } @media (hover: hover) and (pointer: fine) { .gw-plates .gw-tier:hover { transform: translateY(-5px); border-color: rgba(22, 59, 54, 0.4); box-shadow: 0 12px 28px rgba(22, 59, 54, 0.09); } } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .gw-plates .gw-tier { border-radius: 20px; } .gw-plates .gw-tier .plate-sub { min-height: 0; } } @media (prefers-reduced-motion: reduce) { .gw-plates .gw-tier { transition: none; } .gw-plates .gw-tier:hover { transform: none; } } /* Inherited features, directly below the price divider. */ .gw-plates .gw-tier .gw-includes { margin: 1.5rem 0 0; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--apothecary); text-align: left; } .gw-plates .gw-tier .gw-includes + .gw-feat { margin-top: 0.45rem; } /* Desktop: two sentence lines; natural wrapping elsewhere. */ @media (min-width: 1025px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { .gw-plates-lead { max-width: 80ch; } .gw-plates-lead > span { display: block; } } /* Inquiry buttons share a baseline at the foot of each card. */ .gw-tier-action { margin-top: auto; padding-top: 2rem; width: 100%; } .gw-tier-action .gw-tier-cta { box-sizing: border-box; width: 100%; padding: 0.85rem 1rem; min-height: 48px; line-height: 1.3; letter-spacing: 0.08em; } .gw-tier-action .gw-tier-cta { background-color: var(--apothecary); color: var(--bone); border-color: var(--apothecary); } .gw-tier-action .gw-tier-cta:hover { background-color: var(--bone); color: var(--apothecary); border-color: var(--apothecary); box-shadow: 0 8px 20px rgba(22, 59, 54, 0.15); } .gw-tier-action .gw-tier-cta:focus-visible { outline: 2px solid var(--apothecary); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .gw-tier-action .gw-tier-cta { transition: none; } .gw-tier-action .gw-tier-cta:hover { transform: none; } } /* Testimonial closing the partnerships section. */ .gw-testimonial { max-width: 740px; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(22, 59, 54, 0.2); text-align: center; color: var(--apothecary); } .gw-testimonial-label { margin: 0 0 1.25rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .gw-testimonial blockquote { margin: 0; } .gw-testimonial blockquote p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, 1.35vw, 1.18rem); line-height: 1.7; } .gw-testimonial figcaption { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.25rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.6; } .gw-testimonial-role { font-weight: 400; letter-spacing: 0.08em; } @media (min-width: 1025px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { .gw-testimonial { padding-bottom: 24px; } } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .gw-testimonial { text-align: left; margin-top: 2rem; } }